THREE.js in React

THREE.js は WebGL を用いて3D表現ができるライブラリです。 従来の js だと大規模なアプリになると予期しないことが多く起こるので、 view に特化した React のライフサイクル上で安全に構築します。

ポイント

DOMを直接操作するライブラリなどは React では使えませんが、 hookではuseEffect内に処理をかくことで、 Reactのライフサイクルから隠すことができます。

また、THREE.jsはmountごとに再実行すると重くなるので、 Reactのライフサイクルと関係ない変数にはuseRefを使うと再renderせずうまくいきます。

useEffect内に初期処理をかき、一度だけ実行されるようにしてます。 特に WebGLRenderer 作成時にcanvasを指定させ、 sceneとcameraにはuseRefを使うことであとから変更しても初期処理が再実行されないようにします。

import React, {useState, useRef, useEffect} from 'react'
import * as THREE from 'three';

const App = (props) => {
  const scene = useRef(new THREE.Scene());
  const camera = useRef(new THREE.Camera());
  useEffect(()=>{
    const canvas   = document.getElementById('renderer');
    const renderer = new THREE.WebGLRenderer({canvas});
    const light  = new THREE.DirectionalLight(0xFFFFFF, 1);
    light.position.set( 1, 1, 1 );
    scene.current.add(light);
    /*~~more process~~*/
    const render = () => {
      requestAnimationFrame( render );
      renderer.render( scene.current, camera.current );
    }
    render();
  }, []);
  return <canvas id="renderer" style={{position:"fixed",top:0,left:0}}/>
}