HTML5本身不支持直接导入3D模型，需借助Three.js等JS库通过WebGL加载glTF（推荐.glb）、OBJ+MTL等格式，并注意跨域、路径、材质规范及导出设置。
HTML5 本身不提供直接导入 3D 模型的能力——它只是网页标准，真正干活的是 JavaScript 和 WebGL（或 WebGPU）库，比如 Three.js、Babylon.js 或原生 WebGL。所谓“HTML5建模导入”，实际是用 JS 库加载常见 3D 格式文件，并在 Canvas 上渲染。
Three.js 怎么导入 glTF 模型（推荐首选）
glTF（尤其是 .glb 二进制格式）是目前 Web 端最稳定、压缩率高、支持动画/材质/骨骼的格式。Three.js 官方推荐且内置 GLTFLoader，但需单独引入：
-
GLTFLoader不在three.min.js主包里，必须额外加载examples/jsm/loaders/GLTFLoader.js - 模型路径必须可被浏览器跨域访问（本地双击 HTML 会因
file://协议触发 CORS，需起本地服务） - 加载成功后，模型是
gltf.scene，需手动add()到场景；动画需调用gltf.animations配合AnimationMixer
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load(
'model.glb',
(gltf) => {
scene.add(gltf.scene);
// 若有动画
mixer = new THREE.AnimationMixer(gltf.scene);
gltf.animations.forEach(clip => mixer.clipAction(clip).play());
},
undefined,
(error) => console.error('加载失败:', error)
);
为什么 OBJ + MTL 组合导入容易出问题
OBJ 是纯几何体文本格式，材质全靠配套的 MTL 文件描述，浏览器加载时默认并发请求，但 MTL 中引用的贴图路径（如 map_Kd texture.jpg）常为相对路径，极易 404；且 OBJLoader 不解析法线贴图、PBR 材质等现代特性。
- 必须确保
MTL文件和所有贴图与 HTML 同域，且路径可被正确解析（建议用完整相对路径，如./textures/rock.jpg） -
OBJLoader和MTLLoader需按顺序使用：先加载 MTL，再传给 OBJLoader - OBJ 不含动画、骨骼、光照信息，仅适合静态低模展示
本地拖拽导入模型（File API + glTF 解析）
用户想直接拖一个 .glb 到网页里预览？得靠 FileReader + GLTFLoader.parse()（注意不是 load()）：
立即学习“前端免费学习笔记（深入）”；
-
parse()接收ArrayBuffer，需用FileReader.readAsArrayBuffer(file) - 不能直接传
File对象，也不能用URL.createObjectURL(file)再走网络加载（会绕过 CORS 但触发同源策略限制） - 拖入大模型（>20MB）可能卡顿，建议加 loading 提示并限制文件大小
inputElement.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file || !file.name.endsWith('.glb')) return;
const reader = new FileReader();
reader.onload = (event) => {
const arrayBuffer = event.target.result;
loader.parse(arrayBuffer, '', (gltf) => {
scene.clear(); // 清旧模型
scene.add(gltf.scene);
});
};
reader.readAsArrayBuffer(file);
});
导出为 glTF 的关键注意事项
从 Blender / Maya 导出能被 Three.js 正确读取的 .glb，不是点“导出”就完事：
- Blender 中启用
glTF 2.0插件（2.8+ 默认启用），导出时勾选Export as Binary (.glb) - 禁用
Apply Modifiers可能导致细分曲面丢失；启用Include > Selected Objects避免导出隐藏物体 - 材质必须用
Principled BSDF节点，贴图连到对应输入口（Base Color、Normal、Occlusion 等），否则导出后变灰或无纹理 - 动画导出前，确保时间轴在动作范围内，且
Export Animation已勾选
真正麻烦的从来不是“怎么写代码加载”，而是模型制作端的规范性——贴图路径错一位、法线没翻转、坐标系没统一，都会让前端白忙半小时。
