Threejs实现相机视角切换，平滑过渡，点击模型切换到查看模型视角-阿里云开发者社区

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

2022-10-19 2607

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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);
  }
}