Creating & Animating Simple 3D Objects

Example Code & Demo

Exploring Three.js: Creating and Animating 3D Objects

Welcome to the fascinating world of Three.js! If you've ever wanted to bring your 3D ideas to life on the web, Three.js is the perfect tool for you. In this tutorial, we will guide you through the process of setting up a Three.js scene, creating a 3D cube, adding lighting and shadows, and animating the cube. By the end of this tutorial, you'll have the skills to create captivating 3D graphics and unleash your creativity in the realm of 3D programming.

Setting up the Scene

The first step in creating a Three.js scene is to set up the necessary components. We start by creating a scene, which will hold all the 3D objects we create. Next, we set up the camera, which determines the perspective and view of the scene. Finally, we create the renderer, which renders the scene onto a canvas element in the HTML document. Here's the code to set up the scene:

// Set up Three.js scene
const scene = new THREE.Scene();

// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Set up the renderer
let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ReinhardToneMapping; = 'renderer';
renderer.setClearColor(0x000000, 1); // Set background color to black = 'fixed'; = '-1'; = '0'; = '0';

// Set up the orbital controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.dampingFactor = 0.1; // Reduce camera damping for smoother movement
controls.autoRotate = true; // Make the camera rotate sinuously around the spheres

Creating and Animating a 3D Cube

Now that our scene is set up, let's create our first 3D object: a cube. We'll use Three.js's built-in geometry and material to create the cube, and then add it to the scene. To make our cube more visually appealing, we'll also add lighting and shadows. Finally, we'll animate the cube by rotating it in the render loop. Here's the code to create and animate the cube:

// Create blue cube
const geometry = new THREE.BoxGeometry(3, 3, 3);
const material = new THREE.MeshLambertMaterial({ color: 0x0000ff });
const cube = new THREE.Mesh(geometry, material);

// Create the spotlight with shadows
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10, 20, 30);
spotLight.castShadow = true;

// Add ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

// Enable shadows on the cube
scene.traverse(function (node) {
    if (node instanceof THREE.Mesh) {
        node.castShadow = true;

// Render loop
const render = function () {
    // Rotate the cube
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);



Congratulations! You've successfully learned how to create and animate 3D objects using Three.js. With this newfound knowledge, you can start building your own interactive 3D experiences and push the boundaries of web graphics. Keep exploring the vast possibilities of Three.js and let your imagination run wild in the world of 3D programming!

Recent Blog Posts & Updates

Load This GitHub Gist Code For An Instant Demo

Three.js Example Code and Projects

Three.js Example - First Person Shooter Game Starter Example

First Person Shooter Game Starter Three.js, JavaScript, HTML, CSS, AWS Web Services

Three.js Example - Programming Interactive 3D Menus

Programming Interactive 3D Menu Three.js , JavaScript, HTML, CSS, AWS Web Services

Amazon search engine and shopping portal

Amazon Search Engine and Shopping Portal Using Amazon Advertising API, JavaScript, HTML, CSS, Node.js, AWS Web Services & API Integration

threejs game multi-player spacex falcon 9 3d world

Multi-Player Threejs 3D World Educational Interactive SpaceX Falcon 9 Launch Pad Using JavaScript, HTML, CSS, AWS Web Services & API Integrations

Three.js Example - Fire Fountain Particle System

Threejs Example Fire Fountain Particle System, JavaScript, HTML, CSS & AWS Web Services

Simple Threejs Particle System Example

Threejs Simple Particle System Example Using JavaScript, HTML, CSS, AWS Web Services & API Integrations