React项目中使用Three.js加载OBJ+MTL模型无显示问题求助

核心错误分析 #

• 加载器误用：
  • .mtl 材质文件不能用 MaterialLoader，该加载器仅支持Three.js序列化的二进制材质，正确工具为 MTLLoader。
  • .obj 模型文件需用 OBJLoader 加载，ObjectLoader 是用于加载Three.js导出的JSON格式对象的，不适用于OBJ格式。
• 资源路径错误：
  React项目中静态资源需放在public目录下，路径应使用根相对路径（如/models/floorplan.mtl），而非组件相对路径../models/...，否则会导致资源加载失败。
• 缺少基础场景配置：
  默认Canvas的相机位置可能未对准模型，且无灯光设置时，模型会因不可见或全黑而无法显示。

修正后的代码 #

1. 安装依赖（若未安装） #

npm install three @react-three/fiber

2. 修复ThreeDFloorPlan组件 #

import React from "react";
import { Canvas } from "@react-three/fiber";
import { MTLLoader, OBJLoader } from "three/examples/jsm/loaders";
import { useLoader } from "@react-three/fiber";

const ThreeDFloorPlan = () => {
  // 加载MTL材质文件
  const mtlAssets = useLoader(MTLLoader, "/models/floorplan.mtl");
  // 加载OBJ模型并关联材质
  const objModel = useLoader(OBJLoader, "/models/floorplan.obj", loader => {
    mtlAssets.preload();
    loader.setMaterials(mtlAssets);
  });

  return (
    <Canvas camera={{ position: [0, 5, 10], fov: 60 }}>
      {/* 添加灯光确保模型可见 */}
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 10, 7.5]} intensity={1} />
      {/* 渲染模型，可按需调整缩放、位置 */}
      <primitive object={objModel} scale={1} position={[0, 0, 0]} />
    </Canvas>
  );
};

export default ThreeDFloorPlan;

3. 资源文件放置要求 #

将包含floorplan.obj和floorplan.mtl的models文件夹，移动到React项目的public目录下，确保根相对路径能正确访问资源。

额外排查建议 #

• 查看浏览器控制台：按F12打开控制台，检查是否有资源加载失败、语法错误等提示，这是定位问题的关键。
• 调整模型缩放：若模型仍不可见，尝试修改scale属性（如scale={0.1}或scale={10}），可能是模型尺寸与相机视野不匹配。
• 验证模型文件完整性：用Blender等3D软件重新导出模型，确保导出时勾选了材质、UV等必要选项，避免文件损坏。

内容的提问来源于stack exchange，提问作者Luke-Norris