THREE.Geometryを使って描画をまとめる

THREE.Geometryメモ

===初歩的なメモ

同じマテリアルを使った要素において、描画のデータをまとめる事で高速化が図れる

js.js

var geometry = new THREE.Geometry();

今回は画像のデータを一度に描画をしてみるので
※画像データの読み込み方古い方法です。すいません

js.js

var texture = THREE.ImageUtils.loadTexture('bricks.jpg', null, function() {renderer.render(scene, camera);});
var material = new THREE.MeshBasicMaterial( {map:texture,side: THREE.DoubleSide});

これで描画用の情報ができたので今度はGeometryを用意する

js.js

for(var i = 0 ; i < 10 ; i++){
      var geo = new THREE.PlaneGeometry(500, 500);
      var ground = new THREE.Mesh( geo );
      ground.position.y = -300;
      ground.position.z = 1600-200*i;
      geometry.mergeMesh(ground);
}

これは画像をz軸で並べて、正面だと見えないので下に埋めただけのデータ

geometry.mergeMesh(ground);をするたびに、geometryと結合を繰り返してくれる

js.js

scene.add(new THREE.Mesh(geometry, material));

そして描画

materialが同じであれば高速化ができる。