0

我创建了一个 react-three-fiber 功能组件来加载带有动画的蝴蝶的 glb 文件，并且我正在返回一个原语，其中 glb 的场景作为对象道具传递。它嵌套在网格中，即嵌套在场景中，即嵌套在组中。

function Butterfly({ speed, factor, url, ...props }) {
  const { scene, nodes, materials, animations } = useLoader(GLTFLoader, url);
  const group = useRef()
  const [mixer] = useState(() => new THREE.AnimationMixer())
  useEffect(() => mixer.clipAction(animations[0], group.current).play(), [])
   useFrame((state, delta) => {
    group.current.rotation.y -= Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 2
    mixer.update(delta * speed)
  })
  return (
    <group ref={group} dispose={null}>
      <scene name="Scene" {...props}>
        <mesh
        name="Object_0"
        >
          <primitive object={scene}/>
         </mesh>
      </scene>
    </group>
  )
}

然后在数组的每次迭代中以单独的函数返回该组件。

function Butterflies() {
  const copyArray = new Array(100).fill()
  console.log(copyArray);
  return copyArray.map((j, i) => {
    const x = (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
    const y = -10 + Math.random() * 20
    const z = -5 + Math.random() * 10
    return <Butterfly key={i} position={[x, y, z]} rotation={[0, x > 0 ? Math.PI : 0, 0]}  speed='5' factor='1.5' url='/blue_butterfly.glb' />
  })
}

然而，这个函数只返回一只蝴蝶而不是 100 只。

单只蝴蝶

我认为我的问题与蝴蝶组件中的返回有关。我尝试只返回带有道具和参考的原语，但这不会渲染任何东西。我已经尝试通过 glb 文件的 console.log 并找到几何形状，并尝试将其作为道具与材质一起传递给网格，但这只会渲染白色蝴蝶形状而没有场景中的动画。为什么这只返回 1 个蝴蝶而不是 100 个？

4

1 回答 1

1

我假设Butterflies()在 Butterflies.js 中，并且您在<Butterfly>这里尝试返回很多，但是反应组件只能有一个父级。

试试这个Butterflies()：

function Butterflies() {
  const copyArray = new Array(100).fill()
  console.log(copyArray);
  return(
    <>
    {copyArray.map((j, i) => {
    const x = (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
    const y = -10 + Math.random() * 20
    const z = -5 + Math.random() * 10
    return <Butterfly key={i} position={[x, y, z]} rotation={[0, x > 0 ? Math.PI : 0, 0]}  speed='5' factor='1.5' url='/blue_butterfly.glb' />
  })}
    </>)}

或者先将其存储在一个变量中，例如：

function Butterflies() {
  const copyArray = new Array(100).fill()
  console.log(copyArray);
  const items=copyArray.map((j, i) => {
    const x = (15 + Math.random() * 30) * (Math.round(Math.random()) ? -1 : 1)
    const y = -10 + Math.random() * 20
    const z = -5 + Math.random() * 10
    return <Butterfly key={i} position={[x, y, z]} rotation={[0, x > 0 ? Math.PI : 0, 0]}  speed='5' factor='1.5' url='/blue_butterfly.glb' />
    })
  return(
    <>
    {items}
    </>
)}
于 2020-11-22T23:42:37.330 回答