javascript - react-three-fiber中如何理解 "useBox"

Question

我有兴趣学习如何创建动态对象并将它们完全分组到 react/JavaScript 中。我将此示例中的椅子和 table 视为我的模型:

https://codesandbox.io/s/ragdoll-physics-forked-bntr9

在这一点上，我并不关心“物理”，而是关心如何创建三个对象，例如由 5 个 3D 矩形组成的表格。

我下载了上面的例子，这是表格的代码:

function Table() {
  const [seat] = useBox(() => ({ type: 'Static', position: [9, -0.8, 0], args: [2.5, 0.25, 2.5] }))
  const [leg1] = useBox(() => ({ type: 'Static', position: [7.2, -3, 1.8], args: [0.25, 2, 0.25] }))
  const [leg2] = useBox(() => ({ type: 'Static', position: [10.8, -3, 1.8], args: [0.25, 2, 0.25] }))
  const [leg3] = useBox(() => ({ type: 'Static', position: [7.2, -3, -1.8], args: [0.25, 2, 0.25] }))
  const [leg4] = useBox(() => ({ type: 'Static', position: [10.8, -3, -1.8], args: [0.25, 2, 0.25] }))
  return (
    <>
      <Box scale={[5, 0.5, 5]} ref={seat} />
      <Box scale={[0.5, 4, 0.5]} ref={leg1} />
      <Box scale={[0.5, 4, 0.5]} ref={leg2} />
      <Box scale={[0.5, 4, 0.5]} ref={leg3} />
      <Box scale={[0.5, 4, 0.5]} ref={leg4} />
      <Suspense fallback={null}>
        <Mug />
      </Suspense>
    </>
  )
}

在程序的顶部我看到了这个:

import {
  Physics,
  useBox,
  useCompoundBody,
  useCylinder,
  useSphere,
  usePlane,
  useConeTwistConstraint,
  usePointToPointConstraint
} from '@react-three/cannon'

谷歌搜索 react-three/cannon 把我带到了 https://opensourcelibs.com/lib/use-cannon ，“github”链接将我带到了 https://github.com/pmndrs/use-cannon ，我下载了。

是否有“useBox”的文档，或者我只需要阅读代码来弄清楚它是如何工作的？

没有一些文档，我只能做一些可控的变化，例如，假设我只想让 table 腿更长，或者桌面更大？我不明白是什么将腿连接到 table 上，但我认为它一定是位置或参数:

我尝试将 1.8 更改为 2.8，如下所示:来自

const [leg1] = useBox(() => ({ type: 'Static', position: [7.2, -3, 1.8], args: [0.25, 2, 0.25] }))

到

const [leg1] = useBox(() => ({ type: 'Static', position: [7.2, -3, 2.8], args: [0.25, 2, 0.25] }))

我可以看到腿从桌面上伸出来了。

我知道所有 table 腿的长度都相等，所以我尝试更改所有四条腿都相同的数字(后来发现两条腿的长度为 1.l8，两条腿的长度为 -1.8)。我还猜测一些三个参数的集合必须是长度、宽度、高度。

然后我尝试改变:

  <Box scale={[0.5, 4, 0.5]} ref={leg1} />
  <Box scale={[0.5, 4, 0.5]} ref={leg2} />

到

  <Box scale={[0.5, 6, 0.5]} ref={leg1} />
  <Box scale={[0.5, 6, 0.5]} ref={leg2} />

那份契约确实有两条腿长，但一直延伸到 table 的顶部。

所以底线问题不是如何改变腿的长度，而是如何找到文档。

我在 pmndrs 库中搜索了“useBox”，并看到了很多匹配项:

我查看了 sources\hooks.ts 并发现了这个，它对我一点帮助都没有:

export function useBox(fn: GetByIndex<BoxProps>, fwdRef: Ref<Object3D> = null, deps?: DependencyList) {
  const defaultBoxArgs: Triplet = [1, 1, 1]
  return useBody('Box', fn, (args = defaultBoxArgs): Triplet => args, fwdRef, deps)
}

Answer 1

At this point, I'm not as concerned about the "physics" but just howto create the three object such as a table that consist of 53D-Rectangles.

useBox 是纯物理的，它来自物理库“cannon”，而不是来自 threejs 或 r3f。它近似一个形状并将其链接到任意几何体。物理引擎现在管理一个文字框、一个立方体，并使其受到重力和其他碰撞器的影响。如果你的形状类似于球体，你会使用 useSphere 等等。

您选择学习 threejs 或 r3f 的示例很难，我不会从物理学开始。 github 主页 ( https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js ) 上的示例涵盖了一些基础知识，将其与手头的三个 js 文档结合起来，您将获得更加舒适的学习体验。

threejs 中的一个框(用 react 表示法)不过是这样:

<mesh position={[1, 2, 3]} rotation={[Math.PI / 3, 0, 0]}>
  <boxGeometry />
  <meshBasicMaterial color="red" />
</mesh>

然后你像这样组成小组:

<group>
  <mesh>
    ..

如果你想稍后开始物理，这里有一些更简单的:

• 下落的方 block :https://codesandbox.io/s/simple-physics-demo-z8e6m
• 圣诞饰品:https://codesandbox.io/s/bestservedbold-christmas-baubles-zxpv7
• 打砖 block :https://codesandbox.io/s/arkanoid-under-60-loc-66cd7