Update model loading

Jaroslaw · Jaroslaw · commit 0c8b0da0a5a9 · 2020-12-09T20:49:55.000+02:00
diff --git a/src/components/Light.tsx b/src/components/Light.tsx
@@ -3,9 +3,7 @@ import React from "react";
 const Lights = () => {
   return (
     <>
-      {/* Ambient Light illuminates lights for all objects */}
       <ambientLight intensity={0.1} />
-      {/* Diretion light */}
       <directionalLight position={[40, 10, 5]} intensity={0.2} />
       <directionalLight
         castShadow
@@ -19,7 +17,6 @@ const Lights = () => {
         shadow-camera-top={40}
         shadow-camera-bottom={-10}
       />
-      {/* Spotlight Large overhead light */}
       <spotLight intensity={0.5} position={[90, 100, 50]} castShadow />
     </>
   );
diff --git a/src/components/Model.tsx b/src/components/Model.tsx
@@ -1,21 +1,27 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
+import { useFrame } from "react-three-fiber";
 import * as THREE from "three";
 import { Html } from "drei";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
 const Model = () => {
+  const ref = useRef();
   const [model, setModel] = useState(null);
   /* Load model */
   useEffect(() => {
     const loader = new GLTFLoader();
-    loader.load("scene.gltf", true);
+    loader.load("scene.gltf", (gltf) => {
+      setModel(gltf);
+    });
   }, []);
 
+  useFrame(() => (model ? (ref.current.rotation.y += 0.01) : {}));
+
   return (
     <>
       {model ? (
         <group position={[0, 0, 0]} dispose={null}>
-          <primitive name="Object_0" object={model.scene} />
+          <primitive ref={ref} name="Object_0" object={model.scene} />
         </group>
       ) : (
         <Html>Loading...</Html>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,3 @@
-import "@/styles/styles.css";
 import React from "react";
 import { Canvas } from "react-three-fiber";
 import Loader from "@/components/Loader";
diff --git a/src/styles/styles.css b/src/styles/styles.css

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import "@/styles/styles.css";`
`2`	`1`	`import React from "react";`
`3`	`2`	`import { Canvas } from "react-three-fiber";`
`4`	`3`	`import Loader from "@/components/Loader";`