Learn Threejs-animation - 8 Code Examples & CST Typing Practice Test

Three.js Animation System is a powerful, flexible framework for keyframe-based animations of 3D objects, cameras, materials, and morph targets. It uses AnimationMixer, AnimationClips, and KeyframeTracks to animate properties over time with smooth interpolation and precise timeline control.

View all 8 Threejs-animation code examples →

Simple Rotating Cube Bouncing Sphere Rotating Torus Color Changing Cube Multiple Spinning Cubes Rotating Cone Pulsing Sphere Orbiting Cube

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 →

Frequently Asked Questions about Threejs-animation

What is Threejs-animation?

What are the primary use cases for Threejs-animation?

Object and camera animations. GLTF character and skeletal animations. Morph target and facial animations. Scene transitions and cinematic sequences. 3D product demos and interactive experiences

What are the strengths of Threejs-animation?

Highly flexible keyframe-based system. Works seamlessly with GLTF pipelines. Supports blending multiple animations smoothly. Great for complex interactive scenes. Lightweight and efficient for WebGL

What are the limitations of Threejs-animation?

No node-based timeline editor built-in. Requires manual sequencing for complex animations. Interpolation may require fine-tuning. Large animation data increases file size. Not an all-in-one motion engine like GSAP

How can I practice Threejs-animation typing speed?

CodeSpeedTest offers 8+ real Threejs-animation code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Threejs-animation - 8 Code Examples & CST Typing Practice Test

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 →

Frequently Asked Questions about Threejs-animation

What is Threejs-animation?

What are the primary use cases for Threejs-animation?

Object and camera animations. GLTF character and skeletal animations. Morph target and facial animations. Scene transitions and cinematic sequences. 3D product demos and interactive experiences

What are the strengths of Threejs-animation?

Highly flexible keyframe-based system. Works seamlessly with GLTF pipelines. Supports blending multiple animations smoothly. Great for complex interactive scenes. Lightweight and efficient for WebGL

What are the limitations of Threejs-animation?

How can I practice Threejs-animation typing speed?

CodeSpeedTest offers 8+ real Threejs-animation code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.