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

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

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

本文详细介绍了如何使用JavaScript和Three.js库快速搭建一个交互式的3D模型查看器。通过引入Three.js，创建场景、相机和渲染器，加载GLTF格式的3D模型，并添加光源，实现模型的基本展示。文章重点讲解了使用GLTFLoader加载模型、添加环境光和方向光、以及启用OrbitControls实现鼠标控制交互的方法。同时，还介绍了如何通过requestAnimationFrame实现动画循环渲染，并监听窗口resize事件，实现响应式适配，确保在不同屏幕尺寸下都能获得最佳的浏览体验。掌握这些关键步骤，即可轻松构建功能完善的JavaScript 3D模型查看器，并为后续的功能扩展打下坚实基础。

使用Three.js可快速实现JavaScript 3D模型查看器：1. 创建场景、相机、渲染器；2. 用GLTFLoader加载glTF模型；3. 添加环境光与方向光，启用OrbitControls控制交互；4. 通过animate循环渲染并监听窗口resize事件适配响应式。需注意路径、CORS及模型初始位置调整。

如何实现一个JavaScript的3D模型查看器？

实现一个JavaScript的3D模型查看器，核心是使用WebGL或其高级封装库来渲染3D内容。最推荐的方式是使用 Three.js，它简化了WebGL的复杂性，让开发者能快速构建交互式3D场景。

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学习网公众号，带你了解更多关于的知识点！