Three.js メモ¶
objファイルの読み込み¶
htmlにて以下のスクリプトを読み込む
<script src="js/LoaderSupport.js"></script>
<script src="js/OBJLoader2.js"></script>
javascriptにて以下のようにロードする
// ローダーをインスタンス化
const objLoader = new THREE.OBJLoader2();
// ファイルの読み込みが終わった際のコールバック関数を設定
const callbackOnLoad = (event) => {
// event.detail.lorderRootNodeから読み込んだ情報を取得できる。
let rootNode = event.detail.loaderRootNode;
// メッシュを取得したい場合は、rootNoodeのChildrenから取得できる。
// オブジェクトが一つで、それにマテリアルを設定する例
rootNode.children[0].material = new THREE.MeshNormalMaterial();
// シーンにはルートノードを追加してやればよい。
scene.add(rootNode);
};
// objファイルをロードする。
objLoader.load( 'model/teapot.obj', callbackOnLoad, null, null, null, false );
カスタムシェーダのnormalMatrix¶
ShaderMaterialを用いてカスタムシェーダーを作成した際に、
vertexShaderに定義されるnormalMatrixは、法線をビュー座標系のものに変換するためのもの。
モデルビュー行列の逆転置行列になっている。
スケーリングしている場合、変換後はnormalizeが必要。
Three.jsの光源の減衰の計算¶
デフォルトではthree.jsの点光源の減衰は以下の感じで求めてる。
(-光源からオブジェクトの距離 /光の最大の届く距離) + 1
これを0~1の範囲にクランプし減衰率を累乗する。
光の最大の届く距離 = decay = 0(無限に光が届く)場合は無条件で1を返す。
のpunctualLightIntensityToIrradianceFactorを参照
HDRI, CubeMap周りのサンプル¶
①Three.jsにて Equirectangularの画像からCubeMapを作成する例(非HDRI)
② Equirectangularの画像をそのまま環境マップとして利用する例 (非HDRI)
②に関して自分でシェーダー書くなら以下のリンクも参考になりそう
パノラマ画像からの環境マッピング
③HDRIのテクスチャを読み込む例
④HDRIのCubeMapを読み込む例
gitのthree.js/examples/js/loaders/にあるRGBELoader.jsにてHDRI画像が読み込めるようになるようだ。
また、同フォルダのHDRCubeTextureLoader.jsは、RGBELoader.jsを使い
HDRIのCubeMapを作成するためのクラスとして利用できる。