Three.js Multiple Objects - Threejs Typing CST Test
Loading…
Three.js Multiple Objects — Threejs Code
Renders multiple cubes in the scene with different colors.
# threejs/demo/multiple_cubes.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') });
renderer.setSize(window.innerWidth, window.innerHeight);
const colors = [0xff0000, 0x00ff00, 0x0000ff];
for(let i=0;i<3;i++){
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: colors[i] });
const cube = new THREE.Mesh(geometry, material);
cube.position.x = (i-1)*2;
scene.add(cube);
}
camera.position.z = 5;
renderer.render(scene, camera);Threejs Language Guide
Three.js is a popular open-source 3D JavaScript library that simplifies creating, displaying, and animating 3D graphics in web browsers using WebGL. It provides abstractions for cameras, lights, materials, geometries, and scene management, making 3D web development accessible and efficient.
Primary Use Cases
- ▸Interactive 3D websites and apps
- ▸Product visualization and configurators
- ▸Web-based games using WebGL
- ▸AR/VR experiences via WebXR
- ▸Scientific and architectural visualizations
Notable Features
- ▸Cross-browser WebGL abstraction
- ▸Extensive geometry and material library
- ▸Animation and keyframe system
- ▸Post-processing effects
- ▸Integration with physics and audio libraries
Origin & Creator
Three.js was created by Ricardo Cabello (mr.doob) in 2010 and has since evolved with contributions from a global community of developers.
Industrial Note
Three.js is widely used in web-based games, AR/VR, data visualization, product configurators, architectural walkthroughs, and interactive marketing websites, providing powerful 3D experiences without requiring native apps.