Proof of Concept C3->Obj->Gltf File viewer in Browser. [React, Three.js (react-three-fiber)]

1
A few months back I started looking at the prospect of creating a garment viewer in browser and decided to explore if it would be possible to render Conquer's C3 files in browser somehow. All Information I found seemed to point to requiring of Blender and a C3 Plugin that was created in the conquer community for that specific version of Blender. I set out to see if there were any modern tools that could convert the C3 files to formats that were more universally accessible.

I came across this http://3doc.i3dconverter.com Tool. The free version sufficed for experimentation reasons - it was able to import the base C3 file in an C3 folder and convert it to an .obj format, where I then used an Online converter to conver the .obj to gbl/gltf format.

Note: The free version of the tool will remove every 5th polygon from the exported version, for demo purposes it didn't matter but keep that in mind.

Once in the .glb/gltf format, I used this npx package to convert the gltf file straight into a Js/Jsx component that can be imported into the react app and rendered inside a react-three fiber canvas:

Code: Select all

import React, { useRef, useState, Suspense } from "react";
import { Canvas, useFrame, useThree, extend } from "react-three-fiber";
import * as THREE from "three";
import './App.css'
import FemaleTro from './FemaleTro';
import Piggie from './Piggie';

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// Extend will make OrbitControls available as a JSX element called orbitControls for us to use.
extend({ OrbitControls });

const Box = (props) => {
  // This reference will give us direct access to the mesh
  const mesh = useRef();

  // Set up state for the hovered and active state 
  const [active, setActive] = useState(false);

  // Rotate mesh every frame, this is outside of React without overhead
  useFrame(() => {
    mesh.current.rotation.x = mesh.current.rotation.y += 0.01;
  });
  
  
  return (
    <mesh
    {...props}
    ref={mesh}
    scale={active ? [2, 2, 2] : [1.5, 1.5, 1.5]}
    onClick={(e) => setActive(!active)}
      >
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshBasicMaterial attach="material" transparent side={THREE.DoubleSide}>
      </meshBasicMaterial>
    </mesh>
  );
}

const CameraControls = () => {
    // Get a reference to the Three.js Camera, and the canvas html element.
    // We need these to setup the OrbitControls class.
    // https://threejs.org/docs/#examples/en/controls/OrbitControls
  
    const {
      camera,
      gl: { domElement },
    } = useThree();
  
    // Ref to the controls, so that we can update them on every frame using useFrame
    const controls = useRef();
    useFrame((state) => controls.current.update());
    return (
      <orbitControls
        ref={controls}
        args={[camera, domElement]}
        enableZoom={true}
        maxAzimuthAngle={Math.PI / 23}
        maxPolarAngle={Math.PI}
        minAzimuthAngle={-Math.PI / 4}
        minPolarAngle={0}
      />
    );
  };

  
const App = () => {
  return (
    <Canvas>
        <CameraControls />
        
        <Suspense fallback={null}>

            <ambientLight intensity={0.5} />
            <spotLight position={[10, 10, 10]} angle={5.15} penumbra={1} />
            <pointLight position={[0, 0, 0]} />
            <FemaleTro />
      </Suspense>
    </Canvas>
  );
}

export default App;
NPM package dependencies:

Code: Select all


  "dependencies": {
    "@react-three/drei": "^4.0.1",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "react-three-fiber": "^5.3.22",
    "three": "^0.127.0",
  },
  
The end result was something like this:
https://imgur.com/g1Pef4S

It's by no means perfect but it was something I managed to put together in short amount of time to see what was possible.
Happy to hear of more efficient ways of doing the conversion, or if there are even better processes in place for rendering this stuff in browser. It was actually this project that set me down the path of looking at different sources and trying to learn more about the conquer private server eco system. I hope to pick it back up and create a proper garment/item/npc viewer in browser for more robust webpages/guides.

Hope this proof of concept/demo helps if anyone had similar ideas in mind!

Re: Proof of Concept C3->Obj->Gltf File viewer in Browser. [React, Three.js (react-three-fiber)]

2
I personally don't have much feedback to give on the React part - I enjoyed it for the brief time I worked with it - but the demo you gave looks pretty cool. I don't know many people who've worked with C3 in the last decade... not even enough people to count on one hand. So this is pretty cool to see. I'm going to move this to the Conquer Online projects section if you don't mind since it's more specific than web development, but I'll leave a shadow link from the web section. I'm looking forward to your future plans for a viewer (will be cool to see a demo when you make more progress).

Re: Proof of Concept C3->Obj->Gltf File viewer in Browser. [React, Three.js (react-three-fiber)]

5
Rezlind wrote: Fri May 21, 2021 1:44 am
Omicron wrote: Thu May 20, 2021 12:31 pm Ulti and I had a working demo where you could select the body type, weapons, armor or garments.
The issue we were facing were the animations of the body, it certainly is possible but a pain to get it working fully.
Wow that's really impressive, what came of the project?
Nothing haha, spend a lot or time on trying to get it to work but failed. Idle animation was working though so that was nice haha. Something was missing but couldn’t figure out what. We essentially rage quit.

Re: Proof of Concept C3->Obj->Gltf File viewer in Browser. [React, Three.js (react-three-fiber)]

6
Omicron wrote: Fri May 21, 2021 6:59 am
Rezlind wrote: Fri May 21, 2021 1:44 am
Omicron wrote: Thu May 20, 2021 12:31 pm Ulti and I had a working demo where you could select the body type, weapons, armor or garments.
The issue we were facing were the animations of the body, it certainly is possible but a pain to get it working fully.
Wow that's really impressive, what came of the project?
Nothing haha, spend a lot or time on trying to get it to work but failed. Idle animation was working though so that was nice haha. Something was missing but couldn’t figure out what. We essentially rage quit.
Haha I know the feel, going through the same thing with DH exchange on 5187 at the moment. Have you guys considered releasing the work you have so far on the C3 viewer so others can expand on it?
cron