javascript的3D建模怎么做_如何用Three.js创建场景-js教程-PHP中文网

javascript的3D建模怎么做_如何用Three.js创建场景

夜晨

发布： 2025-12-19 22:53:26

原创

411人浏览过

Three.js 是主流 Web 3D 库，通过 Scene、Camera、Renderer 三要素搭建场景，用几何体+材质+网格创建物体，支持 glTF 模型加载与 OrbitControls 交互动画。

javascript的3d建模怎么做_如何用three.js创建场景

用 JavaScript 做 3D 建模，通常不是从零手写几何体顶点，而是借助成熟库（如 Three.js）加载模型、构建场景、控制渲染。Three.js 是目前最主流的 Web 3D 库，它封装了 WebGL 的复杂性，让你用简洁的 JS 代码创建交互式 3D 场景。

基础场景搭建：相机、渲染器、场景三要素

每个 Three.js 项目都离不开三个核心对象：

Scene（场景）：所有 3D 对象的容器，相当于一个空舞台
Camera（相机）：决定“谁在看”和“怎么看”，常用 PerspectiveCamera（透视相机）
Renderer（渲染器）：把场景和相机的内容画到 HTML 的 <canvas></canvas> 上，一般用 WebGLRenderer

初始化示例：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

登录后复制

添加 3D 物体：几何体 + 材质 + 网格

Three.js 中的物体由三部分组成：几何体（shape）、材质（appearance）、网格（mesh，即两者的组合）。

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

几何体：如 BoxGeometry、SphereGeometry、CylinderGeometry，定义顶点和面
材质：如 MeshBasicMaterial（无光照）、MeshStandardMaterial（支持 PBR 光照）
网格：new THREE.Mesh(geometry, material)，是可添加进场景的实际对象

例如创建一个旋转的立方体：

吐司AI

超多功能的免费在线生图网站！拥有全网更齐全的模型库，0门槛使用！

325

查看详情

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ffcc });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光源才能看到标准材质效果
const light = new THREE.PointLight(0xffffff, 2, 100);
light.position.set(5, 5, 5);
scene.add(light);

登录后复制

加载外部 3D 模型（如 glTF）

实际项目中，精细模型通常由 Blender、Maya 等工具导出为 .glb 或 .gltf 格式（推荐 glTF，Web 标准）。Three.js 官方推荐使用 GLTFLoader 加载：

需单独引入：import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
加载后得到场景子树，可缩放、旋转、添加动画
注意：模型可能自带材质/纹理/动画，需配合 DRACOLoader（压缩）或 TextureLoader（贴图）优化

简单加载示例：

const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
  const model = gltf.scene;
  model.scale.set(0.5, 0.5, 0.5);
  scene.add(model);
}, undefined, (err) => console.error('加载失败:', err));

登录后复制

让场景动起来：动画循环与交互

Three.js 不自动重绘，需手动调用 renderer.render()。标准做法是用 requestAnimationFrame 实现平滑动画循环：

每一帧更新物体位置、旋转、缩放等属性
监听鼠标/触摸事件实现拖拽旋转（可用 OrbitControls 快速实现）
响应窗口大小变化时，同步更新相机宽高比和渲染器尺寸

基础动画循环：

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

登录后复制

启用轨道控制器（自由旋转缩放平移）：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 惯性阻尼

登录后复制

以上就是javascript的3D建模怎么做_如何用Three.js创建场景的详细内容，更多请关注php中文网其它相关文章！