React Three Fiber中OBJ模型无法加载/显示的问题求助

1. 替换useMemo为useEffect #

useMemo用于缓存计算结果，不适合执行模型加载这类副作用操作。改用useEffect处理异步加载逻辑，同时添加错误捕获与资源清理：

import React, { useEffect, useState } from "react";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import * as THREE from "three";

const LoadModel = ({ url }) => {
  const [obj, setObj] = useState(null);

  useEffect(() => {
    const loader = new OBJLoader();
    loader.load(
      url,
      (loadedObj) => {
        // OBJ默认无材质，手动添加基础材质解决不可见问题
        loadedObj.traverse((child) => {
          if (child.isMesh) {
            child.material = new THREE.MeshStandardMaterial({ color: 0xffffff });
          }
        });
        setObj(loadedObj);
      },
      (progress) => console.log(`加载进度：${(progress.loaded / progress.total) * 100}%`),
      (error) => console.error("模型加载失败：", error)
    );

    // 组件卸载时清理加载器，避免内存泄漏
    return () => loader.dispose();
  }, [url]);

  return obj ? <primitive object={obj} scale={[0.5, 0.5, 0.5]} /> : null;
};

export default LoadModel;

2. 修正静态资源路径 #

React项目中静态资源需放在public目录下，加载路径应使用根路径开头（如"/spongebob.obj"），而非相对路径"./spongebob.obj"，避免路径解析错误。

3. 优化场景光照 #

仅用ambientLight可能导致模型亮度不足，补充方向光增强立体感：

<Canvas pixelratio={[1, 2]} camera={{ position: [15, 15, 15], fov: 50 }}>
  <ambientLight intensity={0.5} />
  <directionalLight position={[10, 10, 5]} intensity={1} />
  <Suspense fallback={<Loader />}>
    <LoadModel url="/spongebob.obj" />
  </Suspense>
  <OrbitControls />
</Canvas>

4. 调整模型缩放与位置 #

部分OBJ模型尺寸偏差较大，通过scale属性适配场景：

<primitive object={obj} scale={[0.5, 0.5, 0.5]} position={[0, 0, 0]} />

核心问题总结 #

• OBJ格式仅存储几何体数据，默认无材质，需手动添加才能正常显示；
• useMemo不适合处理异步加载副作用，useEffect是正确选择，需配套清理函数避免内存泄漏；
• 相机参数需确保模型处于视野范围内，可通过调整position或fov优化。

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