Skip to main content

React Drei

Esta es un conjunto de funcionalidades que nos serviran para utilizar elementos de three.js de forma declarativa

npm install @react-three/drei

OrbitControls​

Si bien, podemos usar la clase 'OrbitControls' usando la función extend, una mejor versión es utilizando Drei

import { OrbitControls } from "@react-three/drei";
      <OrbitControls />

Con los valores por default es suficiente para comenzar a utilizarlos.

  • dampingFactor=0.08. Valor importante para modificar la sutileza con la cual se realizan los cambios de camara

TransformControls​

Esta es una gran herramienta para comenzar a definir algunos atributos

  • Escala
  • Posición
  • Rotación
  • Algo importante a resaltar. Es que cuando un elemento se coloca como hijo de otro elemento padre, este se movera en el espacio local del padre.
  <TransformControls mode="rotate">
          <Sphere />
        </TransformControls>

La esfera es hija de los controles.

  • Forma correcta de usar los controles
          <TransformControls mode="translate" object={cubeRef} />

Donde cubeRef es un elemento de useRef.

  • Warning. Cuando se usan los TransformControllers y los OrbitControlls ocurre un error en donde se pueden traslapar las indicaciones y la rotación. Para corregir este error se realiza lo siguiente:
      <OrbitControls dampingFactor={0.08} makeDefault />

La propiedad makeDefault soluciona este problema. Esto define a OrbitControls como los controles principales

PivotControls​

Simiar a los TransformControls pero con un ejor aspecto.

En un solo elemento se cuenta con escala, rotacion y traslación.

  • para usar este componente en un objeto se implementa de la siguiente manera.
   <PivotControls anchor={[0, 0, 0]} scale={2}>
        <mesh ref={cubeRef} position-x={2} rotation-y={MathUtils.degToRad(56)}>
          <boxGeometry />
          <meshStandardMaterial color={"mediumpurple"} />
        </mesh>
      </PivotControls>