Sommario
  1. Concetti Base
    1. Primitive
    2. Scene
    3. Light
    4. Camera
    5. Mesh
  2. Caricare Oggetti 3D
  3. Altri progetti interesanti

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

Mostrare modelli 3D sul web o in un e-commerce

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

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