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，源码和模型
需要学习案例、模型或者其他源码，请进入博客首页查看其他文章或者留言
