Блог

Я работаю над проектом, чтобы узнать больше о react-fiber-три. Я выбрал такой пример: https://codesandbox.io/s/ragdoll-physics-wdzv4, не из-за физики, а потому, что она показала, как построить стол и стул из 3D-коробок.

Итак, предположим, что в конечном итоге я хочу создать конструктор таблиц, в котором пользователь мог бы ввести номер или использовать ползунок для выбора ширины, длины и высоты таблицы.

Я задал здесь вопрос о том, как найти хорошую документацию, но пока не получил ответа, я просто меняю числа методом проб и ошибок, чтобы узнать, как работает каждый параметр. Один из ответов на этот вопрос предполагал, что для начала я выбрал «жесткий» образец. Но это единственный найденный мной пример, в котором 3D-объект создается из других 3D-объектов без использования файла .glb.

Я обнаружил, что второй параметр увеличит высоту ножки стола. Поэтому я удвоил 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], ...
 

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