React-Three循环渲染模型无显示问题求助

核心原因：循环渲染误用forEach #

forEach仅用于遍历数组，没有返回值，React无法从它的执行结果中获取要渲染的JSX元素。而map会返回包含JSX元素的新数组，这才是React列表渲染的正确方式。

其他细节问题及修正 #

除了循环方法错误，你的代码还有几处影响渲染的问题：

• Model组件硬编码了position值，未使用传入的props，且传入的position是字符串格式，需要转为数字数组
• useLoader加载路径固定，未使用传入的model参数，导致所有实例加载同一个模型
• 直接在组件内创建THREE.MeshPhysicalMaterial，每次渲染都会生成新实例，建议用useMemo缓存
• 函数名拼写错误：chageToUnselect → changeToUnselect

修正后的完整代码 #

1. 修复Model组件 #

import { useLoader, useMemo } from '@react-three/fiber'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'

function Model({ model, position }) {
  // 使用传入的路径加载模型
  const result = useLoader(GLTFLoader, model)
  
  // 将字符串格式的position转为数字数组
  const parsedPosition = useMemo(() => {
    return position.split(',').map(num => parseFloat(num))
  }, [position])
  
  // 缓存材质，避免重复创建实例
  const material = useMemo(() => {
    return new THREE.MeshPhysicalMaterial({ color: 'black', flatShading: true })
  }, [])

  return (
    <primitive 
      object={result.scene} 
      position={parsedPosition}
      onPointerOver={() => changeToSelect(result)}
      onPointerOut={() => changeToUnselect(result)}
      material={material}
    />
  )
}

2. 修复模型列表渲染逻辑 #

// 用map替代forEach，添加唯一key属性
{cars.map((car, index) => (
  <Model
    key={index}
    model={car.path}
    position={car.position}
  />
))}

3. 标准元素循环渲染修复 #

{cars.map((car, index) => (
  <mesh key={index} position={car.position.split(',').map(num => parseFloat(num))}>
    <boxGeometry />
    <meshStandardMaterial />
  </mesh>
))}

关键注意点 #

• React列表渲染必须用map，且每个列表项需要唯一的key属性（优先用数据的唯一ID，无ID时可用index）
• 组件内的THREE对象（如材质、几何体）尽量用useMemo缓存，避免不必要的重渲染
• 注意props的格式转换，比如字符串类型的坐标需转为数字数组

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