用Three.js加载glTF模型是最靠谱的起点，需引入GLTFLoader和DRACOLoader（如需Draco压缩），注意模型缩放、位置、朝向校正，配置WebGLRenderer时设canvas宽高、antialias、gammaOutput，并添加环境光与方向光。
用 Three.js 加载 glTF 模型是最靠谱的起点
HTML5 本身不支持直接嵌入 3D 模型，必须依赖 JavaScript 渲染库。Three.js 是当前兼容性好、文档全、生态成熟的首选。它原生支持 glTF（.gltf 或 .glb），这是 WebGL 场景事实上的标准格式，压缩率高、材质/动画/骨骼都封装得干净。
别碰 .obj + .mtl 组合——它没动画、没 PBR 材质、加载要手动配对，初学者极易卡在纹理路径或法线翻转上。
- 确保模型已导出为
.glb（二进制单文件，省去路径烦恼） - 引入
three.js和GLTFLoader：用官方 CDN 的https://cdn.jsdelivr.net/npm/three@0.160.1/examples/jsm/loaders/GLTFLoader.js（注意版本号匹配） -
GLTFLoader必须配合DRACOLoader才能解压带 Draco 压缩的模型，否则会报"Cannot read property 'decodeDracoFile' of undefined"
模型缩放和位置经常错位？检查 scene.add() 前的坐标归一化
很多模型导出时单位是厘米或米，而 Three.js 默认单位无意义，直接 scene.add(gltf.scene) 容易小得看不见，或大到撑满画布甚至卡死渲染。
- 加载后先用
gltf.scene.traverse遍历所有 mesh，调用mesh.scale.set(0.01, 0.01, 0.01)等比例缩放（具体系数看模型原始尺寸） - 用
gltf.scene.position.set(0, -1, 0)把模型“坐”到地面（Y=0 平面），否则可能悬浮或沉入地下 - 别忘了
gltf.scene.rotation.y = Math.PI / 2校正朝向——Blender 导出常绕 Y 轴转 90°，Unity 导出又可能不同
WebGLRenderer 初始化失败？重点查 canvas 尺寸与 antialias
常见报错如 "WebGL not available" 或白屏，往往不是浏览器问题，而是渲染器配置不当。
立即学习“前端免费学习笔记（深入）”；
-
canvas元素必须有明确宽高（CSS 设置不算数），建议写成<canvas id="viewer" width="800" height="600"></canvas> - 启用抗锯齿：
new THREE.WebGLRenderer({ canvas, antialias: true })，否则边缘毛刺严重，尤其旋转时 - 移动端必须加
alpha: false和premultipliedAlpha: false，否则 iOS Safari 可能黑屏 - 如果页面用
vh/vw响应式布局，记得监听window.resize并同步调用renderer.setSize()和camera.aspect更新
模型加载后黑乎乎？补环境光 + 相机位置是关键
glTF 模型自带 PBR 材质，但默认没有光源，MeshStandardMaterial 在纯黑环境下就是全黑，不是模型坏了。
- 至少加一盏
THREE.AmbientLight(0xffffff, 0.5)提供基础亮度 - 再加一盏
THREE.DirectionalLight模拟主光源，位置设在相机斜上方（如light.position.set(5, 5, 5)） - 相机
position.z别设太小（如 1），模型可能被裁剪；也别太大（如 1000），精度丢失导致 Z-fighting；通常5–15区间较稳 - 别漏掉
renderer.gammaOutput = true和renderer.gammaFactor = 2.2，否则 PBR 材质颜色发灰
