javascript - useBox - 加倍高度数似乎不会加倍实际高度

Question

我正在做一个项目来了解更多关于 react-fiber-three 的信息。我选择了这个例子：https ://codesandbox.io/s/ragdoll-physics-wdzv4 ，不是因为物理学，而是因为它展示了如何用 3D 盒子构建桌子和椅子。

所以假设最终我想构建一个表格设计器，用户可以在其中输入数字或使用滑块来选择表格的宽度、长度和高度。

我在这里问了一个关于如何找到好的文档的问题，但还没有任何答案，我只是通过反复试验来更改数字以了解每个参数的工作原理。关于这个问题的一个答案建议我选择一个“核心”样本作为开始。但这是我发现的唯一一个不使用 .glb 文件构建由其他 3D 对象组成的 3D 对象的示例。

我发现第二个参数会增加桌腿的高度。所以我加倍了 4 到 8。

const [leg1] = useBox(() => ({ type: 'Static', position: [7.2, -3, 1.8], args: [0.25, 2, 0.25] }))
Original:  <Box scale={[0.5, 4, 0.5]} ref={leg1} />
Changed :  <Box scale={[0.5, 8, 0.5]} ref={leg1} />

这是我更换后桌子的样子。显然，桌面需要向上移动，后来，我想出了如何做到这一点。

我的第一个问题：当我将参数翻倍时，我预计盒子（leg1）的高度会翻倍，但它似乎只增加了大约 25%。为什么没有翻倍？

第二个问题，这些数字是任何特定的计量单位吗？我不认为它们不是英尺、英寸、厘米，猜测它们只是相对于平面或屏幕尺寸。

然后调整桌面

后来，我增加了所有四个腿的高度，并通过将 -0.8 更改为 1.2 来升高桌面。

 Original: const [seat] = useBox(() => ({ type: 'Static', position: [9, -0.8, 0], ...
 Changed : const [seat] = useBox(() => ({ type: 'Static', position: [9, 1.2, 0], ...

第三个问题是，如果我将桌腿的高度加倍，那我为什么不把这个参数改变同样的数量。例如，身高从 4 变为 8，所以看起来我应该这样计算：-0.8（原始值）加上 4（增加的数量）= 3.2。但是数字 1.2 使它看起来正确。[当我进行此更改时，桌​​子上的杯子停止工作，但我将移除杯子，因为我不在乎它。]

我在玩不同的高度，然后找到适用于桌面偏移的数字：

以下是有效的数字，仅基于尝试的数字，并查看它是否看起来不错（无需旋转以查看它们是否 100% 正确）：

Height   Offset 
4       -0.8 
6       .4
8       1.2 
10      1.8 
12      2.8 
14      3.8 
16      4.8 

看起来我需要一个公式来计算高度变化时的偏移量。在高度为 8 之后，似乎高度每增加 1，偏移量就会增加 0.5。

我正在将硬编码的数字变成变量。我取了原来的Table函数，做了一个“dynTable”函数。

function dynTable() {
  var tableLength = 5;
  var tableWidth = 10; 
  var tableHeight = 16;
  var tabletopHeightBase = 4; 
  var tabletopHeightOffsetBase = -0.8;
  var tabletopHeightOffset = tabletopHeightOffsetBase - tabletopHeightOffsetBase / tableHeight;
  //var tabletopHeightOffset = tabletopHeightOffsetBase + tabletopHeightOffsetBase / tableHeight;  // working on this formula... 
  tabletopHeightOffset = 4.8; 

  var tabletopThickness= 0.5; 
  //const [tabletop] = useBox(() => ({ type: 'Static', position: [9, -0.8, -8], args: [2.5, 0.25, 2.5] }))
  const [tabletop] = useBox(() => ({ type: 'Static', position: [9, tabletopHeightOffset, -8], args: [2.5, 0.25, 2.5] }))
  const [leg1] = useBox(() => ({ type: 'Static', position: [7.2, -3, -6.2], args: [0.25, 2, 0.25] }))
  const [leg2] = useBox(() => ({ type: 'Static', position: [10.8, -3, -6.2], args: [0.25, 2, 0.25] }))
  const [leg3] = useBox(() => ({ type: 'Static', position: [7.2, -3, -9.8], args: [0.25, 2, 0.25] }))
  const [leg4] = useBox(() => ({ type: 'Static', position: [10.8, -3, -9.8], args: [0.25, 2, 0.25] }))
  return (
    <>
      <Box scale={[tableLength, tabletopThickness, tableWidth]} ref={tabletop} />
      <Box scale={[0.5, tableHeight, 0.5]} ref={leg1} />
      <Box scale={[0.5, tableHeight, 0.5]} ref={leg2} />
      <Box scale={[0.5, tableHeight, 0.5]} ref={leg3} />
      <Box scale={[0.5, tableHeight, 0.5]} ref={leg4} />
    </>
  )
}

标签： javascriptreactjsreact-three-fibercannon.js