three.js 对象绕任意轴旋转--模拟门转动

今天郭先生说说对象如何绕任意轴旋转。说一说其中一种方法，也是比较容易理解的一种，它的原理就是将子对象放到一个盒子中，然后改变子对象相对于父对象的位置（因为子对象的原点默认还是在盒子的中心），最后转动盒子，这样子对象的旋转就不是绕盒子的中心了。如图所示。在线案例点击模拟门旋转。

说到这里就不得不说THREE.Group对象了，除了isGroup和type这两个属性，它几乎和Object3D是相同的。其目的是使得组中对象在语法上的结构更加清晰。它的作用就像一个容器。

下面说一下主要代码（为了练习，门框使用THREE.Geometry()）

var geometry = new THREE.Geometry();//新建门框的几何体
var vertices = [
    new THREE.Vector3(-30, 70, 4), new THREE.Vector3(30, 70, 4), new THREE.Vector3(30, -70, 4), new THREE.Vector3(-30, -70, 4),
    new THREE.Vector3(-30, 70, -4), new THREE.Vector3(30, 70, -4), new THREE.Vector3(30, -70, -4), new THREE.Vector3(-30, -70, -4),
    new THREE.Vector3(-27, 67, 4), new THREE.Vector3(27, 67, 4), new THREE.Vector3(27, -67, 4), new THREE.Vector3(-27, -67, 4),
    new THREE.Vector3(-27, 67, -4), new THREE.Vector3(27, 67, -4), new THREE.Vector3(27, -67, -4), new THREE.Vector3(-27, -67, -4),
];
var faces = [
    new THREE.Face3(0, 8, 9), new THREE.Face3(0, 9, 1), new THREE.Face3(1, 9, 10), new THREE.Face3(1, 10, 2),
    new THREE.Face3(2, 10, 11), new THREE.Face3(2, 11, 3), new THREE.Face3(3, 11, 8), new THREE.Face3(3, 8, 0),
    new THREE.Face3(4, 5, 13), new THREE.Face3(4, 13, 12), new THREE.Face3(5, 6, 14), new THREE.Face3(5, 14, 13),
    new THREE.Face3(6, 7, 15), new THREE.Face3(6, 15, 14), new THREE.Face3(7, 4, 12), new THREE.Face3(7, 12, 15),
    new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6),
    new THREE.Face3(1, 2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(0, 4, 7), new THREE.Face3(0, 7, 3),
    new THREE.Face3(9, 8, 12), new THREE.Face3(9, 12, 13), new THREE.Face3(14, 15, 11), new THREE.Face3(14, 11, 10),
    new THREE.Face3(13, 14, 10), new THREE.Face3(13, 10, 9), new THREE.Face3(12, 8, 11), new THREE.Face3(12, 11, 15),
];
geometry.vertices = vertices;//几何体添加顶点数组
geometry.faces = faces;//几何体添加面数组
geometry.computeFaceNormals();//计算 face normals 值。
var material = new THREE.MeshPhongMaterial({ color: 0x330000, shininess: 40 });//新建和门搭调的材质
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = -27;//x方向偏移27，是门宽的一般
mesh.position.y = 70;//将门框偏移一定的单位
group.add(mesh);//在group中添加门框

var doorGeom = new THREE.BoxGeometry(54, 134, 6);//新建门的几何体，注意这里的门宽度为54
var texture = new THREE.TextureLoader().load(require('../assets/images/base/door.jpg'));//创建一个纹理贴图
var doorMate = new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 200, specular: 0x090909, map: texture });//为门添加一个高光材质和纹理贴图
var doorMesh = new THREE.Mesh(doorGeom, doorMate);
doorMesh.position.x = -27;//给门添加偏移量和门框相同
doorMesh.position.y = 70;
doorGroup.add(doorMesh);//将门添加到doorGroup中
group.add(doorGroup);然后将doorGroup添加到group中

group.position.x = 27;//因为之前的所有都添加了-27的偏移量，为了保证门在世界坐标系的中心，我在将门的Group的x方向平移27。
scene.add(group);//最后将scene中添加group。

接下来可以添加tween动画进行开关门的动画，这里就不多说了。

转载请注明地址：郭先生的博客