Threejs实现相机视角切换，平滑过渡，点击模型切换到查看模型视角

1，介绍

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

主要实现功能：实现相机视角切换,平滑过渡。效果图如下：

​

2，主要说明

相机视角切换主要使用tween.js库实现，这个库可以很容易实现两个值之间进行过度，中间值都会自动计算出来，例如下方函数创建了TWEEN.Tween对象，这个对象会在1000毫秒内从当前坐标变换到目标坐标，变化方式可以是线性，指数性或者其他方式，可参考Tween.js / graphs   可以通过easing()方法配置变化效果。

// current1 相机当前的位置
// target1 相机的目标位置
// current2 当前的controls的target
// target2 新的controls的target
function animateCamera(current1, target1, current2, target2) {
	var tween = new TWEEN.Tween({
		x1: current1.x, // 相机当前位置x
		y1: current1.y, // 相机当前位置y
		z1: current1.z, // 相机当前位置z
		x2: current2.x, // 控制当前的中心点x
		y2: current2.y, // 控制当前的中心点y
		z2: current2.z // 控制当前的中心点z
	});
	tween.to({
		x1: target1.x, // 新的相机位置x
		y1: target1.y, // 新的相机位置y
		z1: target1.z, // 新的相机位置z
		x2: target2.x, // 新的控制中心点位置x
		y2: target2.y, // 新的控制中心点位置x
		z2: target2.z // 新的控制中心点位置x
	}, 1000);
	tween.onUpdate(function() {
		camera.position.x = this.x1;
		camera.position.y = this.y1;
		camera.position.z = this.z1;
		orbit.target.x = this.x2;
		orbit.target.y = this.y2;
		orbit.target.z = this.z2;
		orbit.update();
	})
	tween.easing(TWEEN.Easing.Cubic.InOut);
	tween.start();
}

点击物体调用animateCamera函数实现切换视角效果

function onDocumentMouseDown(event) {
	// 点击屏幕创建一个向量
	var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
		.innerHeight) * 2 + 1, 0.5);
	vector = vector.unproject(camera); // 将屏幕的坐标转换成三维场景中的坐标
	var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
	var intersects = raycaster.intersectObjects(scene.children, true);
	if (intersects.length > 0) {		
		// 随机坐标
		var x = Math.round((Math.random() * 100));
		var y = Math.round((Math.random() * 100));
		var z = 50;

		var x2 = Math.round((Math.random() * 50));
		var y2 = Math.round((Math.random() * 50));
		var z2 = 5;

		var pos = new THREE.Vector3(x, y, z);
		var pos2 = new THREE.Vector3(x2, y2, z2);
		intersects[0].object.material.color.set("#00aa00");
		animateCamera(camera.position, pos, orbit.target, pos2);
	}
}

 3，源码和模型

需要学习案例、模型或者其他源码，请进入博客首页查看其他文章或者留言

在线预览：左本的博客 (zuoben.top)