Three.js加载自定义GLTF 3D模型浏览器无渲染问题求助

• 变量名拼写错误
  你代码中定义的场景变量名为dnaScene（S大写），但在加载模型的回调中写的是dnascene.add(gltf.scene)（s小写），JavaScript变量名大小写敏感，这会导致模型根本没有被添加到场景中，直接改成dnaScene.add(gltf.scene)即可修复。
• resize事件监听逻辑错误
  resize事件只能绑定在window对象上，DOM元素本身不触发resize事件。同时修改相机的aspect属性后必须调用camera.updateProjectionMatrix()才能让修改生效，对应代码修改为：

window.addEventListener('resize', () => {
  renderer.setSize(dnaContainer.clientWidth, dnaContainer.clientHeight)
  camera.aspect = dnaContainer.clientWidth / dnaContainer.clientHeight
  camera.updateProjectionMatrix()
})

• 缺少模型加载错误捕获
  你当前没有添加模型加载的错误回调，无法判断是否是跨域、路径错误等问题导致的模型加载失败，修改加载代码，添加错误处理：

dnaLoader.load('dna.gltf', function(gltf) {
  dna = gltf.scene
  dnaScene.add(gltf.scene)
  // 可选：打印模型尺寸确认是否需要调整缩放或相机位置
  const box = new THREE.Box3().setFromObject(dna)
  console.log('模型尺寸：', box.getSize(new THREE.Vector3()))
}, undefined, function (error) {
  console.error('模型加载失败：', error)
})

• 本地运行跨域限制问题
  不要直接双击打开本地HTML文件运行，浏览器的同源策略会禁止加载本地gltf资源，必须使用本地静态服务器运行，比如用VS Code的Live Server插件，或者用python -m http.server在项目目录下启动临时服务器后访问。
• 可选适配优化
  如果加载成功后还是看不到模型，大概率是模型尺寸和相机位置不匹配：要么是模型尺寸太大超出相机远裁剪面，要么是尺寸太小在近裁剪面外，根据上面打印的模型尺寸调整camera.position.z的数值，或者给模型设置统一缩放即可，比如dna.scale.set(0.1,0.1,0.1)。

内容的提问来源于stack exchange，提问作者Sheldon Ikin