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

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

紅蓮之龍

发布： 2025-12-20 08:22:03

原创

896人浏览过

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

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

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

初始化 Three.js 基础场景

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

渲染器：负责把 3D 内容画到网页的 <canvas></canvas> 上，通常用 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）。

立即学习“Java免费学习笔记（深入）”；

达奇AI论文写作

达奇AI论文辅助写作平台，在校学生、职场精英都在用的AI论文辅助写作平台

106

查看详情

几何体：定义形状，比如 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();
});

登录后复制

以上就是javascript如何实现3D图形_Three.js怎样在网页中创建场景的详细内容，更多请关注php中文网其它相关文章！