🌐 THREE.js Lesson: Create Your First 3D Scene

Let's create a basic 3D scene using THREE.js with a cube and lighting.

📦 Code Sample

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setClearColor(0xffffff);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ffcc });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 5);
scene.add(light);

camera.position.z = 5;

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

🎮 Live Preview

💡 Pro Tip: This version uses the UMD build of THREE.js, which works in any browser without ES Modules.

🧠 What You Learned

Scene() creates the 3D world.
PerspectiveCamera() defines how things are viewed.
WebGLRenderer() draws the scene in your browser.
BoxGeometry & MeshStandardMaterial make up the cube.
DirectionalLight adds realistic light.
requestAnimationFrame() keeps your animation running smoothly.