.

Author: abernier

.storybook/stories/Fbo.stories.tsx

@@ -24,8 +24,9 @@ type Story = StoryObj<typeof Fbo>
 function SpinningThing() {
   const mesh = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
 
-  useFrame(() => {
-    mesh.current.rotation.x = mesh.current.rotation.y = mesh.current.rotation.z += 0.01
+  useFrame((state) => {
+    const t = state.clock.getElapsedTime()
+    mesh.current.rotation.x = mesh.current.rotation.y = mesh.current.rotation.z = t
   })
 
   return (

.storybook/stories/HTML.stories.tsx

@@ -95,21 +95,14 @@ export const HTMLTransformSt = {
 
 function HTMLOrthographicScene(props: HtmlProps) {
   const camera = useThree((state) => state.camera)
-  const [zoomIn, setZoomIn] = React.useState(true)
 
   const initialCamera = {
     position: new THREE.Vector3(0, 0, -10),
   }
 
-  useFrame(() => {
-    zoomIn ? (camera.zoom += 0.01) : (camera.zoom -= 0.01)
+  useFrame((state) => {
+    camera.zoom = 2 + Math.sin(state.clock.getElapsedTime()) * 1
     camera.updateProjectionMatrix()
-
-    if (camera.zoom > 3) {
-      setZoomIn(false)
-    } else if (camera.zoom < 1) {
-      setZoomIn(true)
-    }
   })
 
   return (