引入Three.js及对应加载器，2. 创建HTML容器挂载3D场景，3. 使用GLTFLoader或OBJLoader加载模型，4. 添加光照与OrbitControls交互，5. 通过WebGLRenderer渲染；需部署在HTTP服务器上以避免跨域问题。
要在HTML中载入并渲染3D模型（如GLTF或OBJ格式），通常需要借助JavaScript 3D库，最常用的是 Three.js。它支持多种3D格式的加载、场景构建和WebGL渲染。下面介绍如何在HTML页面中实现GLTF和OBJ模型的载入与显示。
1. 引入Three.js库
Three.js 是一个强大的WebGL封装库，能轻松处理3D渲染。你可以通过CDN快速引入：
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>对于GLTF模型，还需要GLTF加载器：
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/examples/js/loaders/GLTFLoader.js"></script>对于OBJ模型，需要OBJ加载器和MTL材质文件加载器（如果带材质）：
立即学习“前端免费学习笔记（深入）”；
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/examples/js/loaders/OBJLoader.js"></script><script src="https://cdn.jsdelivr.net/npm/three@0.152.2/examples/js/loaders/MTLLoader.js"></script>
2. 创建基本HTML结构
创建一个容器用于显示3D场景：
<div style="width: 100%; height: 500px;" id="3d-container"></div>这个 div 将作为Three.js渲染器的挂载点。
3. 载入GLTF模型
使用 GLTFLoader 加载 .gltf 或 .glb 模型：
const container = document.getElementById('3d-container');const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
const loader = new THREE.GLTFLoader();
loader.load(
'models/model.gltf', // 替换为你的GLTF路径
function (gltf) {
scene.add(gltf.scene);
},
function (progress) {
console.log('Loading model:', (progress.loaded / progress.total * 100) + '%');
},
function (error) {
console.error('Error loading GLTF model', error);
}
);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
4. 载入OBJ模型（带材质）
若模型是OBJ格式且包含MTL材质文件，需先加载材质，再加载模型：
const mtlLoader = new THREE.MTLLoader();mtlLoader.load('models/model.mtl', function (materials) {
materials.preload();
const objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('models/model.obj', function (object) {
scene.add(object);
});
});
确保OBJ和MTL文件路径正确，并托管在服务器上（本地文件需运行HTTP服务）。
5. 添加基础光照和交互（可选）
为了让模型更清晰，添加环境光和点光源：
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
启用轨道控制以支持鼠标旋转缩放：
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/examples/js/controls/OrbitControls.js"></script>const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();
基本上就这些。只要配置好路径、引入对应加载器，就能在网页中展示3D模型。注意：浏览器安全策略要求使用HTTP服务器访问文件，直接打开本地HTML可能无法加载模型。
