animation button added to scene

COVISART · Dec 9, 2023 · e36456b · e36456b
1 parent ec89c4c
commit e36456b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 48 deletions.
diff --git a/src/covisart/Simulator.js b/src/covisart/Simulator.js
@@ -1,5 +1,5 @@
 import { useRef, Suspense } from 'react'
-import { Canvas, useThree  } from '@react-three/fiber'
+import { Canvas, useThree } from '@react-three/fiber'
 import { useGLTF, Stage, Grid, OrbitControls, Html, ContactShadows, MeshDiscardMaterial, useProgress } from '@react-three/drei'
 import { EffectComposer, Bloom } from '@react-three/postprocessing'
 import { Model } from './models/NGS_GLT_V2'
@@ -12,49 +12,60 @@ function Loader() {
   return <Html center>{progress} % loaded</Html>
 }
 export default function Simulator() {
-  const { ruler } = useControls({ "ruler": false })
-  state.ruler = ruler
-
+  /*const { ruler, animate } = useControls({ "ruler": false, "animate": false })
+  state.animate = animate
+  state.ruler = ruler*/
+
   return (
-    <Canvas
-      style={{ height: "100vh" }}
-      frameloop="demand"
-      camera={{fov: 45}}>
-      <Suspense fallback={<Loader />}>
-        <Stage intensity={0.5} environment="city" adjustCamera={false} >
-          <Ngs_GLT url="/covisart/models/NGS_GLT_V2-transformed.glb" />
-        </Stage>
-      </Suspense>
+    <div>
+      <Canvas
+        style={{ height: "100vh" }}
+        frameloop="demand"
+        camera={{ fov: 45 }}>
+        <Suspense fallback={<Loader />}>
+          <Stage intensity={0.5} environment="city" adjustCamera={false} >
+            <Ngs_GLT url="/covisart/models/NGS_GLT_V2-transformed.glb" />
+          </Stage>
+        </Suspense>
 
-      <Grid
-        renderOrder={-1}
-        position={[-0.17, -1.32, 0]}
-        infiniteGrid
-        cellSize={0.4}
-        cellThickness={0.6}
-        cellColor={[1, 1, 1]}
-        sectionSize={4}
-        sectionThickness={1.5}
-        sectionColor={[1, 1, 1]}
-        fadeDistance={30}
-        fadeStrength={10} />
+        <Grid
+          renderOrder={-1}
+          position={[-0.17, -1.32, 0]}
+          infiniteGrid
+          cellSize={0.4}
+          cellThickness={0.6}
+          cellColor={[1, 1, 1]}
+          sectionSize={4}
+          sectionThickness={1.5}
+          sectionColor={[1, 1, 1]}
+          fadeDistance={30}
+          fadeStrength={10} />
 
-      <OrbitControls
-        autoRotate={true}
-        autoRotateSpeed={-0.4}
-        enableZoom={false}
-        makeDefault
-        minPolarAngle={Math.PI / 2}
-        maxPolarAngle={Math.PI / 2} />
+        <OrbitControls
+          autoRotate={true}
+          autoRotateSpeed={-0.4}
+          enableZoom={false}
+          makeDefault
+          minPolarAngle={Math.PI / 2}
+          maxPolarAngle={Math.PI / 2} />
 
-      <ambientLight position={[0, 2, 5]} />
-      <ambientLight position={[-5, 2, 0]} />
-      <ambientLight position={[0, 2, -5]} />
-      <ambientLight position={[5, 2, 0]} />
+        <ambientLight position={[0, 2, 5]} />
+        <ambientLight position={[-5, 2, 0]} />
+        <ambientLight position={[0, 2, -5]} />
+        <ambientLight position={[5, 2, 0]} />
 
-      <EffectComposer disableNormalPass>
-        <Bloom luminanceThreshold={0.2} luminanceSmoothing={0} intensity={1.0} />
-      </EffectComposer>
-    </Canvas>
+        <EffectComposer disableNormalPass>
+          <Bloom luminanceThreshold={0.2} luminanceSmoothing={0} intensity={1.0} />
+        </EffectComposer>
+      </Canvas>
+      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
+        <button
+          className="share btn-default btn-border"
+          style={{ background: 'rgb(255 127 0 / 39%)' }}
+          onClick={() => (state.animate = !state.animate)}>
+          Animation
+        </button>
+      </div>
+    </div>
   )
 }
diff --git a/src/covisart/models/NGS_GLT.jsx b/src/covisart/models/NGS_GLT.jsx
@@ -19,14 +19,16 @@ export function Ngs_GLT({ url, ...props }) {
   easing.dampC(materials.Metal.color, snap.color, 0.0, 0)
 
   useFrame((state, delta) => {
-    const t = Math.sin(state.clock.elapsedTime) //map(Math.sin(state.clock.elapsedTime), -45, 45, -360, 360)
-    easing.dampE(axis3.current.rotation, [t, 0, 0], control.speed, delta/2)
-    easing.dampE(axis2.current.rotation, [0, t, 0], control.speed, delta/2)
-    easing.dampE(axis1.current.rotation, [t, 0, 0], control.speed, delta/2)
+    const t = Math.sin(state.clock.elapsedTime)
+    if(snap.animate){
+      easing.dampE(axis3.current.rotation, [t, 0, 0], snap.speed, delta/2)
+      easing.dampE(axis2.current.rotation, [0, t, 0], snap.speed, delta/2)
+      easing.dampE(axis1.current.rotation, [t, 0, 0], snap.speed, delta/2)
+    }
   })
   useLayoutEffect(() => {
     Object.values(nodes).forEach((node) => node.isMesh &&
-      (node.receiveShadow = node.castShadow = true,
+      (node.receiveShadow = node.castShadow = false,
         applyProps(node.material, { roughness: 1.0, roughnessMap: null, normalScale: [4, 4] })))
   }, [nodes, materials])
   return (

diff --git a/src/covisart/store.js b/src/covisart/store.js
@@ -5,7 +5,7 @@ const state = proxy({
   phone:"0",
   email:"",
   country:"Turkey",
-  ruler: true,
+  ruler: false,
   ordered: false,
   sizes: ["450", "850"],
   size: '450',

diff --git a/src/covisart/styles.css b/src/covisart/styles.css
@@ -25,9 +25,9 @@
 }
 
 .share {
-  bottom: 40px;
+  bottom: 4%;
   position: absolute;
-  right: 40px;
+  right: 50%;
 }
 
 .zoom {