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

简介: 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,源码和模型


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

目录
相关文章
|
图形学
Unity 3D还原Scene场景、市面多数游戏视角高度自定义、第三人称视角分离功能:平移、拖动、看向中心等
Unity视角的高度自定义 本文提供全流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) Chinar —— 心...
1613 0
【Unity3D--自由观察模型】模型自动旋转+触屏旋转和缩放
展示3D模型,同时实现模型自动旋转和触屏旋转和缩放
559 0
|
图形学
Unity在UI界面上显示3D模型/物体,控制模型旋转
Unity3D物体在UI界面的显示 本文提供全流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) Chinar —...
5211 0
|
人工智能 自然语言处理 算法
自由编辑人脸打光:基于生成模型的三维重光照系统上线
自由编辑人脸打光:基于生成模型的三维重光照系统上线
322 0
|
API UED 内存技术
教你一步一步实现图标无缝变形切换
教你一步一步实现图标无缝变形切换
|
图形学
[Unity3d]第一人称和第三人称视角完美切换
最近一直在搞3D漫游,在第一人称和第三人称视角切换碰到些问题,视角的例子我是导入的官方的character controller包,不得不佩服官方脚本语言的写法,看了一下写的很完美,新手估计比较难看懂,里面涉及到一些角度,还有向量等的计算,这就要求有一定的图形学的...
1288 0
An动画优化之传统引导层动画
An动画优化之传统引导层动画
924 0
|
机器学习/深度学习 自动驾驶 数据可视化
「分割一切」视频版来了:点几下鼠标,动态的人、物就圈出来了
「分割一切」视频版来了:点几下鼠标,动态的人、物就圈出来了
141 0
|
6月前
|
API
【threejs教程】场景视角切换的神器:轨道控制器
【8月更文挑战第5天】threejs教程:场景视角切换的神器,轨道控制器
390 1

热门文章

最新文章