3D web component con Three.js & React Three Fiber

Three.js è una libreria javascript che usa WebGL per visualizzare ambienti 3D.

• Esempi
• ThreeJsFundamentals.org

React-three-fiber è una libreria che consente di usare three.js come un componente React.

Per installarle:

yarn add three react-three-fiber

Concetti Base

Primitive

Negli esempi useremo un componente Box composto con le primitive geometriche:

import React from 'react';
import { useFrame } from 'react-three-fiber';

Box = (props) => {
  return (
    <mesh {...props}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial />
    </mesh>
  )
}

Scene

Il componente Canvas è la tela su cui mostrare le scene. Si estende al 100% del suo contenitore, assicurati di dargli un'altezza minima per visualizzare il contenuto.

Ci mettiamo dentro due Box

import Box from 'ui/3D/Box';
import { Canvas } from 'react-three-fiber';

<Canvas>
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
</Canvas>

Light

aggiungiamo le luci (ambientale e puntiforme)

<Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
</Canvas>

Camera

Tramite la proprietà camera del componente Canvas possiamo cambiare l'inquadratura:

<Canvas camera={{ fov: 50, position: [-3, 3, 3] }}>

Mesh

Tramite l'hook useFrame è possibile animare le mesh. Aggiungendo il seguente codice al componente box, otterremo un pò di animazione:

useFrame(state => {
  const time = state.clock.getElapsedTime();
  mesh.current.position.y = mesh.current.position.y + Math.sin(time*2)/100;
  mesh.current.rotation.y = mesh.current.rotation.x += 0.01;
})

visualizza:

Caricare Oggetti 3D

Prossimamente spiegheró come caricare e animare oggetti .obj e .gltf tramite l'hook useloader.

Altri progetti interesanti

• drei: libreria che estende react-three-fiber aggiungendo numerose funzionalità
• troika-text: 3D Text Rendering demo interattiva
• troika-utils: utility per shaders
• gltfjsx: trasforma oggetti .gltf in componenti react .jsx