使用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）插入页面
示例代码：
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权限、模型缩放位置调整等。后续可扩展支持多种格式、动画播放、材质替换等功能。