Блог

Мне интересно узнать, как создавать динамические объекты и группировать их полностью в react/JavaScript. Я рассматриваю стул и стол в этом примере как свою модель:

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'
 

Поиск в Google react-три/кэннон привел меня к https://opensourcelibs.com/lib/use-cannon, и ссылка «github» привела меня к https://github.com/pmndrs/use-cannon, который я скачал.

Есть ли документ в «useBox», или мне просто нужно прочитать код, чтобы понять, как он работает?

Без какого-либо документа я могу выполнять только контролируемые вариации, например, предположим, что я просто хочу сделать ножки стола длиннее или столешницу больше? Я не понимаю, что соединяет ножки со столом, но я полагаю, что это должно быть положение или аргументы:

Я попытался изменить 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] }))
 

и я увидел, как ножка вылезла из-под столешницы.

Я знал, что все ножки стола имеют одинаковую длину, поэтому я попытался изменить какое-то число, которое было одинаковым для всех четырех ножек (позже я заметил, что у двух было 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} />
 

И это дело действительно длиною в две ноги, но выше верхней части стола.

Таким образом, главный вопрос заключается не в том, как изменить длину ног, а в том, как найти документацию.

Я поискал в библиотеке pmndr «useBox» и увидел множество совпадений:

Я посмотрел на источники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)
}
 

На данный момент меня волнует не столько «физика», сколько то, как создать три объекта, таких как таблица, состоящая из 5 3D-прямоугольников.

useBox предназначен только для физики, он взят из физической библиотеки «cannon», а не из threejs или r3f. он аппроксимирует форму и связывает ее с произвольной геометрией. физический движок теперь управляет буквальным ящиком, кубом, и подвергает его воздействию гравитации и других коллайдеров. если ваша форма напоминает что-то вроде сферы, вы бы использовали вместо нее сферу использования и так далее.

пример, который вы выбрали для изучения либо threejs, либо r3f, является сложным, я бы не стал начинать с физики. пример на главной странице github (https://codesandbox.io/s/rrppl0y8l4?file=/src/App.js) охватывает некоторые основы, объедините это с имеющимися под рукой документами threejs, и у вас будет гораздо более удобный опыт обучения.

поле в трех значениях (в нотации react) — это не более чем это:

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

и вы формируете такие группы, как:

 <group>
  <mesh>
    ..
 

если вы хотите начать с физики позже, вот несколько более простых:

• падающие кубики: https://codesandbox.io/s/simple-physics-demo-z8e6m
• рождественские безделушки: https://codesandbox.io/s/bestservedbold-christmas-baubles-zxpv7
• арканоид: https://codesandbox.io/s/arkanoid-under-60-loc-66cd7