Rotating Cube
Simple rotating cube starter showcasing a basic scene, camera and lighting.
What this code does
- Scene: a container holding all 3D objects.
- Camera: perspective camera with fov 75, near 0.1, far 1000.
- Renderer: WebGLRenderer draws the scene to a canvas at each frame.
- Mesh: BoxGeometry + MeshStandardMaterial creates the cube.
- Light: Directional light adds shading so faces are visible.
- Animation: requestAnimationFrame updates rotation and re-renders.
JavaScript (plain)
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.z = 3
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)
document.querySelector('#app').appendChild(renderer.domElement)
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshStandardMaterial({ color: 0x00aaff })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(2, 2, 2)
scene.add(light)