Harekyon.comのページを更新しました

<p>## ページを更新した</p><p>このページ、更新頻度が低すぎて、正直何のために存在しているのかわからないよね。</p><p>あ、あけましておめでとうございます。今年で28歳になる...。社会人になって3年ほど経つけど、自分が本当に成長しているのか実感がない。おそらく成長していないのだろう。変化がゆっくりすぎて気づけないのかもしれないが、もっと明確に飛躍を感じられるようになりたい。そして、その過程をこのページに記録していきたい。</p><p>と言うわけで、新年早々少しだけ更新しました。</p><p>まず、ページトップ(<a href="http://harekyon.com" target="_blank" rel="noopener noreferrer nofollow">harekyon.com</a>)のボタンを押した後のページ遷移アニメーションをかっこよく…。(こういうところばかりこだわる)。これ良くないですか？是非、触ってみてください。</p><p>そして、Workページのデザインが無法地帯だったので変えてみました。かなりわかりやすくなったと思います。</p><p>TOPページにTIMELINEというボタンを追加しました。これは一年の目標と結果を残して、成長過程が追えるように作りました。新年と年末しか更新しない予定だけど、自分がどれだけ変化出来たか見れると良いな。</p>

ページを色々更新した

reactでthreejsを使っていると何故かwindow is not definedと表示される。原因はライブラリの中でwindowオブジェクトを使用しているため。useEffectの中でTHREEオブジェクトを使用することを推奨するが、すべてのTHREEオブジェクトでwindowが使われているわけではないので、rendereオブジェクトで解像度を指定するときなど、windowオブジェクトを使用しないものに関してはuseEffect外に記述しても問題ない。

<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>