vol.1 まずは簡単なサンプルを作ろう！｜three.js 入門｜基本から解説！
「three.js」に興味あるWebデザイナーさん、コーダーさん、エンジニアさんに向けて、「three.js 入門 基本から解説！」を開始します！通信速度が理論値で100倍も速くなると言われる、第5世代モバイル通信｢5G｣。5G時代にはWebサイトの作り方も大きく変わっていくと予想されています。
3DCGライブラリと一般的に注目されている、three.js。Web業界のクライアントワークで3DでWebサイトを構築する案件は多くありません。しかしながら、画像、動画に今までにはできなかったエフェクト、アニメーションを実装できることに注目を浴び、世界に目をむければ「three.js」を使用したエフェクト、アニメーションを実装したウェブサイトが、どんどん公開されはじめています。
そこでJob Stageは「three.js」入門編を皆様にむけて展開していきます。
初回のvol.1は、「three.js」の基本中の基本を解説！
興味ある方は是非ご一読ください。
three.js公式サイト見たことない方はこちらから公式サイトをご覧ください。
最初にサンプルをご覧ください！
今回のサンプルを最初に、こちらからご覧ください。
グリーン色が一面に表示されています。ちなみにJob StageのロゴはHTML上でレイアウトしているので、three.jsには関係ありません。
この設定方法を今回は理解していきましょう。グリーン色を全面に表示するだけでも今までのHTML、CSSとは全く違ったコードの書き方になります。基本中の基本なので、必ず理解してくださいね。
three.jsの基本的な設定
まず、three.jsを読み込みます。（cdnjsにアップされています。）cdnjsはこちらから。HTML上で読み込むだけで設定完了です。jQueryもTweenMaxも現段階では必要ありません。
次に、基本的な流れを理解しましょう。
1. ステージを作成
2. カメラを作成
3. レンダラーを作成
この流れです。
1.ステージを作成
最初に、ステージを作成する必要があります。IllustratorやPhotoshopに例えると「新規ドキュメント」の作成にあたります。この3D空間のステージにオブジェクトをレイアウトしていくのです。
2.カメラを作成
IllustratorやPhotoshopと異なるのはステージを作成しても何も表示されません。そのステージを写すカメラの設定が必要になってきます。
3.レンダラーを作成
次に設定したカメラを「WebGLRenderer」「CanvasRenderer」のどちらで映し出すか？設定する必要があります。「three.js 入門」では「WebGLRenderer」を使用していきます。この耳慣れない「WebGLRenderer」「CanvasRenderer」の違いは
「WebGLRenderer」・・・GPUで演算を行うため、3Dグラフィックス処理において実行速度が早い。
「CanvasRenderer」・・・一般的に2Dグラフィックスを描画するときに使用する。
といった違いがあります。
よほどのことがない限り「WebGLRenderer」で問題ありません。
まとめ
最後に完成したJSファイルをこちらからご覧ください。
コメントで１つ１つのコードに解説を書いています。
最終更新日：
