React-Three-Fiber 使ってみた

React で3Dやりたす

というわけで、react-three-fiber を使った最低限の作業を備忘録

準備

Typescript 版の React プロジェクト作成
react-three/fiber のインストール

  % npx create-react-app cube-sample
  % cd cube-sample
  % npm install three @react-three/fiber

コード

App.js, App.css の２ファイル、Index.jsは省略

App.css

この設定がないと表示が小さくなってしまう

App.css

.App {
  width: 100vw;
  height: 100vh;
}

App.js

<mesh> </mesh> が Three.js の scene に相当するっぽい。
<mesh> </mesh> 内に geometry と material を設定する。
requestAnimationFrame(...) 的なことは useFrame() で対応できる。
<Canvas></Canvas> で <mesh></mesh>を挟んで
ライトの設定<pointLight/>なんかも入れる。

WebGLRendererとかはちょっとまだ良くわからない...

App.js

import { useState, useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import './App.css';

function Cube(props) {
    const [wireFrame, setWireFrame] = useState(false);
    const ref = useRef()
    useFrame(()=>{
        ref.current.rotation.x += 0.010;
        ref.current.rotation.y += 0.013;
        ref.current.rotation.z += 0.015;
    });
    return (
        <mesh {...props} ref={ref} onClick={()=>setWireFrame(!wireFrame)}>
            <boxGeometry args={[1,1,1]} />
            <meshLambertMaterial color="red" wireframe={wireFrame} />
        </mesh>
    )
}

function App() {
    return (
      <div className='App'>
          <Canvas>
            <pointLight position={[10,10,10]} />
            <Cube position={[1,1,1]} />
            <Cube position={[0,0,-1]} />
            <Cube position={[-1,1,1]} />
           </Canvas>
        </div>
    )
}

export default App;

<mesh> <axesHelper scale={2} /> </mesh> を
<Canvas></Canvas>内に追加すれば確認用のXYZ軸を表示できる。

実行画面

最後に

とりあえず最低限のオブジェクトの配置とアニメーション、
イベントの取得は簡単にできることがわかった。

もう少し高度な使い方にも挑戦します。