threejs使用tweenjs实现点击标签过渡到相应视角

效果图：

1.点击前

2.点击后

说明：效果就是我在给模型打标签时保存视角和坐标，点击标签的时候读取到坐标数据，再转动到对应视角。

1.安装 TWEEN

npm install --save @tweenjs/tween.js

2.在当前页引入

import TWEEN from "@tweenjs/tween.js";

3.添加标注时，将添加标注时的相机视角与模型的坐标进行保存（添加标注的逻辑在我之前的博客）

 // 创建标签createLableObj (text, vector) {let laberDiv = document.createElement('div');//创建div容器laberDiv.className = 'laber_name';// laberDiv.textContent = text;laberDiv.innerHTML = `<div class='label_count'><span class='close'>X</span>${text}</div>`// 给标签设置坐标位置laberDiv.setAttribute("data-point", JSON.stringify(camera.position))laberDiv.setAttribute("data-place", JSON.stringify(this.controls.target))let pointLabel = new CSS2DObject(laberDiv);pointLabel.position.set(vector.x, vector.y, vector.z);return pointLabel;},

4.监听标签点击事件，

// 监听标签盒子内的标签点击事件let _this = this;document.getElementsByClassName("allLabel")[0].addEventListener('click', function (e) {// 选中当前标签时显示详情if (e.target.className == "laber_name") {// 获取标签的坐标let labelPoint = JSON.parse(e.target.getAttribute("data-point"));// 获取创建标签时的中心点let labelPlace = JSON.parse(e.target.getAttribute("data-place"));// let newControlsPoint = { x: 0, y: 0, z: 0 },//中心点为场景中间_this.animateCamera(camera.position, _this.controls.target, labelPoint, labelPlace, e)}// 点击取消时隐藏标签详情if (e.target.className == 'close') {// 回到初始状态_this.initPoint()}}, true)

5.坐标过渡

// 模型角度变化函数animateCamera (oldP, oldC, newP, newC, e) {let _this = this;var p1 = {x1: oldP.x,y1: oldP.y,z1: oldP.z,x2: oldC.x,y2: oldC.y,z2: oldC.z,}var p2 = {x1: newP.x,y1: newP.y,z1: newP.z,x2: newC.x,y2: newC.y,z2: newC.z,}var tween = new TWEEN.Tween(p1).to(p2, 1800);//第一段动画var update = function (object) {camera.position.set(object.x1, object.y1, object.z1);_this.controls.target.set(object.x2, object.y2, object.z2);camera.lookAt(0, 0, 0);//保证动画执行时，相机焦距在中心点_this.controls.enabled = false;_this.controls.update();};tween.onUpdate(update);// 动画完成后的执行函数tween.onComplete(() => {_this.controls.enabled = true; //执行完成后开启控制//这一段是为了实现点击标签时，高亮当前标签所在的模块，但是有问题，后期再说，不需要的可以删掉if (e) {_this.events.pickPosition.x = e.clientX / renderer.domElement.clientWidth * 2 - 1;_this.events.pickPosition.y = -(e.clientY / renderer.domElement.clientHeight * 2) + 1;// 点击区域高亮显示_this.pickEvents('show', _this.events.pickPosition, scene, camera, obj => {// obj.material.emissive.setHex(0xEA3639)// obj.userData.checked = !obj.userData.checked;// if (!obj.userData.checked) {//   // 恢复默认颜色//   obj.material.emissive.setHex(_this.events.pickedObjectSavedColor)// } else {//   // 将其发射颜色设置为闪烁的红色/黄色//   obj.material.emissive.setHex(0xFF3443)// }})}});tween.easing(TWEEN.Easing.Quadratic.InOut);tween.start();},

重点：需要在动画中加入这么一行，才能开启过渡效果

threejs使用tweenjs实现点击标签过渡到相应视角相关推荐

iframe的属性及其简单使用（点击标签切换页面）
iframe的相关属性详细内容参考:HTML <iframe> 标签属性值描述 align left right top middle bottom 不赞成使用.请使用样式代替. ...
MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白
MyEclipse导入主题文件epf后xml及jsp等页面中点击标签之后显示灰白,症状如下: 解决方案如下:
html在文本框中显示内容,js如何实现点击标签文字，文字在文本框出现
js实现点击标签文字,文字出现在文本框里,下面2种方法实现的功能略有不同,总体来说方法一功能更强大. 第一种方法:随意点击任何标签都会出现在文本框中,如何第二次点击标签,对应的文字就会在文本框中消失. ...
Android viewPager2 + fragment 模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)
可以实现的方式:BottomNavigationView 这里我们不使用BottomNavigationView,手动来写代码先看一下效果 fragment + viewPager2模拟微信首页2( ...
VUE使用Three.js实现模型，点击交互，相机旋转视角跟随移动（Threejs中使用Tweenjs，含demo源码）
目录一.Three.js是什么? 二.VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8. ...
h5jumppage.php,h5使用webviewjsbridge跟原生交互，点击标签调用2次webview
问题描述使用vue循环一个标签列表,点击列表里面的标签,调用app给的跳转页面的方法,第一次跳转页面后,点击返回按钮回到本页面,再次点击列表里面的标签,调用了2次webview,只有第一次点击的时候 ...
html怎样创建复选框,如何使用可点击标签创建HTML复选框
方法1:包装标签将复选框包装在 label 标记内: Text 方法2:使用for属性使用 for 属性(匹配复选框 id ): Text NOTE :页面上的ID必须是唯一的! 解释由于其他答 ...
vue + threejs 给3D模型添加label标签（dom的方式）
webGL.js封装的代码. const THREE = window.THREE; // webGL对象配置 export const webglOBJ = {renderDom: null,Sce ...
Threejs之粒子动画/点击交互
随意粒子动画管道扫光柱点击事件粒子动画 function createParticle() {var geometry = new THREE.Geometry();var mouse = ...

threejs使用tweenjs实现点击标签过渡到相应视角

效果图：

threejs使用tweenjs实现点击标签过渡到相应视角相关推荐

最新文章

热门文章