155. TWEEN.JS点按钮,相机飞行靠近观察设备

embedded/2024/12/3 3:51:08/

实际开发的的时候,一个较大的三维场景,有很多不同的设备或物品,你可能希望通过UI按钮点击切换到不同视角,观察某个区域,或者说放大观察某个特定的物品或设备。

按钮

切换相机位置和视角的按钮

javascript"><div class="pos"><div id="A" class="bu">设备A</div><div id="B" class="bu" style="margin-left: 10px;">设备B</div><div id="car" class="bu" style="margin-left: 10px;">停车场</div><div id="all" class="bu" style="margin-left: 10px;">整体</div>
</div>

点击按钮A,相机运动到设备A附近

点击按钮A,相机运动到工厂中设备A附近,同时把相机观察目标,逐渐切换到设备A

javascript">import TWEEN from '@tweenjs/tween.js';
function render() {TWEEN.update();requestAnimationFrame(render);
}
render();

如果你希望相机移动到场景中某个位置附近,可以在Blender三维建模中,创建一个空对象进行标注,本节课模型用的是原来标注标签的空对象。当然你也可以直接读取某个模型的世界坐标。

获取某个对象世界坐标,作为相机lookAt指向的新目标观察点。

javascript">const A = model.getObjectByName('设备A标注');
const pos = new THREE.Vector3();
//获取三维场景中某个对象世界坐标
A.getWorldPosition(pos);

相机位置相对目标观察点,适当偏移,希望观察的范围大,就距离远一点,希望观察的设备显示效果大,就距离设备近一点。

javascript">// 向量的x、y、z坐标分别在pos基础上增加30
const pos2 = pos.clone().addScalar(30);

相机的位置逐渐改变,相机的观察目标也逐渐改变。

javascript">// 切换到设备A预览状态
document.getElementById('A').addEventListener('click', function () {const A = model.getObjectByName('设备A标注');const pos = new THREE.Vector3();A.getWorldPosition(pos); //获取三维场景中某个对象世界坐标// 相机飞行到的位置和观察目标拉开一定的距离const pos2 = pos.clone().addScalar(30);//向量的x、y、z坐标分别在pos基础上增加30// 相机从当前位置camera.position飞行三维场景中某个世界坐标附近new TWEEN.Tween({// 相机开始坐标x: camera.position.x,y: camera.position.y,z: camera.position.z,// 相机开始指向的目标观察点tx: 0,ty: 0,tz: 0,}).to({// 相机结束坐标x: pos2.x,y: pos2.y,z: pos2.z,// 相机结束指向的目标观察点tx: pos.x,ty: pos.y,tz: pos.z,}, 2000).onUpdate(function (obj) {// 动态改变相机位置camera.position.set(obj.x, obj.y, obj.z);// 动态计算相机视线camera.lookAt(obj.tx, obj.ty, obj.tz);}).start();
})

考虑OrbitControls的影响

如果你在项目中使用了相机控件OrbitControls,希望相机looAt()指向的目标改变以后,该相机控件让然可以正常使用。需要在动画结束.onComplete()的时候重新设置controls.target,或者.onUpdate()更新controls.target

javascript">.onUpdate(function (obj) {...camera.lookAt(obj.tx, obj.ty, obj.tz);
})
.onComplete(function(obj){controls.target.set(obj.tx, obj.ty, obj.tz);controls.update();
})

或者.onUpdate()中,设置controls.target,并执行controls.update()OrbitControls相机控件内部也会执行相机的.looAt()方法,完整相机视线重新计算,这样就不用执行camera.lookAt(obj.tx, obj.ty, obj.tz)

实际开发,相机目标观察点初始状态,不一定就是坐标原点,再设置动画初始目标观察点的时候,可以直接访问controls.target的x、y、z属性获取。

javascript">.onUpdate(function (obj) {// 动态改变相机位置camera.position.set(obj.x, obj.y, obj.z);// 动态计算相机视线// camera.lookAt(obj.tx, obj.ty, obj.tz);controls.target.set(obj.tx, obj.ty, obj.tz);controls.update();
})

封装一个相机动画函数

这样所有的按钮点击后,都可以调用该函数。

动画开始的相机位置和目标观察点,不要手写具体数字,通过相机对象camera.position和相机控件对象读取controls.target,这样不管你点击那个按钮,动画开始状态都是上次相机动画结束的状态。

