TechnologyMemo

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 );

参考 https://threejs.org/examples/#webgl_loader_obj2

カスタムシェーダの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を作成するためのクラスとして利用できる。