react three drei

React

React Three Drei（drei）は、React Three Fiberと一緒に使われる便利なユーティリティライブラリです。Dreiは、3Dシーンの作成を簡素化し、よく使われるコンポーネントやヘルパー関数を提供します。React Three Fiberと組み合わせて、少ないコードでインタラクティブな3Dシーンを構築できます。

インストール

npm install @react-three/drei

OrbitControls

マウスで動かしたり拡大縮小できる機能はdreiにあるので、これをインポートしてCanvasの中に設置して使います

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

<Canvas>
      <TorusKnot />
      <OrbitControls enableZoom={false} enableDamping={true}/>   
</Canvas>

enableZoomなどのプロパティで機能の制限もできます。enableDampingは動きが滑らかになり、停止しても少し余韻が残ります

shaders

dreiにはWebGLのシェーダー（頂点シェーダーやフラグメントシェーダー）を活用して、3Dオブジェクトの視覚的な歪みやエフェクトを生成するマテリアルが複数用意されています。

import { MeshWobbleMaterial } from "@react-three/drei";

<mesh>
      <torusKnotGeometry />
      <MeshWobbleMaterial factor={5} speed={0.2}/>
</mesh>

このようにdreiのマテリアルをセットするだけで簡単にシェーダーを扱ったようなクールなアニメーションが実装できます。

helper

ライトのヘルパーなどはthreeの機能ですが、useHelperというdreiのhookを使って簡単にヘルパーを描画できます。

import { useHelper　} from "@react-three/drei";
import { DirectionalLightHelper } from "three";

const Scene = () => {
  const directionalLightRef = useRef();
  useHelper(directionalLightRef, DirectionalLightHelper, 0.5, "white");

  return (
    <>
      <directionalLight
        position={[0, 0, 2]}
        intensity={0.5}
        ref={directionalLightRef}
      />
    </>
  );
};

影

ContactShadowsというコンポーネントを使うことで、簡単に平面に影を落とせます

<ContactShadows
          position={[0, -3, 0]}
          opacity={0.5}//透明度
          scale={20}//影の面積
          blur={1}//影のエッジのぼけ
          far={10}//光源の遠さだと思う
          resolution={256}
          color="#000000"
        />

環境光

様々な環境光を簡単にセットすることができます

<Environment preset="sunset" background={true}/>

hdrファイルとリンクされており、backgroundをtrueにすると背景も現れます。自分で画像を用意することもできる。

HTMLタグ

Canvasタグの中は３d描画環境ですが、dreiのHTMLタグを使えばHTMLを書くことができます。

import { Html } from "@react-three/drei";

const CanvasLoader = () => {
  return <Html>CanvasLoader</Html>;
};

export default CanvasLoader;

例えばCanvasの中でモデルを読み込むときのLoaderコンポーネントにHTMLタグを書きたいときなどに使います

useProgress

useProgressフックスがあるので、簡単にプログレスバーが作れたり、今ローディング何％などの表示ができます。

import { Html, useProgress } from "@react-three/drei";

const CanvasLoader = () => {
  const { progress } = useProgress();
  return (
    <Html>  
        {progress !== 0 ? `${progress.toFixed(2)}%` : "Loading..."}
    </Html>
  );
};

export default CanvasLoader;

Float

Floatコンポーネントで囲むと物体をゆらゆら揺らすことができる

import { Float } from "@react-three/drei";
const Model= (props) => {
  return (
    <Float floatIntensity={1}>
        <mesh />
    </Float>
  );