使用map方法创建three.js组件答案

【问题标题】：Create three.js components with map method使用map方法创建three.js组件
【发布时间】：2021-03-05 10:54:15
【问题描述】：

我已经创建了一个 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 个。

single butterfly

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

【问题讨论】：

我不确定，但这可能会发生，因为scene 在所有蝴蝶组件中都是相同的，所以它只添加到最后一个蝴蝶。
这帮我解决了。我只需要为每个循环制作一个 glb 文件的副本。所以我只是让它遍历一个 10 的数组并制作了 glb 文件的 10 个副本。

标签： javascript reactjs three.js react-three-fiber

【解决方案1】：

我假设 Butterflies() 在 Butterflies.js 中，您尝试在此处返回许多 <Butterfly>，但是 react 组件只能有一个父级。

在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}
    </>
)}

【讨论】：