Threejs实现开门关门动画

1，介绍

该示例使用的是 r95版本Three.js库。

主要实现功能：模拟开门关门动画。效果图如下：

 

2，动画主要说明

1，使用THREE.BoxGeometry创建几何体。

2，引用纹理THREE.TextureLoader进行材质创建THREE.MeshPhongMaterial

3，创建物体THREE.Mesh并引用几何体和材质

4，设置物体绕Y轴旋转实现动画，这里需要注意的是物体旋转是以自身中心进行旋转的，所以这里需要把几何体THREE.BoxGeometry平移自身宽度的一半，这样物体中心就是THREE.BoxGeometry几何体的边缘。

createDoor(100, 180, 2, 0, -700, 90, 700, "左门");
createDoor(100, 180, 2, 0, -500, 90, 700, "右门");


//创建门
function createDoor(width, height, depth, angle, x, y, z, name) {
	var loader = new THREE.TextureLoader();

	var doorgeometry = new THREE.BoxGeometry(width, height, depth);
	var doormaterial_left = new THREE.MeshPhongMaterial({
		map: loader.load("assets/textures/door_left.png")
	});
	doormaterial_left.opacity = 1.0;
	doormaterial_left.transparent = true;
	var doormaterial_right = new THREE.MeshPhongMaterial({
		map: loader.load("assets/textures/door_right.png")
	});
	doormaterial_right.opacity = 1.0;
	doormaterial_right.transparent = true;

	var doormaterialArr = [];
	if (name.indexOf("左门") > -1) {
        // 设置偏移
		doorgeometry.translate(50, 0, 0);
		doormaterialArr = [doormaterial_left, doormaterial_left, doormaterial_left,
			doormaterial_left, doormaterial_left, doormaterial_right
		];
	} else {
        // 设置偏移
		doorgeometry.translate(-50, 0, 0);
		doormaterialArr = [doormaterial_right, doormaterial_right, doormaterial_right,
			doormaterial_right, doormaterial_right, doormaterial_left
		];
	}

	var door = new THREE.Mesh(doorgeometry, doormaterialArr);
	door.position.set(x, y, z);
	door.rotation.y += angle * Math.PI; //-逆时针旋转,+顺时针
	door.name = name;
	scene.add(door);
}

使用Tween.js实现动画， 监听键盘“O”键实现开门效果，“C”键实现关门效果

document.onkeydown = function(event) {
	var l1 = scene.getObjectByName("左门");
	var r1 = scene.getObjectByName("右门");
	// 打开
	if (event.keyCode == 79) {
		new TWEEN.Tween({
				lv: 0,
				rv: 0,
			})
			.to({
				lv: -0.5 * Math.PI,
				rv: 0.5 * Math.PI,
			}, 1000)
			.easing(TWEEN.Easing.Bounce.Out)
			.onUpdate(function() {
				l1.rotation.y = this.lv;
				r1.rotation.y = this.rv;
			})
			.start();
	}
	// 关闭
	if (event.keyCode == 67) {
		new TWEEN.Tween({
				lv: -0.5 * Math.PI,
				rv: 0.5 * Math.PI,
			})
			.to({
				lv: 0,
				rv: 0,
			}, 1000)
			.easing(TWEEN.Easing.Bounce.Out)
			.onUpdate(function() {
				l1.rotation.y = this.lv;
				r1.rotation.y = this.rv;
			})
			.start();
	}
}

纹理素材如下