Three.js页面3D模型加载成功但不显示问题求助

以下是针对问题的核心排查点和修复方法：

1. 本地文件跨域问题 #

直接使用本地绝对路径C:/Users/AloneWasser/Desktop/Diplom/asd/Etan.obj会被浏览器跨域安全策略阻止，网页无法直接读取本地文件系统资源。

• 修复：把模型文件放到项目目录下，改用相对路径（比如./Etan.obj，若模型和HTML同目录）；同时必须用本地开发服务器（比如VS Code的Live Server插件）运行项目，不要直接双击打开HTML文件。

2. 模型尺寸与相机视野不匹配 #

你的模型原始尺寸仅0.25左右，当前代码还在缩小它，而相机在z轴10的位置，模型过小会导致完全看不见。

• 修复：放大模型，比如把缩放改成object.scale.set(10, 10, 10)；或者拉近相机，比如camera.position.z = 3；加载模型后可强制将其定位到场景中心：object.position.set(0, 0, 0)。

3. 缺少光照导致模型不可见 #

OBJ模型默认材质是无光照的黑色材质，没有光源的话在场景中会完全黑掉。

• 修复：在代码中添加基础光照：

  // 添加环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);
  // 添加方向光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(5, 5, 5);
  scene.add(directionalLight);
  

4. 模型原点偏移 #

部分OBJ模型的原点不在几何中心，导致模型不在相机视野范围内。

• 修复：计算模型边界并居中：

  const box = new THREE.Box3().setFromObject(object);
  const center = box.getCenter(new THREE.Vector3());
  object.position.sub(center); // 将模型移到场景原点
  

修正后的完整代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  // 创建场景和相机
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  // 创建渲染器
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 获取容器并添加渲染器
  var container = document.getElementById("model-container");
  if (container) {
    container.appendChild(renderer.domElement);
  }

  // 添加光照
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(5, 5, 5);
  scene.add(directionalLight);

  // 创建模型加载器
  var loader = new THREE.OBJLoader();

  // 加载模型（改用相对路径，确保模型在项目目录下）
  loader.load('./Etan.obj', function (object) {
    // 放大模型
    object.scale.set(10, 10, 10);
    // 将模型居中
    const box = new THREE.Box3().setFromObject(object);
    const center = box.getCenter(new THREE.Vector3());
    object.position.sub(center);
    // 添加到场景
    scene.add(object);
  }, function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% загружено');
  }, function (error) {
    console.log('Ошибка загрузки модели', error);
  });

  // 调整相机位置
  camera.position.z = 3;

  // 渲染循环
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
});

内容的提问来源于stack exchange，提问作者Alone Wasser