12周年記念パーティ開催! 2024/5/10(金) 19:00

three.js入門

全11回

3D描画に特化したJSライブラリ、three.jsの入門シリーズです。

第11回 シャドウ

光源がオブジェクトに遮られることで作られる、「影(シャドウ)」を設定します。影がつくと、3Dの表現がグッと向上します。

第10回 クラシックライト

オブジェクトを照らす光源となる、ライトオブジェクトを解説します。光源の方向や角度など、照らし方に応じていくつかのクラスが用意されています。

第9回 環境マップとIBL

オブジェクトの反射の材料として利用する、環境マップを解説します。環境マップは光源としても利用されるので、物体の色に強く影響を与えます。

第8回 テクスチャマップ:その他

「テクスチャ」は、単に3Dモデルに色を付けるだけでなく、その用途に応じてさまざまなものがあり、マテリアルの表現を豊かにします。デモを通して、表現にどのように作用するか見てみましょう。

第7回 テクスチャマップ:map

テクスチャマップのうち、ほとんどのマテリアルでサポートされているカラーマップを見ていきます。マテリアルに質感を与えるほか、面の透明度も設定できます。

第6回 テクスチャ

色のサンプリングなどに使われるテクスチャオブジェクトを解説します。カラーテクスチャを例に、作成から、繰り返しや拡大/縮小などのオプションを見てみましょう。

第5回 基本的な3Dオブジェクト:マテリアル編

three.jsにおいて、メッシュを構成する要素である「マテリアル」について見ていきます。光源を用いた3Dらしい陰影のある描画、現実世界に近いリアルな描画など、さまざまな表現が可能です。

第4回 基本的な3Dオブジェクト:ジオメトリ編

three.jsコアのビルトイン機能だけで実現できる、プリミティブ図形を表示してみましょう。プリミティブな図形の応用用途を知っておくと、それを組み合わせてさまざまな3Dシーンを構築することができます。

第3回 カメラコントロール

three.jsでカメラに自由に動かすための方法を解説します。まずは、カメラ操作に関する用語を知っておきましょう。ウェブ上で動くものとはいえ、基本的な考え方は実際のカメラワークと同様です。

第2回 カメラの配置

three.jsでの3Dシーンは、カメラに写した結果を描画します。PerspectiveCameraとOrthographicCameraという2種類のカメラの配置と、その違いを見てみましょう。

第1回 three.jsの基本セットアップ

3D描画に特化したJSライブラリ、three.jsを基本から解説します。第1回では、サンプルコードを見て、three.jsがどのようにセットアップされているか、大まかなところを捉えてみましょう。