🧱 THREE.js Lesson: Meshes, Geometry & Materials

Meshes are the visible shapes in your 3D scene. They combine geometry (the shape) and material (how it looks).

📦 Code Sample

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth * 0.9, 400);

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0xff66cc, roughness: 0.5 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

const light = new THREE.PointLight(0xffffff, 1);
light.position.set(3, 3, 3);
scene.add(light);

camera.position.z = 4;

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

animate();

🎮 Live Preview

💡 Pro Tip: Try swapping SphereGeometry with BoxGeometry or TorusGeometry to see different shapes.

🧠 What You Learned

SphereGeometry() creates a round ball shape.
MeshStandardMaterial() responds to lighting for realism.
Mesh() combines geometry and material into a renderable object.
PointLight adds a glowing light source.
rotation.y makes the object spin on its vertical axis.