@react-three/drei中useFBX多模型渲染异常：调用两次组件仅显示一个模型的问题咨询

这个问题的核心在于Three.js的对象复用规则，以及useFBX的缓存机制：

当你两次调用<Trees>组件加载同一个Tree1.fbx时，useFBX会返回同一个3D对象引用。而Three.js不允许同一个Object3D实例同时被挂载到场景的多个位置——第二次挂载会覆盖第一次的位置，所以你最终只能看到一棵树木。

解决方法：克隆FBX模型实例 #

我们需要为每个<Trees>组件创建独立的模型副本，通过clone()方法实现：

修改你的Trees组件代码如下：

import { useBox } from "@react-three/cannon";
import { useFBX } from "@react-three/drei";
import React, { Suspense, useMemo } from "react";

const Trees = (props) => {
  const [ref] = useBox(() => ({ mass: 1, type: "Static", ...props }));
  const fbx = useFBX(props.fbx);
  
  // 使用useMemo缓存克隆后的模型，避免重复克隆浪费性能
  const clonedTree = useMemo(() => fbx.clone(true), [fbx]);

  return (
    <Suspense fallback={null}>
      <mesh ref={ref} scale={props.scale} position={props.position}>
        <primitive object={clonedTree} dispose={null} />
      </mesh>
    </Suspense>
  );
};

export default Trees;

关键细节说明： #

• fbx.clone(true)中的true参数表示递归克隆，会复制模型的所有子对象、材质和动画数据，确保每个组件的模型完全独立。
• useMemo用于缓存克隆结果，只有当原始FBX模型加载完成（或发生变化）时才重新克隆，避免每次组件渲染都执行克隆操作。

这样修改后，两个<Trees>组件会各自拥有独立的模型实例，就能在场景的指定位置显示两棵树木了。

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