javascript">// 相机动画函数,从A点飞行到B点,A点表示相机当前所处状态
// pos: 三维向量Vector3,表示动画结束相机位置
// target: 三维向量Vector3,表示相机动画结束lookAt指向的目标观察点
function createCameraTween(endPos,endTarget){new TWEEN.Tween({// 不管相机此刻处于什么状态,直接读取当前的位置和目标观察点x: camera.position.x,y: camera.position.y,z: camera.position.z,tx: controls.target.x,ty: controls.target.y,tz: controls.target.z,}).to({// 动画结束相机位置坐标x: endPos.x,y: endPos.y,z: endPos.z,// 动画结束相机指向的目标观察点tx: endTarget.x,ty: endTarget.y,tz: endTarget.z,}, 2000).onUpdate(function (obj) {// 动态改变相机位置camera.position.set(obj.x, obj.y, obj.z);// 动态计算相机视线// camera.lookAt(obj.tx, obj.ty, obj.tz);controls.target.set(obj.tx, obj.ty, obj.tz);controls.update();//内部会执行.lookAt()}).start();
}

设置设备A、设备B、停车场、整体预览四个按钮对应的相机动画,这样你可以在4个按钮之间,随意切换相机的观察状态。

javascript">// 切换到设备A预览状态
document.getElementById('A').addEventListener('click', function () {const A = model.getObjectByName('设备A标注');const pos = new THREE.Vector3();A.getWorldPosition(pos); //获取三维场景中某个对象世界坐标// 相机飞行到的位置和观察目标拉开一定的距离const pos2 = pos.clone().addScalar(30);createCameraTween(pos2, controls.target)
})
// 切换到设备B的预览状态
document.getElementById('B').addEventListener('click', function () {const B = model.getObjectByName('设备B标注');const pos = new THREE.Vector3();B.getWorldPosition(pos); //获取三维场景中某个对象世界坐标// 相机飞行到的位置和观察目标拉开一定的距离const pos2 = pos.clone().addScalar(30);// 相机从当前位置camera.position飞行三维场景中某个世界坐标附近createCameraTween(pos2, controls.target)
})// 切换到设备停车场的预览状态
document.getElementById('car').addEventListener('click', function () {const car = model.getObjectByName('停车场标注');const pos = new THREE.Vector3();car.getWorldPosition(pos); //获取三维场景中某个对象世界坐标// 相机飞行到的位置和观察目标拉开一定的距离const pos2 = pos.clone().addScalar(30);// 相机从当前位置camera.position飞行三维场景中某个世界坐标附近createCameraTween(pos2, pos)
})// 相机整体预览对应的位置和观察目标
const cameraPos0 = new THREE.Vector3(202, 123, 125) 
const target0 = new THREE.Vector3(0, 0, 0);
// 切换整体预览状态
document.getElementById('all').addEventListener('click', function () {// 相机从当前位置camera.position回到整体预览状态createCameraTween(cameraPos0, target0)
})

http://www.ppmy.cn/embedded/142503.html

相关文章

MySQL数据库做题笔记

题目链接https://leetcode.cn/problems/invalid-tweets-ii/description/https://leetcode.cn/problems/invalid-tweets-ii/description/ # Write your MySQL query statement below SELECT tweet_id FROM Tweets where LENGTH(content)>140 OR (length(content)-length(rep…

【linux】(23)对象存储服务-MinIo

MinIO 是一个高性能的对象存储服务&#xff0c;兼容 Amazon S3 API。 Docker安装MinIo 前提条件 确保您的系统已经安装了 Docker。如果还没有安装 Docker&#xff0c;可以参考 Docker 官方文档进行安装。 1. 拉取 MinIO Docker 镜像 首先&#xff0c;从 Docker Hub 拉取 Mi…

将jar包导入maven

1.将jar包放repository 2.执行命令&#xff1a;mvn install:install-file -DgroupIdcom.oracle -DartifactIdojdbc7 -Dversion12.1.0.2 -Dpackagingjar -DfileD:\dev\utils\idea\repository\ojdbc7.jar -Dfile: 指定要安装的JAR文件的路径。 -DgroupId: 指定项目的groupId。 -…

【Maven】项目创建

3. Maven的应用 本章主要内容&#xff1a; 使用 Maven 创建 JavaSE 项目使用 Maven 创建 JavaWeb 项目&#xff0c;在本地部署 Tomcat 测试导入 Maven 项目 3.1 基于Maven开发JavaSE的项目 3.1.1 流程 1、File—>new—>Project—>Empty Project Location&#xff1…

数据库原理-期末复习基础知识第二弹

1、数据的逻辑独立性是指 外模式/模式映像 当模式改变的时候&#xff0c;由数据库管理员对各个外模式/模式的映像做出相应改变&#xff0c;使外模式保持不变。由于应用程序是按照外模式进行编写的&#xff0c;故应用程序不必修改&#xff0c;保证了数据与程序的逻辑独立性。 …

【Unity How】如何让物体跟随平台移动或旋转?

先看下最终要实现的效果&#xff1a; 当查找这个问题的资料时&#xff0c;发现多数的方案都是将物体设置为平台的子对象。 但是如果平台是非均匀缩放时&#xff0c;物体在移动或旋转时就会发生变形。 参考&#xff1a;Unity中父对象是非均匀缩放时出现倾斜或剪切现象 那有没有…

(4)CHATGPT-3和GPT-4是生成式AI的一部分吗?

文章目录 前言ChatGPT-3 和 GPT-4被认为是生成式AI的原因后续 前言 ChatGPT-3 和 GPT-4 都是大型语言模型&#xff08;LLMs&#xff09;&#xff0c;也是生成式AI&#xff08;生成式人工智能&#xff09;的例子。它们属于一类称为transformers的模型&#xff0c;特别擅长处理数…

使用ECharts创建带百分比标注的环形图

在数据可视化领域&#xff0c;环形图是一种非常有效的图表类型&#xff0c;它能够清晰地展示各部分与整体的关系。今天&#xff0c;我们将通过ECharts来创建一个带百分比标注的环形图&#xff0c;并详细解释如何实现这一效果。 1. 数据准备 首先&#xff0c;我们定义了一些基础…