From e36456bf2ce7e678debf952cc78f98550f41d0dc Mon Sep 17 00:00:00 2001 From: Nobatgeldi Date: Sat, 9 Dec 2023 22:55:18 +0300 Subject: [PATCH] animation button added to scene --- src/covisart/Simulator.js | 91 ++++++++++++++++++--------------- src/covisart/models/NGS_GLT.jsx | 12 +++-- src/covisart/store.js | 2 +- src/covisart/styles.css | 4 +- 4 files changed, 61 insertions(+), 48 deletions(-) diff --git a/src/covisart/Simulator.js b/src/covisart/Simulator.js index 742d90b..00f2dca 100644 --- 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 {progress} % loaded } 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 ( - - }> - - - - +
+ + }> + + + + - + - + - - - - + + + + - - - - + + + + +
+ +
+
) } \ No newline at end of file diff --git a/src/covisart/models/NGS_GLT.jsx b/src/covisart/models/NGS_GLT.jsx index 8fc8782..26323f5 100644 --- 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 index f7113f1..e962963 100644 --- 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 index 69da1d4..fcb8ce0 100644 --- 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 {