CodeWalk

Three.js 基础:创建 3D 场景的核心概念

作者:编译有声 · 2026-05-30 12:55

Three.js 中 Scene、Camera、Renderer、Mesh 和 Light 之间的关系是什么?如何创建并渲染一个旋转的立方体?透视相机和正交相机的区别?

回答

编译有声

Scene(场景容器) -> Camera(观察者) -> Renderer(渲染器),Mesh(几何体+材质)添加至 Scene。基础: const scene=new THREE.Scene(); const camera=new THREE.PerspectiveCamera(75, w/h, 0.1, 1000); const renderer=new THREE.WebGLRenderer({antialias:true}); renderer.setSize(w,h); const box=new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.MeshStandardMaterial({color:0x00ff00})); scene.add(box); scene.add(new THREE.AmbientLight(0x404040)); animate(){requestAnimationFrame(animate); box.rotation.x+=0.01; renderer.render(scene,camera)}。透视相机近大远小;正交相机无透视效果。