React & Three js

useFrame(() => (ref.current.rotation.y = ref.current.rotation.y += 0.05));

const {
  camera,
  gl: { domElement },
} = useThree();

const controls = useRef();
console.dir(controls.current);

useFrame(() => {
  controls.current.enableDamping = true;
  controls.current.dampingFactor = 0.03;
  controls.current.minDistance = 2;
  controls.current.maxDistance = 3.3;

  return controls.current.update();
});

const clickEvt = () => {
  let num1 = Math.random();
  let num = Math.random();
  console.log(num, ref.current);
  ref.current.material.color = { r: num1, g: num1, b: num };
};

<Canvas camera={{ position: [0, 0, 5] }}>
  <ambientLight intensity={1} />
  <spotLight intensity={0.3} position={[20, 10, 10]} angle={0.2} penumbra={1} />
  <Thing />
</Canvas>

<mesh
  ref={ref}
  onClick={clickEvt}
  onPointerDown={clickEvt}
  rotation={[-0.2, 0, 0]}
>
  <orbitControls ref={controls} args={[camera, domElement]} />

  <mesh position={[-0.5, 0.6, 0.45]}>
    <sphereBufferGeometry attach="geometry" args={size} />
    <meshStandardMaterial attach="material" color="#fca031" />
  </mesh>

  <mesh position={[0, -1, 0.45]}>
    <tubeBufferGeometry attach="geometry" args={[path, 30, 0.2, 8, false]} />
    <meshStandardMaterial attach="material" color="#fca031" />
  </mesh>

  <mesh position={[-2, -1, 0.45]}>
    <cylinderBufferGeometry attach="geometry" args={[0.1, 0.1, 1, 30]} />
    <meshStandardMaterial attach="material" color="pink" />
  </mesh>
</mesh>

// texture public path
var texture = new THREE.TextureLoader().load('textures/grasslight-big.jpg');
console.log(texture);

<mesh position={[0, 2, 1]}>
  <coneBufferGeometry attach="geometry" args={[0.8, 1.5, 32]} />
  <meshBasicMaterial attach="material" map={texture} />
</mesh>;