Three.js メモ

任意のジオメトリ生成

THREE.Geometryを使う。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var geometry = new THREE.Geometry(); // ジオメトリオブジェクトを生成

// 頂点を追加する
geometry.vertices.push(new THREE.Vector3(0,0,0)); // 0
geometry.vertices.push(new THREE.Vector3(1,0,0)); // 1
geometry.vertices.push(new THREE.Vector3(0,1,0)); // 2
geometry.vertices.push(new THREE.Vector3(1,1,0)); // 3

// 面を生成
geometry.faces.push(new THREE.Face3(0,1,2));
geometry.faces.push(new THREE.Face3(1,3,2));

// ジオメトリのUVを設定（面→点の構造）
geometry.faceVertexUvs[0] = [
    [
        new THREE.Vector2(0.0, 0.0), // 0
        new THREE.Vector2(1.0, 0.0), // 1
        new THREE.Vector2(0.0, 1.0), // 2
    ],
    [
        new THREE.Vector2(1.0, 0.0), // 1
        new THREE.Vector2(1.0, 1.0), // 3
        new THREE.Vector2(0.0, 1.0), // 2
    ]
];

プレーンのジオメトリ

1
THREE.PlaneBufferGeometry(window.innnerWidth, window.innerHeight);

GUIを使う

dat.gui

Three.jsのexampleでよく使われている機能。

インポート

1
import {GUI} from 'dat.gui.module.js';

初期化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var guiData ={
    ValueInt : 5,
    Valuefloat: 0.2,
};

var gui = new GUI({width: 350});

gui.add(guiData, 'ValueInt')
    .name("整数値") // ラベル
    .min(0)         // 最小値 
    .max(10)        // 最大値
    .step(1)        // ステップ数（整数値なら1にすればOK）
    .onChange(onChangeIntValue); // 値が変わった時に呼ばれるコールバック関数

Stats

three.jsのlibsに入っているFPSカウンター。

インポート

1
import Stats from './js/libs/stats.module.js'; // パスは任意

初期化と表示

1
2
3
4
5
6
7
8
9
// コンテナ作成Bodyに追加
container = document.createElement('div');
document.body.appendChild(container);

var stats = new Stats();
container.appendChild(stats.dom);

// アップデート処理
stats.update();

ウィンドウのサイズが変わった時の描画エリアのサイズ更新

1
2
3
4
5
6
7
window.addEventListener('resize', onWindowResize, false);

function onWindowResize(){
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth/ window.innerHeight;
    camera.updateProjectionMatrix();
}

GLSL

inverse, transposeがないっぽい？

three.jsのサンプルでも使っておらず、inverseは自分で定義していた。自分で作らないといけない。

走り書き

setRenderTarget　レンダリング先のFBOを設定できる

renderer.render(scene, camera) 指定のシーンを指定のカメラでレンダリング

renderer.clear() 通常のバッファをクリアしている。カラーバッファ、デプスバッファ、ステンシル

EffectComposerの使い方

ポストプロセスエフェクトを掛けるときなど、マルチパスでレンダリングを行いたいときに使用できるExampleに入っているライブラリ。 three.jsで後処理効果を実装するために使用されます。このクラスは、一連のポストプロセッシングパスを管理して、最終的な視覚結果を生成します。後処理パスは、追加/挿入の順に実行されます。最後のパスは自動的に画面にレンダリングされます。

1
2
3
4
5
// EffectComposerのインポート
import { EffectComposer } from './jsm/postprocessing/EffectComposer.js'

// Passの追加
import { RenderPass } from './jsm/postprocessing/RenderPass.js';

描画先のレンダーターゲットと、レンダラーをセットする

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
var parameters = 
{
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: false
};

// レンダーターゲットの設定
var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters);

effectComposer = new EffectComposer(renderer, renderTarget);

var scenePass = new RenderPass( scene, camera, undefined, undefined, undefined);
scenePass.clear = false;

var delta = clock.getDelta();

// エフェクトコンポーザーのレンダリング
effectComposer.addPass(delta);

RenderPass,

EffectComposerにPassを追加してレンダリングする。