Three.js 加载 3D 模型Loading 3D Models选对格式少踩一半坑原文出处Three.js Manual – Loading 3D Models本文基于官方手册 Loading 3D Models 章节整理用通俗方式带你看懂3D 模型该用什么格式、怎么加载进来、出问题怎么排查。写在前面前面我们一直用BoxGeometry、SphereGeometry这些内置图元凑合着搭场景。但真实项目里谁还手搓模型啊你想要的明明是一个精致的角色、一台车、一座建筑——这些得靠 3D 软件Blender、Maya、C4D…做出来再加载进 three.js。可别小看加载这步。3D 模型有几百种文件格式每种用途、复杂度天差地别。官方这篇手册就给了绝大多数人该走的推荐路线以及翻车了怎么办的排查清单。这篇帮你一次记牢。一、动手前先确认一件事如果你还没跑过本地服务器建议先看官方的 Installation安装 那篇。⚠️很多看不了模型的报错根源都是文件没用服务器正确托管。模型、贴图这些资源走file://直接打开页面经常会被浏览器的安全策略拦掉。所以先起个本地服务器别双击 HTML 就完事。二、推荐格式无脑选 glTF只要条件允许首选 glTFGL Transmission Format。它的.GLB和.GLTF两个版本 three.js 都支持得很好。为什么是它因为 glTF 是专门为运行时资源传输设计的——体积小、加载快。而且它该有的都有网格meshes、材质materials、纹理textures蒙皮skins、骨架skeletons、变形目标morph targets动画animations、灯光lights、相机cameras换句话说你在 3D 软件里做好的东西它能比较完整地搬过来。去哪搞 glTF 文件现成的Sketchfab 上有大量公域public domain模型可下载。自己导出Blender、Substance Painter、Modo、Toolbag、Houdini、Cinema 4D 都支持直接导出 glTF。实在没 glTF 怎么办FBX、OBJ、COLLADA 这些也是常用且有人维护的格式可以退而求其次。三、加载几行代码的事three.js 默认只内置了少数几个 Loader比如ObjectLoader其余的得自己单独引。glTF 用的是GLTFLoader从 addons 引入import{GLTFLoader}fromthree/addons/loaders/GLTFLoader.js;引完就能往场景里加模型了constloadernewGLTFLoader();loader.load(path/to/model.glb,function(gltf){scene.add(gltf.scene);// 加载成功把模型加进场景},undefined,// 进度回调可选这里先不写function(error){console.error(error);// 加载失败打印错误});几个要点loader.load有四个参数路径、成功回调、进度回调可传undefined、错误回调。成功回调里拿到的是gltf对象真正要加的是gltf.scene。不同 Loader 语法不一样——换别的格式时记得去查那个 Loader 的文档和示例别照抄这套。四、翻车排查清单救命用你花几小时雕了个 masterpiece一加载——扭曲了变色了干脆消失了 别慌按这个顺序来看控制台打开浏览器 DevTools 的 Console看有没有报错再确认.load()里写了onError回调把错误打出来。换个软件看glTF 有现成的拖拽查看器three.js 官方查看器、Babylon.js 沙盒。如果在别处显示正常 → 大概率是 three.js 的 bug去提 issue如果哪儿都显示不了→ 那是建模软件导出的问题去找它。放大/缩小 1000 倍试试很多模型比例完全不同。万一模型巨大相机可能直接钻进模型里了自然看不见。加个光源模型可能只是藏在黑暗里。回顾下打灯那篇——没光的话MeshStandardMaterial这类材质就是一片黑。查贴图请求在 Network 面板看有没有加载失败的纹理比如路径长这样C:\Path\To\Model\texture.jpg。这是绝对路径惹的祸——改成相对路径比如images/texture.jpg。必要时用文本编辑器改一下模型文件里的路径。五、真的搞不定怎么问才有人理如果上面都试了还不行去 three.js 论坛 发帖。问得对解决才快尽量附上你的模型或一个有同样问题的简化版以及你能拿到的所有格式给足别人能复现问题的信息——最好能直接扔一个在线 demo 链接总结环节关键点格式选择首选 glTF.glb/.gltf不行再 FBX/OBJ/COLLADA前置条件用本地服务器托管文件别file://双击加载自行 import Loader如GLTFLoadergltf.scene才是要加的对象常见翻车比例太大/太小、没打光、贴图绝对路径求助姿势论坛发帖 附模型 可复现 demo记住一句模型加载的坑八成出在格式选错、文件托管、或者比例/光照——按上面清单走一遍基本都能解决。延伸阅读Installation本地服务器/安装GLTFLoader 文档glTF 官方查看器three.js 论坛 
长河君 · 2026/9/1 15:29:42 · 阅读 1.2k 【three.js教程】Three.js 加载 3D 模型（Loading 3D Models）：选对格式，少踩一半坑
Three.js 加载 3D 模型Loading 3D Models选对格式少踩一半坑原文出处Three.js Manual – Loading 3D Models本文基于官方手册 Loading 3D Models 章节整理用通俗方式带你看懂3D 模型该用什么格式、怎么加载进来、出问题怎么排查。写在前面前面我们一直用BoxGeometry、SphereGeometry这些内置图元凑合着搭场景。但真实项目里谁还手搓模型啊你想要的明明是一个精致的角色、一台车、一座建筑——这些得靠 3D 软件Blender、Maya、C4D…做出来再加载进 three.js。可别小看加载这步。3D 模型有几百种文件格式每种用途、复杂度天差地别。官方这篇手册就给了绝大多数人该走的推荐路线以及翻车了怎么办的排查清单。这篇帮你一次记牢。一、动手前先确认一件事如果你还没跑过本地服务器建议先看官方的 Installation安装 那篇。⚠️很多看不了模型的报错根源都是文件没用服务器正确托管。模型、贴图这些资源走file://直接打开页面经常会被浏览器的安全策略拦掉。所以先起个本地服务器别双击 HTML 就完事。二、推荐格式无脑选 glTF只要条件允许首选 glTFGL Transmission Format。它的.GLB和.GLTF两个版本 three.js 都支持得很好。为什么是它因为 glTF 是专门为运行时资源传输设计的——体积小、加载快。而且它该有的都有网格meshes、材质materials、纹理textures蒙皮skins、骨架skeletons、变形目标morph targets动画animations、灯光lights、相机cameras换句话说你在 3D 软件里做好的东西它能比较完整地搬过来。去哪搞 glTF 文件现成的Sketchfab 上有大量公域public domain模型可下载。自己导出Blender、Substance Painter、Modo、Toolbag、Houdini、Cinema 4D 都支持直接导出 glTF。实在没 glTF 怎么办FBX、OBJ、COLLADA 这些也是常用且有人维护的格式可以退而求其次。三、加载几行代码的事three.js 默认只内置了少数几个 Loader比如ObjectLoader其余的得自己单独引。glTF 用的是GLTFLoader从 addons 引入import{GLTFLoader}fromthree/addons/loaders/GLTFLoader.js;引完就能往场景里加模型了constloadernewGLTFLoader();loader.load(path/to/model.glb,function(gltf){scene.add(gltf.scene);// 加载成功把模型加进场景},undefined,// 进度回调可选这里先不写function(error){console.error(error);// 加载失败打印错误});几个要点loader.load有四个参数路径、成功回调、进度回调可传undefined、错误回调。成功回调里拿到的是gltf对象真正要加的是gltf.scene。不同 Loader 语法不一样——换别的格式时记得去查那个 Loader 的文档和示例别照抄这套。四、翻车排查清单救命用你花几小时雕了个 masterpiece一加载——扭曲了变色了干脆消失了 别慌按这个顺序来看控制台打开浏览器 DevTools 的 Console看有没有报错再确认.load()里写了onError回调把错误打出来。换个软件看glTF 有现成的拖拽查看器three.js 官方查看器、Babylon.js 沙盒。如果在别处显示正常 → 大概率是 three.js 的 bug去提 issue如果哪儿都显示不了→ 那是建模软件导出的问题去找它。放大/缩小 1000 倍试试很多模型比例完全不同。万一模型巨大相机可能直接钻进模型里了自然看不见。加个光源模型可能只是藏在黑暗里。回顾下打灯那篇——没光的话MeshStandardMaterial这类材质就是一片黑。查贴图请求在 Network 面板看有没有加载失败的纹理比如路径长这样C:\Path\To\Model\texture.jpg。这是绝对路径惹的祸——改成相对路径比如images/texture.jpg。必要时用文本编辑器改一下模型文件里的路径。五、真的搞不定怎么问才有人理如果上面都试了还不行去 three.js 论坛 发帖。问得对解决才快尽量附上你的模型或一个有同样问题的简化版以及你能拿到的所有格式给足别人能复现问题的信息——最好能直接扔一个在线 demo 链接总结环节关键点格式选择首选 glTF.glb/.gltf不行再 FBX/OBJ/COLLADA前置条件用本地服务器托管文件别file://双击加载自行 import Loader如GLTFLoadergltf.scene才是要加的对象常见翻车比例太大/太小、没打光、贴图绝对路径求助姿势论坛发帖 附模型 可复现 demo记住一句模型加载的坑八成出在格式选错、文件托管、或者比例/光照——按上面清单走一遍基本都能解决。延伸阅读Installation本地服务器/安装GLTFLoader 文档glTF 官方查看器three.js 论坛