使用Three.js加载项目目录OBJ模型失败黑屏，求解决方案

先修正代码中的致命拼写错误 #

你的代码里调用加载方法时写成了loader.Load（大写L），但Three.js的OBJLoader加载方法是小写的load——JavaScript大小写敏感，这会直接导致加载逻辑根本不执行，场景里没有可渲染的模型自然显示黑屏。

修正文件路径 #

你写的路径../src/assets/models/test.obj大概率是错误的，举个常见项目结构的例子：

project/
├─ src/
│  ├─ assets/
│  │  └─ models/
│  │     └─ test.obj
│  └─ js/
│     └─ your-script.js

从your-script.js到test.obj的正确路径应该是../assets/models/test.obj（向上一级到src目录，再进入assets），而不是../src/...（这样会跑到src的父目录去找src文件夹，必然找不到）。

验证路径是否正确的方法：

• 打开浏览器控制台（F12）切换到Network标签
• 刷新页面，查看test.obj的请求状态，404就说明路径错误

调整动画循环逻辑 #

原代码只在模型加载成功后才启动animate()，如果加载失败（比如路径错、方法名错），渲染器根本不会工作。应该把animate()调用放在代码最后，不管模型是否加载成功，都保持渲染循环运行。

调试辅助建议 #

• 给场景添加网格辅助线，快速确认渲染器是否正常工作：

  scene.add(new THREE.GridHelper(10, 10));
  

• 把MeshBasicMaterial换成MeshNormalMaterial，这种材质不受光照影响，更容易看到模型轮廓：

  child.material = new THREE.MeshNormalMaterial({ wireframe: true });
  

修正后的完整代码 #

import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

// Create a scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 800);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加网格辅助线，方便调试
scene.add(new THREE.GridHelper(10, 10));

// Lighting
const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 0); // Adjust as needed
scene.add(directionalLight);

// Create an instance of OBJLoader
const loader = new OBJLoader();

// 修正路径和方法名
loader.load(
    '../assets/models/test.obj', // 根据你的项目结构调整路径
    function (object) { // This function is called after the object is loaded
        scene.add(object); // Add the loaded object to the scene
        console.log('OBJ file loaded successfully.');

        object.position.set(0, 0, 0); // Adjust as necessary
        object.scale.set(0.01, 0.01, 0.01); // Adjust as necessary
        camera.lookAt(object.position);

        // Traverse the object to modify materials
        object.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material = new THREE.MeshNormalMaterial({ wireframe: true });
                child.material.side = THREE.DoubleSide; // Make the material double-sided
            }
        });
    },
    function (xhr) { // Optional: Progress callback
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) { // Error callback
        console.error('An error happened:', error);
    }
);

// Animation loop - 放在代码末尾，确保始终运行
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

内容的提问来源于stack exchange，提问作者kota purushothamreddy