Rendering a 3D Cube On The Web With Three.js
Learn how to create and render a 3D cube in the browser using Three.js.
Three.js is a powerful JavaScript library that makes it easy to display 3D content in the browser. Below is a live interactive 3D cube rendered with Three.js that you can rotate with your mouse.
Here's a quick overview of how to render a 3D cube using Three.js:
- Setup: First, set up your HTML file with a canvas element where the 3D scene will be rendered. Include the Three.js library in your project.
- Scene: Create a Three.js scene object, which acts as a container for all the 3D elements in your scene.
- Camera: Set up a camera to view the scene. Choose from different types of cameras like PerspectiveCamera or OrthographicCamera.
- Renderer: Create a renderer object to render the 3D scene onto the canvas. Configure the renderer with options like antialiasing and canvas size.
Complete Code Example
Copy and paste this code to create your own rotating 3D cube:
<!DOCTYPE html>
<html lang="en">
<head>
<title>3D Cube - Three.js</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script>
// Scene
const scene = new THREE.Scene();
// Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Cube
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshPhongMaterial({
color: 0x00ff88,
shininess: 100
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Lights
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(10, 10, 5);
scene.add(dirLight);
// Animation Loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
// Resize Handler
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
- Geometry: Define the geometry of the cube using Three.js. Use a BoxGeometry object with specified width, height, and depth.
- Material: Create a material to apply to the cube's surface. Choose from materials like MeshBasicMaterial, MeshPhongMaterial, or MeshLambertMaterial.
- Mesh: Combine the geometry and material to create a mesh object representing the cube. Add the mesh to the scene.
- Lights (Optional): Add lights to the scene to illuminate the cube and create realistic lighting effects.
- Animation (Optional): Animate the cube by updating its position, rotation, or scale over time using keyframes or the Three.js animation system.
- Rendering Loop: Set up a rendering loop to continuously update and render the scene, including camera and animation updates before rendering each frame.
By following these steps, you can create and render a 3D cube using Three.js, allowing you to incorporate interactive and visually engaging 3D content into your web applications.