Creating Interactive 3D Scenes with Three.js: A Beginner’s Guide

© Amjad Rehman A

Have you ever marvelled at the stunning 3D graphics and interactive experiences on the web and wondered how they were created? The answer lies in Three.js, a powerful JavaScript library that makes it accessible for developers and designers to bring their imagination to life in the browser. In this beginner’s guide, we will explore the basics of Three.js and learn how to create an interactive 3D scene with a rotating cube.

Why Three.js?

Three.js is a popular library that simplifies the process of creating 3D graphics and animations on the web. It harnesses the power of WebGL, a web standard that allows for hardware-accelerated rendering of 2D and 3D graphics, to deliver impressive visual experiences. With Three.js, you can create stunning visualizations, games, product configurators, virtual tours, and much more, all within the browser environment.

Building a Three.js scene is like directing a film: you set up the environment, define the scene’s elements, add lighting and effects, animate the action, and engage the audience with interactivity, resulting in a captivating 3D experience that unfolds right in the browser.

Basic Steps for Filming a Scene ©Amjad Rehman A

Getting Started

To begin our journey with Three.js, we’ll set up our development environment. We’ll include the Three.js library in our HTML file and create a canvas element to display our 3D scene. Additionally, we’ll set up the necessary components, such as the scene, camera, and renderer, to get everything up and running.

Here’s a simple step-by-step tutorial to get you started with Three.js:

Example: Create an Interactive 3D Scene with a Rotating Cube!

Step 1: Set up the Environment

Create a new HTML file and include the Three.js library by adding the following script tag in the head section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

Step 2: Create a Scene

In the body section of your HTML file, add a div element with an id to serve as the container for your Three.js scene:

<div id="canvas"></div>

Step 3: Initialize the Scene

In a JavaScript file, create a new instance of the Scene class and store it in a variable:

const scene = new THREE.Scene();

Step 4: Set up the Camera

Create a perspective camera and position it to your desired viewpoint:

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

Step 5: Add Light

Add light to the scene:

const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

Step 6: Create a Renderer

Create a renderer object and attach it to the container div:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas').appendChild(renderer.domElement);

Step 7: Add Geometry

Create a geometry, such as a cube or a sphere:

const geometry = new THREE.BoxGeometry(1, 1, 1);

Step 8: Add Material

Create a material for the geometry, specifying its colour and properties:

const material = new THREE.MeshBasicMaterial({ color: 0xffffff });

Step 9: Create a Mesh

Combine the geometry and material to create a mesh object:

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Step 10: Render the Scene

Create a render function to update and display the scene:

function render() {
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
render();

Step 11: Test it Out

Open your HTML file in a web browser, and you should see a rotating cube rendered with Three.js!

© Amjad Rehman A

❗️❗️By wrapping the code within window.onload, it ensures that the JavaScript code is executed only after the DOM has finished loading, ensuring that the canvas div is available before appending the renderer's DOM element. This is just a basic introduction to get you started with Three.js. As you progress, you can explore more advanced features and create more complex scenes using additional geometries, materials, lighting, and textures.

This is just a basic introduction to get you started with Three.js. As you progress, you can explore more advanced features and create more complex scenes using additional geometries, materials, lighting, and textures.

Happy coding!

GitHub Link: ThreeJs Repo and Demo