three.js的組合與合並，raycaster射線無法獲取group

1.組合

　　創建一個組非常簡單，在組中添加子元素的效果是，你可以對組進行移動、縮放和變形，而所有的子對象都會受到影響。使用組的時候，你依然可以引用、修改每一個單獨的幾何體。但是，使用raycaster射線是無法獲取組group，只能獲取組中的元素。

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

var cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

var cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
var group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );

scene.add( group );

 

2.合並

　　組里的對象還是獨立的，需要對它們分別進行處理和渲染。通過合並可以將多個幾何體合並起來，創建一個幾何體，可以提升性能。最大的缺陷是失去了對單個對象的控制。想要移動、旋轉、或者縮放某個方塊是不可能的。

　　合並后的組可以通過raycaster射線獲取合並后的結合體。

//創建建築
createBuilding:function(obj){
  var width = obj.width || 4;//建築長
  var height = obj.height || 1;//建築高
  var depth = obj.depth || 2;//建築寬
  var floor = obj.depth || 5;//樓層數量
  
  var groupGeometry = new THREE.Geometry();

  for(var i=0;i<floor;i++){
    var geometry = new THREE.BoxGeometry(width, height, depth);
    var material = new THREE.MeshLambertMaterial({ color: 0x696969 });
    var box = new THREE.Mesh(geometry, material);
    box.position.set(0, height*i+height/2+0.02*i, 0);

    box.updateMatrix();
    groupGeometry.merge(box.geometry, box.matrix);
  }

  var group = new THREE.Mesh(groupGeometry, new THREE.MeshLambertMaterial({ color: 0x696969 }))
  group.name="movealbe-element-" + new Date().getTime();
  return group;
}