Three.jsで勉強したことについて書いていく
NoiThree.js とは
Web上で3Dを表現するためのWebGLを簡単に操作できるようにするためのjavascriptライブラリ。
WebGLとは
プラグインを使用せずにインタラクティブな2次元および3次元のコンピュータグラフィックをレンダリングするためのJavaScript APIである[2]。WebGLはウェブ標準に完全に統合されているため、ウェブページのcanvas要素上でGPUアクセラレータを使用した物理シミュレーション、画像処理、画像効果などを表現できる。
Wikipedia - WebGL
スマホで例えるなら、たくさんアプリ入れなくても、設定から3次元モードに切り替えられるよー
みたいなことがすでにEdgeとかChromeとかに搭載されてるってことですね。
ちなみに人類の敵、IEも最新にしてたら一応対応しているみたいですね。
なぜThree.jsなのか
WebGLでできるならThree.jsでいいじゃんって思ったあなた。
その通りです。全然Three.jsじゃなくてWebGLで大丈夫です。
ただ、初学者がいきなりWebGLだと複雑で挫折してしまいがちなので、
まずはThree.jsで動かせるものを作ってから、
細かいレンダリングの性能とかシェーダーとか極めていきたい
ってなったらWebGLをそのまま書いていくのがいいのかなって思います。
注意事項
筆者はZenn初心者です。よくわからん挙動をしても生温かい目で見守っていてください。
Noi（編集中）
Javascriptのコード管理
JavaScriptは動的型付け言語で、コードを書いているとどうしても煩雑になってきてしまいます。
煩雑になるとコードを管理しきれなかったり、変更したときのエラーの対処にとても労力を割かれることになるので、そうならないために管理する方法をあらかじめ決めておく必要があります。
（ただ、ある程度大きなプロジェクトを作れるようになってから勉強するでもOK！ここを勉強する前にまずは自分で動くものを作るのが大事だったりします）
モジュール化
パソコン上のファイルは分かりやすくフォルダに入れて管理したりすると思います。
それと同じようにJavascriptコードも分かりやすいまとまりでくくって、管理することができます。
それをモジュール化する、と言ったりします。
ES6(ES2015)
おそらくこの書き方が現在の主流だと思われます。
インポート
import * as SampleModule from 'sampleModule.js';
もしくは
import { module } from 'sampleModule.js';
エクスポート
var module = (function () {
}) ();
export { module };
その他
パフォーマンス
テスト
参考文献
WebGLについて詳しく書かれているのでおすすめです。が、ちょっと難しいので中級～上級向きです。