✨ Demo for React India

next.config.js

@@ -11,4 +11,8 @@ module.exports = withTM({
 
     return config;
   },
+
+  typescript: {
+    ignoreBuildErrors: true,
+  },
 });

package.json

@@ -12,15 +12,15 @@
   "dependencies": {
     "@mdi/js": "^5.6.55",
     "@mdi/react": "^1.4.0",
-    "drei": "^1.5.6",
+    "@react-three/drei": "^9.86.3",
     "next": "9.5.3",
-    "react": "16.13.1",
+    "react": "18.2.0",
     "react-color": "^2.18.1",
-    "react-dom": "16.13.1",
+    "react-dom": "18.2.0",
     "react-github-corner": "^2.5.0",
     "react-switch": "^5.0.1",
-    "react-three-fiber": "^4.2.21",
-    "three": "^0.120.1",
+    "react-three-fiber": "^6.0.13",
+    "three": "^0.155.0",
     "zustand": "^2.2.3"
   },
   "devDependencies": {

src/components/ModelContainer/ModelContainer.tsx

@@ -5,11 +5,13 @@ import {
   SkinnedMesh,
   Mesh,
   MeshBasicMaterial,
-  SphereBufferGeometry,
   MeshStandardMaterial,
   GridHelper,
   Color,
   SpotLight,
+  SphereGeometry,
+  SpotLightHelper,
+  SkeletonHelper,
 } from "three";
 import { useTransformOnClick } from "@hooks/useTransformOnClick";
 import { useLoader } from "@hooks/useLoader";
@@ -28,7 +30,7 @@ function _ModelContainer({ onInitialModelLoad }) {
     () =>
       new MeshBasicMaterial({
         color: "red",
-        wireframe: true,
+        wireframe: false,
       }),
     []
   );
@@ -67,7 +69,7 @@ function _ModelContainer({ onInitialModelLoad }) {
     model?.traverse((object) => {
       if (object instanceof SkinnedMesh) {
         if (object.material instanceof MeshStandardMaterial) {
-          object.material.wireframe = editMode;
+          object.material.wireframe = false;
         }
       }
     });
@@ -99,17 +101,20 @@ function _ModelContainer({ onInitialModelLoad }) {
     model.traverse((object) => {
       if (object instanceof SkinnedMesh) {
         if (object.material instanceof MeshStandardMaterial) {
-          object.material.wireframe = editMode;
+          object.material.wireframe = true;
         }
 
         const bbox = object.geometry.boundingBox;
         const rootBone = object.skeleton.bones[0];
 
-        const mesh = new Mesh(new SphereBufferGeometry(2.5), boneMeshMaterial);
+        const mesh = new Mesh(new SphereGeometry(1.5), boneMeshMaterial);
         mesh.name = object.id.toString(10);
         rootBone.add(mesh);
 
         bbox.setFromObject(rootBone);
+
+        const helper = new SkeletonHelper(mesh);
+        scene.add(helper);
       }
     });
     reset();
@@ -123,15 +128,19 @@ function _ModelContainer({ onInitialModelLoad }) {
   useLoader(modelName, onLoad);
 
   useEffect(() => {
-    const spotLight = new SpotLight(0xffffff, 0.7);
-    spotLight.position.set(50, 50, 300);
-    scene.add(spotLight);
+    const spotLight = new SpotLight(0xffffff, 0.7 * Math.PI);
+    spotLight.position.set(50, 50, 200);
+    spotLight.decay = 0;
 
-    const spotLightBack = new SpotLight(0xffffff, 0.7);
-    spotLightBack.position.set(50, 50, -300);
-    scene.add(spotLightBack);
+    const spolightHelper = new SpotLightHelper(spotLight, "#000000");
+    scene.add(spotLight);
+    scene.add(spolightHelper);
 
-    setRenderer(gl);
+    // const spotLightBack = new SpotLight(0xffffff, 0.7 * Math.PI);
+    // spotLightBack.position.set(50, 50, -200);
+    // spotLightBack.decay = 0;
+    // scene.add(spotLightBack);
+    // setRenderer(gl);
   }, []);
 
   return null;

src/components/ModelLoader/ModelLoader.tsx

@@ -32,14 +32,17 @@ export default function ModelLoader() {
           flex: 1,
         }}
       >
-        <Canvas
-          shadowMap
-          invalidateFrameloop={false}
-          camera={cameraProps as any}
-          pixelRatio={window.devicePixelRatio}
-          gl={webRendererOptions}
-        >
-          <ambientLight intensity={1} />
+        <Canvas camera={{ position: [100, 120, 200] }}>
+          {/*<pointLight*/}
+          {/*  position={[50, 50, 200]}*/}
+          {/*  intensity={0.7 * Math.PI}*/}
+          {/*  decay={0}*/}
+          {/*/>*/}
+          {/*<pointLight*/}
+          {/*  position={[50, 50, -200]}*/}
+          {/*  intensity={0.7 * Math.PI}*/}
+          {/*  decay={0}*/}
+          {/*/>*/}
 
           <ModelContainer onInitialModelLoad={setIsModelLoaded} />
         </Canvas>