react系列でthreejsを使う場合、useEffect内でcamera・scene・rendererを宣言します。useEffect外で使用すると、windowオブジェクトが使用できず、cameraとrendererのリサイズが出来なくなるためおすすめしません。

<h2 id="h9707d3a59a">概要</h2><p>react系列でthreejsを使う場合、useEffect内でcamera・scene・rendererを宣言します。useEffect外で使用すると、windowオブジェクトが使用できず、cameraとrendererのリサイズが出来なくなるためおすすめしません(定数であれば可能ですが...)。</p><p>Three.js自体はuseEffect外でも使えるのですが、windowに合わせて表示させたいため、そのためにはどうすればよいかを考えます(window使える場所どこ...?って話になる)</p><h3 id="hee60c27282">useEffect外でcamera, renderer, sceneを宣言してみる</h3><p>Three.jsの使い方というより、もはやReactの使い方になってしまいますが、windowオブジェクトはuseEffectの中でしか使えません。よって下記コードはwindow is not definedとなります。</p><div data-filename="pages/init.js"><pre><code class="language-javascript">import { useEffect } from &quot;react&quot;;
import * as THREE from &quot;three&quot;;

export default function Init() {
  let camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  let scene = new THREE.Scene();
  let renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.render(scene, camera);
  document.getElementById(&quot;__next&quot;).appendChild(renderer.domElement);
  return (
    &lt;&gt;
      useEffect外でcamera, renderer, sceneを宣言してみる
    &lt;/&gt;
  );
}</code></pre></div><h3 id="had8d324c93">useEffect内で宣言しよう</h3><p>useEffectはページが読み込み終了時に実行されるため、windowオブジェクトが使えます。rendererやcameraなどは良く使うためグローバル変数にするか、useRefを使うのが良いです。useRefの場合いちいちcurrentと書く必要があるのでグローバルにしてます。(懸念点があれば教えてくださいm(__)m)</p><div data-filename="pages/init.js"><pre><code class="language-javascript">import { useEffect } from &quot;react&quot;;
import * as THREE from &quot;three&quot;;

//effectの外で使う場合はここか、useRefで宣言する
let renderer, camera, scene;
export default function Init() {
  useEffect(() =&gt; {
    camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.render(scene, camera);
    document.getElementById(&quot;__next&quot;).appendChild(renderer.domElement);
  }, []);
  return (
    &lt;&gt;
      nextでthreejsを使う最低限のコード
    &lt;/&gt;
  );
}
</code></pre></div><p></p>

*:....:*' Harekyon '*:....:*

:....:' Harekyon ':....: