前提

three.js Release r74 · mrdoob/three.js

課題

1つの要素なんだけど、諸般の事情により複数のGeometryとして定義されてしまっているものを、1つのGeometryとして作り直したい。

実例としては、GeoJsonで定義されている世界地図を、D3.jsで投影して、それをThree.jsに読み込ませるとき、国ごとに1つのオブジェクトになってしまっているので、おそらくGeometryの数だけ処理が重くなる。それを1つのGeometryにすることで、多少なりとも処理や管理を簡単にしたい。

手法

var geoms = getMultipleGeometries(); // returned multiple geometries, created yourself.

var merged_geom = new THREE.Geometry();
var matel = new THREE.MeshBasicMaterial();

$.each(geoms, function(i, geom ){
  // mergeするGeometryの座標管理のため、一旦Mesh化する
  var mesh = new THREE.Mesh( geom, matel);
  mesh.updateMatrix();
  
  merged_geom.merge( mesh.geometry, mesh.matrix);
});

var trueMesh = new THREE.Mesh( merged_geom, matel);
scene.add( trueMesh ); // scene is Scene instance in three.js

Meshを2度作らなきゃいけないのが納得できないが、THREE.GeometryUtils.merge()が廃止されたようなので、結局こうしないといけないっぽい。