★ ★ ★ ★ ★

Three.js：如何创建一个最基本的 3D 场景？

⚡ 速记答案（30 秒）

场景Scene + 相机PerspectiveCamera + 渲染器WebGLRenderer + 光源Light + 几何体Geometry+材质Material=网格Mesh + requestAnimationFrame动画循环。

📖 详细讲解

标准面试回答（推荐记住）

创建Three.js基本场景需要六步：第一创建场景new THREE.Scene()；第二创建透视相机PerspectiveCamera设置fov、宽高比、近远裁剪面和位置；第三创建WebGLRenderer绑定到canvas并设置尺寸和像素比；第四添加光源如AmbientLight加DirectionalLight；第五创建几何体和材质组合成Mesh加入场景；第六在requestAnimationFrame循环里更新物体旋转位移并调用renderer.render(scene, camera)。

核心对象关系

Scene（场景容器）
├── Light（光源）
├── Mesh（网格 = Geometry + Material）
└── Camera（相机）
        ↓
    Renderer（渲染器）→ Canvas

✅ 面试要点

•掌握Scene、Camera、Renderer三大核心
•理解Mesh = Geometry + Material
•知道动画循环的标准写法

💻 代码示例

🎮 Three.jsThree.js 基础场景（可运行）

// Three.js 基础场景 - 旋转立方体
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1e293b);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

// 立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ 
  color: 0x3b82f6,
  metalness: 0.3,
  roughness: 0.4
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

🎨 效果预览WebGL