当前位置：首页 > 文章列表 > 文章 > 前端 > Three.js实现3D模型查看器教程

Three.js实现3D模型查看器教程

2025-10-14 15:06:31 0浏览收藏

1. 引入 Three.js 并搭建基础场景

Three.js 提供了场景、相机、渲染器等基本对象，是构建3D查看器的第一步。

从官网或 CDN 引入 Three.js：
创建场景（Scene）、透视相机（PerspectiveCamera）和 WebGL 渲染器（WebGLRenderer）
将渲染器的 DOM 元素（canvas）插入页面

示例代码：

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

2. 加载3D模型文件

常见的3D模型格式有 glTF、OBJ、FBX 等。glTF 是目前Web端推荐的标准格式。

使用 GLTFLoader 加载 .glb 或 .gltf 模型
确保引入对应的加载器模块（如 GLTFLoader.js）
将加载后的模型添加到场景中

示例代码：

const loader = new THREE.GLTFLoader();
loader.load('path/to/model.glb', (gltf) => {
  scene.add(gltf.scene);
}, undefined, (error) => {
  console.error('加载失败', error);
});

3. 添加灯光和相机控制

为了让模型可见且可交互，需要设置光源并启用鼠标操作。

添加环境光（AmbientLight）和方向光（DirectionalLight）避免模型全黑
使用 OrbitControls 实现鼠标旋转、缩放、平移模型

示例代码：

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

// 启用轨道控制
const controls = new THREE.OrbitControls(camera, renderer.domElement);

4. 动画循环与响应式适配

持续渲染场景，并在窗口大小变化时调整画布尺寸。

使用 requestAnimationFrame 实现渲染循环
监听 window.resize 事件，动态更新相机和渲染器

示例代码：

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新控制器
  renderer.render(scene, camera);
}
animate();

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

基本上就这些。通过 Three.js 搭建场景、加载模型、添加光照与控制，就能实现一个功能完整的JavaScript 3D模型查看器。不复杂但容易忽略细节，比如路径正确、CORS权限、模型缩放位置调整等。后续可扩展支持多种格式、动画播放、材质替换等功能。

到这里，我们也就讲完了《Three.js实现3D模型查看器教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！