javascript如何实现3D图形_Three.js怎样在网页中创建场景

Three.js实现3D场景需三要素：WebGLRenderer渲染器、THREE.Scene场景、PerspectiveCamera相机；再添加几何体、材质、网格构成物体，配合环境光与方向光，并用requestAnimationFrame驱动动画及响应窗口缩放。

用 JavaScript 实现 3D 图形，最常用、最成熟的方式就是使用 Three.js —— 它封装了 WebGL 的复杂底层操作，让你能用简洁的代码快速搭建 3D 场景。

初始化 Three.js 基础场景

一个可运行的 3D 场景至少需要三样东西：渲染器（Renderer）、场景（Scene）和相机（Camera）。缺一不可。

• 渲染器：负责把 3D 内容画到网页的 上，通常用 WebGLRenderer
• 场景：所有 3D 对象（模型、灯光、相机）的容器，用 new THREE.Scene() 创建
• 相机：决定“谁在看”和“怎么看”，常用透视相机 THREE.PerspectiveCamera(fov, aspect, near, far)

示例代码片段：

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

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75, // 视野角度
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近裁剪面
  1000 // 远裁剪面
);
camera.position.z = 5;

添加几何体与材质（让场景有“东西”可看）

光有空场景不行，得加物体。Three.js 中，物体 = 几何体（Geometry） + 材质（Material） + 网格（Mesh）。

• 几何体：定义形状，比如 THREE.BoxGeometry(1, 1, 1) 创建一个边长为 1 的立方体
• 材质：定义表面外观，如 THREE.MeshBasicMaterial({ color: 0x00ff00 }) 是纯色无光照材质
• 网格：把几何体和材质组合起来，再加入场景：scene.add(new THREE.Mesh(geometry, material))

小提示：若想看到明暗变化，推荐用 MeshStandardMaterial 并搭配光源。

加入光源和动画循环

默认情况下，没有光就看不到材质细节（尤其非 Basic 材质）。基础光源推荐 THREE.AmbientLight（环境光）+ THREE.DirectionalLight（方向光）。

• 环境光提供基础亮度，避免全黑：scene.add(new THREE.AmbientLight(0xffffff, 0.5))
• 方向光模拟太阳光，有明确照射方向：const light = new THREE.DirectionalLight(0xffffff); light.position.set(2, 2, 2); scene.add(light)
• 动画靠 requestAnimationFrame 循环调用渲染，并手动旋转/移动物体：mesh.rotation.x += 0.01; mesh.rotation.y += 0.01;

响应窗口大小变化

用户缩放浏览器时，画布会拉伸变形。需监听 resize 事件并同步更新渲染器尺寸和相机宽高比：

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});