Introduction
In this tutorial, you'll learn how to create a basic 3D scene using Three.js, a popular JavaScript library for 3D graphics in web browsers. This is the kind of technology that companies like Apple and OpenAI are investing heavily in for their future devices. We'll start from scratch and build a simple interactive 3D scene that you can expand upon.
Prerequisites
To follow along with this tutorial, you'll need:
- A web browser (Chrome, Firefox, or Edge work best)
- A text editor (like VS Code, Sublime Text, or even Notepad)
- Basic understanding of HTML and JavaScript
- Internet connection to download required files
Step-by-Step Instructions
1. Create the HTML Structure
First, we need to set up the basic HTML file that will contain our 3D scene. This file will include the necessary Three.js library and create a canvas element where our 3D graphics will be rendered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Scene with Three.js</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>Why this step? The HTML structure sets up the foundation for our 3D application. The body is set to have no margins and overflow hidden to ensure the 3D scene fills the entire browser window. We include the Three.js library from a CDN (Content Delivery Network) so we can use its functions, and we link to our own JavaScript file where we'll write our 3D code.
2. Create the JavaScript File
Now we need to create a JavaScript file called script.js in the same folder as our HTML file. This file will contain all our 3D rendering logic.
function init() {
// Scene setup
const scene = new THREE.Scene();
// Camera setup
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Renderer setup
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a cube
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Rotate the cube
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
}
// Initialize when the page loads
window.onload = init;Why this step? This JavaScript code creates our entire 3D scene. We create a scene object (like a container for everything), a camera (which determines what we see), and a renderer (which draws everything to the screen). We also create a simple green cube and make it rotate continuously. The requestAnimationFrame function creates a smooth animation loop.
3. Add Window Resizing
Our 3D scene should resize when the browser window changes size. Let's add this functionality to our JavaScript:
function init() {
// ... previous code ...
// Handle window resize
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// ... rest of the code ...
}Why this step? When users resize their browser window, we want our 3D scene to automatically adjust to fill the new space. Without this code, the scene would look distorted when the window size changes.
4. Test Your Scene
Save both your HTML and JavaScript files, then open the HTML file in your web browser. You should see a rotating green cube in the center of your screen. This simple example demonstrates how Three.js creates interactive 3D graphics that can be used in web applications.
Why this step? Testing ensures everything is working correctly. The rotating cube is a basic but important demonstration of how Three.js handles 3D transformations and rendering.
5. Experiment with Different Shapes
Let's modify our code to create a more interesting scene with multiple shapes:
// Replace the cube creation code with this:
// Create multiple shapes
const geometries = [
new THREE.BoxGeometry(1, 1, 1),
new THREE.SphereGeometry(0.5, 32, 32),
new THREE.ConeGeometry(0.5, 1, 32)
];
const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // red
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // blue
new THREE.MeshBasicMaterial({ color: 0xffff00 }) // yellow
];
const shapes = [];
for (let i = 0; i < 3; i++) {
const shape = new THREE.Mesh(geometries[i], materials[i]);
shape.position.x = (i - 1) * 2;
scene.add(shape);
shapes.push(shape);
}
// Update animation loop to rotate all shapes
function animate() {
requestAnimationFrame(animate);
shapes.forEach((shape, index) => {
shape.rotation.x += 0.01;
shape.rotation.y += 0.01;
shape.position.y = Math.sin(Date.now() * 0.001 + index) * 0.5;
});
renderer.render(scene, camera);
}Why this step? This enhancement shows how to work with multiple 3D objects and different shapes. It demonstrates how Three.js handles different geometric forms and how to animate them together.
Summary
In this tutorial, you've learned how to create a basic 3D scene using Three.js. You've built a foundation that includes setting up the HTML structure, creating a 3D scene with a camera and renderer, adding 3D objects, and implementing animation. This is the kind of technology that companies like Apple and OpenAI are investing in to create new immersive experiences for users. As these companies compete for talent and innovation, understanding these fundamental web technologies becomes increasingly important for developers who want to work on cutting-edge hardware and software solutions.
From this basic foundation, you can explore more advanced features like lighting, textures, shadows, and interaction with user input to create more complex and engaging 3D experiences.
