# How would I go about making this animation in three.js? I have something but it looks like a fabric sheet!

**URL:** <https://discourse.threejs.org/t/how-would-i-go-about-making-this-animation-in-three-js-i-have-something-but-it-looks-like-a-fabric-sheet/70746>\
**Category:** Questions\
**Tags:** animation\
**Created:** [September 15, 2024, 8:11pm UTC](https://discourse.threejs.org/t/how-would-i-go-about-making-this-animation-in-three-js-i-have-something-but-it-looks-like-a-fabric-sheet/70746 "2024-09-15T20:11:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![crox](https://avatars.discourse-cdn.com/v4/letter/c/b5e925/32.png) [@crox](https://discourse.threejs.org/u/crox)\
**Post date:** [September 15, 2024, 8:11pm UTC](https://discourse.threejs.org/t/how-would-i-go-about-making-this-animation-in-three-js-i-have-something-but-it-looks-like-a-fabric-sheet/70746/1 "2024-09-15T20:11:17Z")

</div>

What I’m looking for:

 ![Screenshot 2024-09-15 at 10.13.30 AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/d/2d677baf555a49f3b4aa3e9299d74065a6ac0c05.png)

What I have:

 ![Screenshot 2024-09-15 at 10.36.15 AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/7/47014b11a57d2dbbce78b2f2c38499b2f912ffa8.png)

Current code:

```javascript
  import { useRef, useMemo } from 'react'
    import { Canvas, useFrame } from '@react-three/fiber'
    import * as THREE from 'three'
    
    function Particles({ count = 10000 }) {
      const mesh = useRef<THREE.Points>(null)
      const light = useRef<THREE.PointLight>(null)
    
      const particles = useMemo(() => {
        const temp = new Float32Array(count * 3)
        for (let i = 0; i < count; i++) {
          const i3 = i * 3
          temp[i3] = (Math.random() - 0.5) * 10
          temp[i3 + 1] = Math.random() * 5
          temp[i3 + 2] = (Math.random() - 0.5) * 10
        }
        return temp
      }, [count])
    
      useFrame((state) => {
        const time = state.clock.getElapsedTime()
        if (mesh.current) {
          for (let i = 0; i < count; i++) {
            const i3 = i * 3
            mesh.current.geometry.attributes.position.array[i3 + 1] =
              Math.sin(
                (mesh.current.geometry.attributes.position.array[i3] + time) * 0.5
              ) *
                2 +
              Math.sin(
                (mesh.current.geometry.attributes.position.array[i3 + 2] + time) *
                  0.5
              ) *
                2
          }
          mesh.current.geometry.attributes.position.needsUpdate = true
        }
        if (light.current) {
          light.current.position.x = Math.sin(time * 0.7) * 3
          light.current.position.y = Math.cos(time * 0.5) * 4
          light.current.position.z = Math.cos(time * 0.3) * 3
        }
      })
    
      return (
        <>
          <pointLight ref={light} distance={40} intensity={8} color='white' />
          <points ref={mesh}>
            <bufferGeometry>
              <bufferAttribute
                attach='attributes-position'
                count={particles.length / 3}
                array={particles}
                itemSize={3}
              />
            </bufferGeometry>
            <pointsMaterial size={0.05} color='white' />
          </points>
        </>
      )
    }
    
    export default function WaveParticle3D() {
      return (
        <div className='w-full h-screen'>
          <Canvas camera={{ position: [0, 0, 10], fov: 75 }}>
            <color attach='background' args={['black']} />
            <Particles />
          </Canvas>
        </div>
      )
    }

```

This has me stumped since I’ve never really used Three.js before… any tips?

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [September 15, 2024, 11:04pm UTC](https://discourse.threejs.org/t/how-would-i-go-about-making-this-animation-in-three-js-i-have-something-but-it-looks-like-a-fabric-sheet/70746/2 "2024-09-15T23:04:26Z")

</div>

Out of curiosity, how did you already achieve what you’re looking for…  
[![](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/d/2d677baf555a49f3b4aa3e9299d74065a6ac0c05.png) ](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/d/2d677baf555a49f3b4aa3e9299d74065a6ac0c05.png)  
Is that not the way to achieve what you’re looking for?