使用Three.js可快速实现JavaScript 3D模型查看器：1. 创建场景、相机、渲染器；2. 用GLTFLoader加载glTF模型；3. 添加环境光与方向光，启用OrbitControls控制交互；4. 通过animate循环渲染并监听窗口resize事件适配响应式。需注意路径、CORS及模型初始位置调整。
实现一个JavaScript的3D模型查看器，核心是使用WebGL或其高级封装库来渲染3D内容。最推荐的方式是使用 Three.js，它简化了WebGL的复杂性，让开发者能快速构建交互式3D场景。
1. 引入 Three.js 并搭建基础场景
Three.js 提供了场景、相机、渲染器等基本对象，是构建3D查看器的第一步。
- 从官网或 CDN 引入 Three.js：
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script> - 创建场景（Scene）、透视相机（PerspectiveCamera）和 WebGL 渲染器（WebGLRenderer）
- 将渲染器的 DOM 元素（canvas）插入页面
示例代码：
Node.js 可靠编程
下载
Node.js 可靠编程技能。避免事件循环阻塞、异步陷阱、ESM 兼容问题和内存泄漏。触发词：Node.js 开发、async/await、流处理、性能优化、安全编码。
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端推荐的标准格式。
立即学习“Java免费学习笔记（深入）”；
- 使用 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权限、模型缩放位置调整等。后续可扩展支持多种格式、动画播放、材质替换等功能。
