Learn THREEJS-ANIMATION with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Rotating Cube

# threejs/demo/RotatingCube.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.BoxGeometry()
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)

        camera.position.z = 5

        function animate() {
        requestAnimationFrame(animate)
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

A basic Three.js example animating a rotating cube.

Let’s Try →

Bouncing Sphere

# threejs/demo/BouncingSphere.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.SphereGeometry(1, 32, 32)
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
        const sphere = new THREE.Mesh(geometry, material)
        scene.add(sphere)

        camera.position.z = 5
        let t = 0

        function animate() {
        requestAnimationFrame(animate)
        t += 0.05
        sphere.position.y = Math.sin(t) * 2
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Animates a sphere bouncing up and down using sine wave.

Let’s Try →

Rotating Torus

# threejs/demo/RotatingTorus.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100)
        const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true })
        const torus = new THREE.Mesh(geometry, material)
        scene.add(torus)

        camera.position.z = 5

        function animate() {
        requestAnimationFrame(animate)
        torus.rotation.x += 0.01
        torus.rotation.y += 0.01
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

A torus rotating along X and Y axes.

Let’s Try →

Color Changing Cube

# threejs/demo/ColorCube.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.BoxGeometry()
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)

        camera.position.z = 5
        let hue = 0

        function animate() {
        requestAnimationFrame(animate)
        hue += 0.5
        cube.material.color.setHSL((hue%360)/360, 1, 0.5)
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Cube changes its color over time using HSL.

Let’s Try →

Multiple Spinning Cubes

# threejs/demo/MultipleCubes.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const cubes = []
        for(let i=0; i<5; i++){
        const geometry = new THREE.BoxGeometry()
        const material = new THREE.MeshBasicMaterial({ color: Math.random()*0xffffff })
        const cube = new THREE.Mesh(geometry, material)
        cube.position.x = i*2 - 4
        scene.add(cube)
        cubes.push(cube)
        }

        camera.position.z = 5

        function animate() {
        requestAnimationFrame(animate)
        cubes.forEach(c => { c.rotation.x += 0.01; c.rotation.y += 0.01 })
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Spawns multiple cubes spinning independently.

Let’s Try →

Rotating Cone

# threejs/demo/RotatingCone.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.ConeGeometry(1, 2, 32)
        const material = new THREE.MeshBasicMaterial({ color: 0xff00ff })
        const cone = new THREE.Mesh(geometry, material)
        scene.add(cone)

        camera.position.z = 5

        function animate() {
        requestAnimationFrame(animate)
        cone.rotation.x += 0.02
        cone.rotation.y += 0.02
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

A simple cone rotating in 3D.

Let’s Try →

Pulsing Sphere

# threejs/demo/PulsingSphere.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.SphereGeometry(1, 32, 32)
        const material = new THREE.MeshBasicMaterial({ color: 0x00ffff })
        const sphere = new THREE.Mesh(geometry, material)
        scene.add(sphere)

        camera.position.z = 5
        let t = 0

        function animate() {
        requestAnimationFrame(animate)
        t += 0.05
        sphere.scale.set(1 + Math.sin(t), 1 + Math.sin(t), 1 + Math.sin(t))
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Sphere pulses by changing scale periodically.

Let’s Try →

Orbiting Cube

# threejs/demo/OrbitCube.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.BoxGeometry()
        const material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)

        camera.position.z = 10
        let angle = 0

        function animate() {
        requestAnimationFrame(animate)
        angle += 0.02
        cube.position.x = 5 * Math.cos(angle)
        cube.position.y = 5 * Math.sin(angle)
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Cube orbits around the scene center using circular motion.

Let’s Try →

Code Sample Descriptions

Simple Rotating Cube

# threejs/demo/RotatingCube.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.BoxGeometry()
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)

        camera.position.z = 5

        function animate() {
        requestAnimationFrame(animate)
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

A basic Three.js example animating a rotating cube.

Let’s Try →

Bouncing Sphere

# threejs/demo/BouncingSphere.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.SphereGeometry(1, 32, 32)
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
        const sphere = new THREE.Mesh(geometry, material)
        scene.add(sphere)

        camera.position.z = 5
        let t = 0

        function animate() {
        requestAnimationFrame(animate)
        t += 0.05
        sphere.position.y = Math.sin(t) * 2
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Animates a sphere bouncing up and down using sine wave.

Let’s Try →

Rotating Torus

# threejs/demo/RotatingTorus.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100)
        const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true })
        const torus = new THREE.Mesh(geometry, material)
        scene.add(torus)

        camera.position.z = 5

        function animate() {
        requestAnimationFrame(animate)
        torus.rotation.x += 0.01
        torus.rotation.y += 0.01
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

A torus rotating along X and Y axes.

Let’s Try →

Color Changing Cube

# threejs/demo/ColorCube.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.BoxGeometry()
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)

        camera.position.z = 5
        let hue = 0

        function animate() {
        requestAnimationFrame(animate)
        hue += 0.5
        cube.material.color.setHSL((hue%360)/360, 1, 0.5)
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Cube changes its color over time using HSL.

Let’s Try →

Multiple Spinning Cubes

# threejs/demo/MultipleCubes.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const cubes = []
        for(let i=0; i<5; i++){
        const geometry = new THREE.BoxGeometry()
        const material = new THREE.MeshBasicMaterial({ color: Math.random()*0xffffff })
        const cube = new THREE.Mesh(geometry, material)
        cube.position.x = i*2 - 4
        scene.add(cube)
        cubes.push(cube)
        }

        camera.position.z = 5

        function animate() {
        requestAnimationFrame(animate)
        cubes.forEach(c => { c.rotation.x += 0.01; c.rotation.y += 0.01 })
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Spawns multiple cubes spinning independently.

Let’s Try →

Rotating Cone

# threejs/demo/RotatingCone.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.ConeGeometry(1, 2, 32)
        const material = new THREE.MeshBasicMaterial({ color: 0xff00ff })
        const cone = new THREE.Mesh(geometry, material)
        scene.add(cone)

        camera.position.z = 5

        function animate() {
        requestAnimationFrame(animate)
        cone.rotation.x += 0.02
        cone.rotation.y += 0.02
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

A simple cone rotating in 3D.

Let’s Try →

Pulsing Sphere

# threejs/demo/PulsingSphere.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.SphereGeometry(1, 32, 32)
        const material = new THREE.MeshBasicMaterial({ color: 0x00ffff })
        const sphere = new THREE.Mesh(geometry, material)
        scene.add(sphere)

        camera.position.z = 5
        let t = 0

        function animate() {
        requestAnimationFrame(animate)
        t += 0.05
        sphere.scale.set(1 + Math.sin(t), 1 + Math.sin(t), 1 + Math.sin(t))
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Sphere pulses by changing scale periodically.

Let’s Try →

Orbiting Cube

# threejs/demo/OrbitCube.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
  </head>
  <body>
    <script>
        const scene = new THREE.Scene()
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        const geometry = new THREE.BoxGeometry()
        const material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
        const cube = new THREE.Mesh(geometry, material)
        scene.add(cube)

        camera.position.z = 10
        let angle = 0

        function animate() {
        requestAnimationFrame(animate)
        angle += 0.02
        cube.position.x = 5 * Math.cos(angle)
        cube.position.y = 5 * Math.sin(angle)
        renderer.render(scene, camera)
        }
        animate()
    </script>
  </body>
</html>

Cube orbits around the scene center using circular motion.

Let’s Try →