title: How to understand "useBox" in react-three-fiber
body: <p>I'm interested in learning how to create dynamic objects and group them together entirely in react/JavaScript.  I'm looking at the chair and table in this example as my model:</p>
  <p><a href="https://codesandbox.io/s/ragdoll-physics-forked-bntr9" rel="nofollow noreferrer">https://codesandbox.io/s/ragdoll-physics-forked-bntr9</a></p>
  <p>At this point, I'm not as concerned about the &quot;physics&quot; but just how to create the three object such as a table that consist of 5 3D-Rectangles.</p>
  <p>I downloaded the above example, and this is the code for the table:</p>
  <pre><code>function Table() {
    const [seat] = useBox(() =&gt; ({ type: 'Static', position: [9, -0.8, 0], args: [2.5, 0.25, 2.5] }))
    const [leg1] = useBox(() =&gt; ({ type: 'Static', position: [7.2, -3, 1.8], args: [0.25, 2, 0.25] }))
    const [leg2] = useBox(() =&gt; ({ type: 'Static', position: [10.8, -3, 1.8], args: [0.25, 2, 0.25] }))
    const [leg3] = useBox(() =&gt; ({ type: 'Static', position: [7.2, -3, -1.8], args: [0.25, 2, 0.25] }))
    const [leg4] = useBox(() =&gt; ({ type: 'Static', position: [10.8, -3, -1.8], args: [0.25, 2, 0.25] }))
    return (
      &lt;&gt;
        &lt;Box scale={[5, 0.5, 5]} ref={seat} /&gt;
        &lt;Box scale={[0.5, 4, 0.5]} ref={leg1} /&gt;
        &lt;Box scale={[0.5, 4, 0.5]} ref={leg2} /&gt;
        &lt;Box scale={[0.5, 4, 0.5]} ref={leg3} /&gt;
        &lt;Box scale={[0.5, 4, 0.5]} ref={leg4} /&gt;
        &lt;Suspense fallback={null}&gt;
          &lt;Mug /&gt;
        &lt;/Suspense&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>And at the top of the program I see this:</p>
  <pre><code>import {
    Physics,
    useBox,
    useCompoundBody,
    useCylinder,
    useSphere,
    usePlane,
    useConeTwistConstraint,
    usePointToPointConstraint
  } from '@react-three/cannon'
  </code></pre>
  <p>Googling react-three/cannon took me to <a href="https://opensourcelibs.com/lib/use-cannon" rel="nofollow noreferrer">https://opensourcelibs.com/lib/use-cannon</a>, and the &quot;github&quot; link took me to <a href="https://github.com/pmndrs/use-cannon" rel="nofollow noreferrer">https://github.com/pmndrs/use-cannon</a>, which I downloaded.</p>
  <p>Is there a document to the &quot;useBox&quot;, or do I have just have to read code to figure out how it works?</p>
  <p>Without some doc, I can only do controlled variations, for example, suppose I just want to make the table legs longer, or the table top bigger?   I don't understand what joins the legs to the table, but I figure it must be the position or args:</p>
  <p>I tried changing 1.8 to 2.8 as follows:
  from</p>
  <pre><code>const [leg1] = useBox(() =&gt; ({ type: 'Static', position: [7.2, -3, 1.8], args: [0.25, 2, 0.25] }))
  </code></pre>
  <p>to</p>
  <pre><code>const [leg1] = useBox(() =&gt; ({ type: 'Static', position: [7.2, -3, 2.8], args: [0.25, 2, 0.25] }))
  </code></pre>
  <p>and I could see the leg come out from the table top.</p>
  <p>I knew all table legs had equal length, so I tried changing some number that was the same for all four legs (then later noticed two had 1.l8 and two had -1.8).
  I'm also guessing that some set of three parameters must be length, width, height.</p>
  <p>Then I tried changing:</p>
  <blockquote>
  <pre><code>  &lt;Box scale={[0.5, 4, 0.5]} ref={leg1} /&gt;
    &lt;Box scale={[0.5, 4, 0.5]} ref={leg2} /&gt;
  </code></pre>
  </blockquote>
  <p>to</p>
  <blockquote>
  <pre><code>  &lt;Box scale={[0.5, 6, 0.5]} ref={leg1} /&gt;
    &lt;Box scale={[0.5, 6, 0.5]} ref={leg2} /&gt;
  </code></pre>
  </blockquote>
  <p>And that deed indeed length two legs, but up through the top of the table.</p>
  <p><strong>So bottom line question is not how to do change the length of the legs, but how to find the documentation.</strong></p>
  <p>I searched the pmndrs library for &quot;useBox&quot;, and see a many many matches:
  <a href="https://i.stack.imgur.com/4UPUj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4UPUj.png" alt="enter image description here" /></a></p>
  <p>I looked at the sources\hooks.ts and found this, which doesn't help me at all:</p>
  <pre><code>export function useBox(fn: GetByIndex&lt;BoxProps&gt;, fwdRef: Ref&lt;Object3D&gt; = null, deps?: DependencyList) {
    const defaultBoxArgs: Triplet = [1, 1, 1]
    return useBody('Box', fn, (args = defaultBoxArgs): Triplet =&gt; args, fwdRef, deps)
  }
  </code></pre>