郭先生今天说一说three.js的Box3方法(Box2是Box3的二维版本,可以参考Box3)。在线案例点击three.js Box3。
Box3在3D空间中表示一个包围盒。其主要用于表示物体在世界坐标中的边界框。它方便我们判断物体和物体、物体和平面、物体和点的关系等等。
构造器参数Box3( min : Vector3, max : Vector3 ),其参数为两个三维向量,第一个向量为Box3在3D空间中各个维度的最小值,第二个参数为Box3在3D空间中各个维度的最大值,代码如下。
var box = new THREE.Box3(new THREE.Vector3(-2,-2,-2), new THREE.Vector3(2,2,2));
这个box就表示3D空间中中心点在(0,0,0),长宽高为4的包围盒。
下面我们十分详细的说说他的属性和方法。
Box3只有三个属性。
下面是主要代码
setBox3() {
var boxGeometry = new THREE.BoxGeometry(30, 30, 30);
var sphereGoemetry = new THREE.SphereGeometry(3, 30, 20);
var sphereMaterial = new THREE.MeshBasicMaterial();
box = this.setMaterial(boxGeometry, 0x0000ff);//先生成一个立方体网格
box3 = new THREE.Box3().setFromObject(box);//根据几何体生成包围盒
sphere = new THREE.Mesh(sphereGoemetry, sphereMaterial);//在生成一个球形网格
scene.add(box);//添加到场景
scene.add(sphere);//添加到场景
this.render();
},
render() {
//让球动起来
sphere.position.y = Math.sin(time) * 16 + 8;
sphere.position.x = Math.cos(time) * 16 + 8;
time = time + 0.02;
sphereBox3 = new THREE.Box3().setFromObject(sphere);//动态生成球的包围盒(这里用了包围盒,没有用包围球,边边角角有些出入,不影响大体效果)
if(box3.containsBox(sphereBox3)) {
//如果box3包含sphereBox3
sphere.material.color = new THREE.Color(0x00ff00);
} else if(box3.intersectsBox(sphereBox3)) {
//如果box3交于sphereBox3
sphere.material.color = new THREE.Color(0xff00ff);
} else {
//如果sphereBox3在box3之外
sphere.material.color = new THREE.Color(0xffaa00);
}
renderer.render(scene, camera);
requestAnimationFrame(this.render);
}
转载请注明地址:郭先生的博客