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;

}

巴特西

three.js的组合与合并，raycaster射线无法获取group

1.组合

2.合并

最新文章

热门文章