gltfloader加载模型后看不见或发黑，主因是缺光源、缩放失当、相机位置不准；需加环境光、归一化缩放、校正位置与朝向，并配dracoloader解压压缩模型。
直接用 model-viewer 最省事，但如果你需要自定义控制、动画或与页面逻辑深度联动，Three.js 是唯一靠谱的选择——HTML5 本身不认 3D 模型，所有渲染都得靠 JavaScript 驱动。
为什么 GLTFLoader 加载后模型看不见或黑乎乎
不是模型坏了，是缺三样东西：光源、正确缩放、相机位置。glTF 模型自带 PBR 材质，没光就是纯黑；导出单位（厘米/米）和 Three.js 的“无单位”坐标系不匹配，会导致模型小到看不见或大到卡死。
-
THREE.AmbientLight(0xffffff, 0.5)必加，否则 MeshStandardMaterial 全黑 - 加载成功后立刻做归一化：
gltf.scene.traverse(node => { if (node.isMesh) node.scale.set(0.1, 0.1, 0.1); })（系数按模型原始尺寸试，常见 0.01–0.5） - 调
gltf.scene.position.set(0, -1, 0)把模型“坐”到 Y=0 地面，避免悬浮或沉底 - Blender 导出常绕 Y 轴转 90°，加
gltf.scene.rotation.y = -Math.PI / 2校正朝向
WebGLRenderer 初始化失败或白屏的硬性条件
Canvas 元素必须带原生 width 和 height 属性，CSS 设置无效；移动端 iOS Safari 对 alpha 处理敏感，漏配会黑屏。
- 写死 canvas：
<canvas id="viewer" width="800" height="600"></canvas> - 初始化时启用抗锯齿：
new THREE.WebGLRenderer({ canvas, antialias: true }) - iOS 必加：
alpha: false, premultipliedAlpha: false - 响应式场景下，监听
window.resize并同步调用renderer.setSize()和camera.aspect = window.innerWidth / window.innerHeight
GLTFLoader 报 “Cannot read property 'decodeDracoFile' of undefined”
模型用了 Draco 压缩（常见于 Sketchfab 导出或 Blender 启用压缩选项），但没配 DRACOLoader。这不是可选项，是解压刚需。
- 引入顺序不能错：先
three.min.js，再DRACOLoader.js，最后GLTFLoader.js - 必须手动设置解码器路径：
dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.1/examples/jsm/libs/draco/gltf/') - 然后传给 GLTFLoader：
gltfLoader.setDRACOLoader(dracoLoader) - 不配就只能拒收 .glb 文件里带 Draco 的模型，强行加载会静默失败或报这个错
鼠标拖拽旋转模型却卡顿或失灵
默认没交互逻辑，得自己加射线检测或用 OrbitControls。后者更稳，但要注意控制器绑定时机和更新节奏。
- 引入：
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; - 初始化后立即创建：
const controls = new OrbitControls(camera, renderer.domElement); - 必须在动画循环里调
controls.update()，否则拖拽无反馈 - 如果模型加了
scene.add(gltf.scene)后再初始化 controls，要确保gltf.scene已加入 scene，否则轨道中心偏移 - 禁用双击缩放：
controls.enableZoom = false（如需保持固定距离）
真正麻烦的从来不是加载模型，而是模型导出时的单位、轴向、材质打包方式——这些信息不会随 .glb 文件一起传过来，得靠经验预判并现场调试。每次换新模型，都要重走一遍缩放、光照、朝向校验流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
