---
title: "Animating 3D Objects in Three.js (Beginner Guide 03)"
description: "Learn how to animate 3D objects in Three.js and bring your creations to life using JavaScript. Follow this guide for step-by-step instructions and tips."
author: "Tajammal Maqbool"
last_updated: "2023-04-10"
---

# Animating 3D Objects in Three.js (Beginner Guide 03)

> Learn how to animate 3D objects in Three.js and bring your creations to life using JavaScript. Follow this guide for step-by-step instructions and tips.

**Author:** Tajammal Maqbool  
**Published:** April 10, 2023  
**Tags:** three.js, web development

[Animations](https://threejs.org/examples/?q=animation#misc_animation_keys) can bring your Three.js scenes to life. In this blog, we'll explore how to animate 3D objects in a Three.js scene.

## Creating an Animation Loop
In Three.js, the most common way to create animations is through an animation loop. An animation loop is a function that updates the scene and then re-renders it. This function is called repeatedly, creating the illusion of movement.

```js
// Create an animation loop
function animate() {
    requestAnimationFrame(animate);

    // Rotate the cube
    cube.rotation.x += 0.01;
    cube.rotation.x += 0.01;

    // Render the scene
    renderer.render(scene, camera);
}

animate();
```
This code will create a cube that rotates about the x and y axes.

## Full Code
Check below how the full code will look like:

```js
import './style.css'
import * as THREE from 'three';

// Initialize Three.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(2, 2, 4);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a geometry
let geometry = new THREE.BoxGeometry(1, 1, 1);

// Create a material
let material = new THREE.MeshBasicMaterial({ color: 0xf2f2 });

// Create a mesh
let cube = new THREE.Mesh(geometry, material);

// Add the cube to the scene
scene.add(cube);

// Create an ambient light
let ambientLight = new THREE.AmbientLight(0xfffff, 5);

// Add the light to the scene
scene.add(ambientLight);

// Create a grid helper with size 10 and divisions 10
let gridHelper = new THREE.GridHelper(10, 10);

// Add the grid helper to the scene
scene.add(gridHelper);

// Create an axes helper with size 5
let axesHelper = new THREE.AxesHelper(5);

// Add the axes helper to the scene
scene.add(axesHelper);

// Create an animation loop
function animate() {
    requestAnimationFrame(animate);

    // Rotate the cube
    cube.rotation.x += 0.01;
    cube.rotation.x += 0.01;

    // Render the scene
    renderer.render(scene, camera);
}

animate();
```

## Conclusion
In this blog, we learned how to animate 3D objects in a Three.js scene. Animation is a powerful tool that can greatly enhance your 3D scenes. If you have any questions, don't hesitate to reach out.

> Follow and Support me on [Medium](https://medium.com/@tajammalmaqbool11) and [Patreon](https://www.patreon.com/TajammalMaqbool). Clap and Comment on Medium Posts if you find this helpful for you. Thanks for reading it!!!

---

## Related Articles

- [Learn addEventListener and removeEventListener in JavaScript](https://tajammalmaqbool.com/pages/blogs/addeventlistener-and-removeeventlistener-in-javascript.md)
- [JavaScript Limit Map to 50 Items – Optimize Performance](https://tajammalmaqbool.com/pages/blogs/javascript-limit-map-to-50-items-optimize-operformance.md)
- [Basic Data Structures in Javascript](https://tajammalmaqbool.com/pages/blogs/basic-data-structures-in-javascript.md)
- [Fibonacci Series in JavaScript](https://tajammalmaqbool.com/pages/blogs/fibonacci-series-in-javascript.md)
- [Javascript Double Question Mark (??) - A Guide](https://tajammalmaqbool.com/pages/blogs/javascript-double-question-mark-a-guide.md)

## Sitemap

See the full [sitemap](https://tajammalmaqbool.com/sitemap.md) for all pages.