https://threejs.org/

three.js というウェブブラウザ上でリアルタイムレンダリングによる3次元CGを描画できるライブラリがある。

https://hukurouo-voxel.netlify.app/

↑こんなのが作れる。3時間くらいかかった。

目標はボクセルアート的なやつでもぞクリキャラを作ることでやっていきたいと思います。

カメラでグリグリ動かせたり、軽いアニメーションを動かしたりしたい･･････。

ボクセルアートはこんな感じのやつです。かわいい～。

今日はthree.jsの基本を勉強した。

• doc #1
  • three.js で何かを表示させたいときに必要なパーツ
    • scene
    • camera
      • 何種類かのカメラがあるが、今回は PerspectiveCamera について
      • 変数は以下の４つ
        • 視野角（単位は角度）
        • アスペクト比
        • 描画限界値（far）
        • 描画限界値（near）
    • renderer
      • より低い解像度でレンダリングしたい場合は、updateStyle（第3引数）としてfalseを指定してsetSizeを呼び出すこと setSize(window.innerWidth/2, window.innerHeight/2, false) は、<canvas> の幅と高さが 100% の場合、アプリを半分の解像度でレンダリングする
  • 物質を作る
    • まずは geometry を作成する。今回は BoxGeometry() というキューブのすべての点 (頂点) と塗りつぶし (面) を含むオブジェクトを使う
    • 色を付けるためにMeshBasicMaterialを使う。すべてのマテリアルは、それらに適用されるプロパティのオブジェクトを受け取ることができる
    • これらを2つを変数にとり、Meshオブジェクトを作成する
    • デフォルトでは、scene.add()を呼び出すと、追加するものは座標(0,0,0)に追加されます。これにより、カメラとキューブの両方が互いに内側になってしまいます。これを回避するには、カメラを少しずらします。
  • レンダリングとアニメーション function animate() {
    • 画面が更新されるたびにレンダラーがシーンを描画するループを作成している（一般的な画面では、1秒間に60回描画される）
    • requestAnimationFrameには多くの利点があります。おそらく最も重要なのは、ユーザーが別のブラウザタブに移動したときに一時停止することで、貴重な処理能力とバッテリーの寿命を無駄にしないということでしょう。
  • 有用なコンポーネントは、examples/jsmディレクトリに含まれており、importすることで利用可能。カスタマイズも可能。

ボクセルアート自体は、MagicaVoxelというツールで作るのがよさそう。明日はそちらの使い方を勉強してみよう。