I'm working on a project to learn more about react-fiber-three. I picked this example: https://codesandbox.io/s/ragdoll-physics-wdzv4, not because of the physics, but because it showed how to build a table and chair out of 3D-boxes.
So suppose eventually I want to build a table designer, where the user could enter number or use a slider to pick the width, length, height of the table.
I asked a question here about how to find good documentation, but lacking any answer yet, I'm just changing numbers by trial and error to learn how each parameter works. One answer on that question suggested I picked a "hard-core" sample to start with. But it's the only example I have found that builds a 3D object made out of other 3D objects without using a .glb file.
I found the second parameter will increase the height of the table leg. So I doubled 4 to 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} />
This is what the table looked like after my change. Obviously, the table top needs to be moved up, and later, I figured out how to do that.
My first question: When I doubled the parameter, I would have expected the height of the box (leg1) to double, but it seems to have only gone up by about 25%. Why didn't it double?
Second question, are these numbers any specific unit of measure? They are not feet, inches, centimeters I don't think, guessing they are just relative to the plane or the screen size.
Then to adjust the table top
Later, I increased the height of all four legs, and raised the table top by changing -0.8 to 1.2.
Original: const [seat] = useBox(() => ({ type: 'Static', position: [9, -0.8, 0], ...
Changed : const [seat] = useBox(() => ({ type: 'Static', position: [9, 1.2, 0], ...
The third question is if I doubled the height of the table leg, then why wouldn't I change this parameter by the same amount. For example, height went from 4 to 8, so it seems like I should have done the math like this: -0.8 (original value) plus 4 (amount leg was increased) = 3.2. But the number 1.2 is what made it look right. [The mug on the table quit working when I made this change, but I will remove the mug since I don't care about it.]
I was playing with different heights and then finding the number that works for the table top offset:
Here are numbers that worked, just based on trying numbers, and seeing if it looked good (without rotating to see if they are 100% correct):
Height Offset
4 -0.8
6 .4
8 1.2
10 1.8
12 2.8
14 3.8
16 4.8
Looks like I would need a formula to compute that offset when the height changes. After the height of 8, it seems that each increase of 1 in height adds .5 to the offset.
I'm moving to make the hard-coded numbers to be variables. I took the original Table function, and made a "dynTable" function.
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} />
</>
)
}