使用Three.js在HTML中无法加载GLTF/GLB模型问题求助

问题 #

尝试加载Sketchfab下载的3D模型，用Three.js实现交互点击效果。已准备好GLTFLoader.js、main.js、OrbitControls.js、three.module.js、index.html及GLTF/GLB格式模型，使用VS Code本地服务器或python -m http.server启动后，页面空白无模型显示，开发者工具无报错。试过更换不同GLTF/GLB模型、甚至基础立方体几何体，均无法正常显示。

相关代码及目录结构 #

main.js

import * as THREE from './three.module.js';
import { GLTFLoader } from './GLTFLoader.js';
import { OrbitControls } from './OrbitControls.js';

// Initialize scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add lighting
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);

// Load the brain model
const loader = new GLTFLoader();
loader.load('models/brain_model.gltf', (gltf) => {
    const brain = gltf.scene;
    scene.add(brain);
    brain.rotation.y = Math.PI; // Initial rotation
}, undefined, (error) => {
    console.error('An error happened while loading the model:', error);
});

// Set camera position
camera.position.z = 5;

// Add orbit controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

// Handle window resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Interactive Brain</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type= "/module" src="/main.js"></script>
</body>
</html>

目录结构

threejs-brain-project/
├── index.html
├── main.js
├── three.module.js
├── GLTFLoader.js
├── OrbitControls.js
└── models/
    └── brain_model.glb

解决方案 #

1. 修复HTML模块加载错误 #

HTML中<script>标签的type属性错误，导致模块无法正常加载，这是页面空白的核心原因：
原代码：

<script type= "/module" src="/main.js"></script>

修改为：

<script type="module" src="./main.js"></script>

• type属性值应为"module"而非"/module"
• src路径使用相对路径./main.js，避免服务器路径解析问题

2. 修正模型加载路径 #

代码中加载的模型路径是models/brain_model.gltf，但实际目录中模型文件是brain_model.glb，路径与文件名不匹配，修改加载代码：

loader.load('models/brain_model.glb', (gltf) => {
    // ... 原有逻辑
}, undefined, (error) => {
    console.error('An error happened while loading the model:', error);
});

3. 排查模型显示问题（加载成功但不可见） #

如果修复上述问题后仍看不到模型，可能是模型尺寸或位置超出相机视野：

• 在模型加载回调中添加尺寸打印与调整：

  loader.load('models/brain_model.glb', (gltf) => {
      const brain = gltf.scene;
      scene.add(brain);
      // 打印模型边界，确认尺寸
      const box = new THREE.Box3().setFromObject(brain);
      const center = box.getCenter(new THREE.Vector3());
      const size = box.getSize(new THREE.Vector3());
      console.log('模型中心:', center);
      console.log('模型尺寸:', size);
      
      // 将模型移至原点
      brain.position.sub(center);
      // 根据尺寸调整缩放，确保适配相机视野
      const maxDim = Math.max(size.x, size.y, size.z);
      brain.scale.multiplyScalar(5 / maxDim);
      
      brain.rotation.y = Math.PI;
  });
  

• 临时添加基础几何体测试，确认Three.js核心功能正常：
  在main.js中添加：

  // 添加测试立方体
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  

  如果能看到绿色立方体，说明Three.js环境正常，问题出在模型加载或适配。

4. 增强调试手段 #

• 给场景添加背景色，确认渲染器是否工作：

  scene.background = new THREE.Color(0xcccccc);
  

• 检查控制台是否有隐藏的警告（比如跨域、文件缺失），开启控制台的「Verbose」模式查看详细日志。

内容的提问来源于stack exchange，提问作者RuoHan Liu