VUE+THREE.JS 点击模型相机缓入查看模型相关信息

点击模型相机缓入查看模型相关信息

  • 1.引入
  • 2.初始化CSS3DRenderer
  • 3.animate 加入一直执行渲染
  • 4.点击事件
    • 4.1 初始化renderer时加入监听事件
    • 4.2 触发点击事件
  • 5. 关键代码分析
    • 5.1 移除模型
    • 5.2 创建模型上方的弹框
    • 5.3 相机缓入动画
    • 5.4 动画执行

1.引入

引入模型所要呈现的3DSprite精灵模型，优势在于可以随着视野的变化，跟随方向变化，大小是近大远小的模式

import { CSS3DRenderer, CSS3DSprite } from "three/examples/jsm/renderers/CSS3DRenderer.js";
import TWEEN from "@tweenjs/tween.js";//相机缓入动画

在这里插入图片描述

2.初始化CSS3DRenderer

// 初始化 CSS3DRenderer 设备信息框initObjectRender() {labelRender = new CSS3DRenderer();labelRender.setSize(this.$refs.draw.offsetWidth, this.$refs.draw.offsetHeight);labelRender.domElement.style.position = "absolute";labelRender.domElement.style.top = "0px";labelRender.domElement.style.pointerEvents = "none";document.getElementById("workshop").appendChild(labelRender.domElement);},

3.animate 加入一直执行渲染

labelRender.render(scene, camera);
TWEEN.update();

4.点击事件

4.1 初始化renderer时加入监听事件

renderer.domElement.addEventListener("click", this.onClick, false);

4.2 触发点击事件

//监听点击事件
onClick(event) {const raycaster = new THREE.Raycaster();const mouse = new THREE.Vector2();// 计算鼠标或触摸点的位置mouse.x = (event.clientX / this.$refs.draw.offsetWidth) * 2 - 1;mouse.y = -(event.clientY / this.$refs.draw.offsetHeight) * 2 + 1;// 更新射线   注意——> camera 是相机   定义到data里的raycaster.setFromCamera(mouse, camera);// 计算与所有对象的交点const intersects = raycaster.intersectObjects(scene.children, true);if (intersects.length > 0) {//获取点击模型的相关信息//以下为我的处理逻辑const interObj = intersects[0].object;//获取模型名称，此名称是用blender创建模型时,创建的名称const interName = this.getParentName(interObj);//模型的位置const interPoint = intersects[0].point;if (interName) {this.removeOthersEqp(interName); //移除此设备以外的设备this.getEqpInfo(interName, interObj, interPoint); //获取设备信息} else {console.log("获取世界坐标", interPoint.x, ",", interPoint.y, ",", interPoint.z);}}
},
//获取点击的设备名称
getParentName(data) {if (!data) {return;}const regex = /[^\_\)]+(?=\()/g;const eqpEnCode = data.name.match(regex);return eqpEnCode?.length > 0 ? eqpEnCode[0] : this.getParentName(data.parent);
},
//移除此设备以外的设备
removeOthersEqp(interName) {const meshes = scene.children.filter((o) => {return o.name !== `${interName}EqpInfo` && o.name.indexOf("EqpInfo") > -1;});meshes.forEach((l) => {l.remove(...l.children);});scene.remove(...meshes);
},
//获取设备信息
toolTipGroup: new THREE.Group(),//弹框参数
getEqpInfo(interName, interObj, interPoint) {// 获取设备详细信息let params = {system: "",enCode: interName,};getEqpInfoReq(params).then((res) => {if (res.code === 200) {const { encode, oeeStatus, taktTime, yield: resYield } = res.result;const shpereMesh = this.createCpointMesh(`${interName}EqpInfo`, interObj.position.x, interObj.position.y + 1000, interObj.position.z);this.toolTipGroup.add(shpereMesh);//关闭弹框标签const closeInfo = document.createElement("div");closeInfo.setAttribute("style", "width:100%;padding: 0.5rem 0.5rem 0 0;text-align:right");closeInfo.innerHTML = "<i class='iconfont icon-yuyinguanbi' style='font-size:0.5rem;color:#27eeea;cursor: pointer;'></i>";//弹框点击关闭事件closeInfo.onclick = function (event) {const meshes = scene.children.filter((o) => {return o.name === `${interName}EqpInfo`;});meshes.forEach((l) => {l.remove(...l.children);});scene.remove(...meshes);event.cancelBubble = true;};//基础信息展示const cardBaseInfo = `<div class='base-infos'><div class='base-info'><span class='name'>编码:</span><span>${encode}</span></div><div  class='base-info'><span class='name'>名称:</span><span>${interObj.name.match(/[^\(\)]+(?=\))/g)[0]}</span></div><div class='base-info'><span class='name'>状态:</span><span>${oeeStatus}</span></div></div>`;//设备其他信息const cardOthersInfo = `<div class='base-infos'><div class='base-info'><span class='name'>Yield:</span><span>${resYield}%</span></div><div class='base-info'><span class='name'>TaktTime:</span><span>${taktTime}</span></div></div>`;const cardInfo = document.createElement("div");cardInfo.style.padding = "0 0 1rem 0";cardInfo.innerHTML = cardBaseInfo + cardOthersInfo;const pContainer = document.createElement("div");pContainer.id = `${interName}EqpInfo`;pContainer.className = "workshop-tooltip";pContainer.style.pointerEvents = "none"; //避免HTML标签遮挡三维场景的鼠标事件pContainer.appendChild(closeInfo); //关闭按钮pContainer.appendChild(cardInfo); //基础信息const cPointLabel = new CSS3DSprite(pContainer);// cPointLabel.scale.set(5, 5, 5); //根据相机渲染范围控制HTML 3D标签尺寸cPointLabel.rotateY(Math.PI / 2); //控制HTML标签CSS3对象姿态角度cPointLabel.position.set(interObj.position.x, interObj.position.y + 1000, interObj.position.z);cPointLabel.name = `${interName}EqpInfo`;scene.add(cPointLabel);//相机位置移动this.handlePosition(interPoint, true);}});
},
//创建基础模型
createCpointMesh(name, x, y, z) {const geo = new THREE.BoxGeometry(0.1);const mat = new THREE.MeshBasicMaterial({ color: 0xff0000 });const mesh = new THREE.Mesh(geo, mat);mesh.position.set(x, y, z);mesh.name = name;return mesh;
},
// 动态调整相机位置
handlePosition(targetPosition, falg) {// 计算点击位置与当前相机位置之间的向量const direction = new THREE.Vector3().subVectors(targetPosition, camera.position);// 计算相机与目标位置之间的距离let distance = camera.position.distanceTo(targetPosition);// 以某种方式将距离转换为缩放因子let scaleFactor = falg ? this.functionOfDistance(distance) : 0;// 缩放向量，使其稍远一点// const scaleFactor = 0.5; // 缩放因子，可以根据需要进行调整const offset = direction.multiplyScalar(scaleFactor);const finalPosition = camera.position.clone().add(offset);// 创建 Tween 实例const startPosition = camera.position.clone();const duration = 1000; // 动画持续时间，单位毫秒tween = new TWEEN.Tween(startPosition).to(finalPosition, duration).onUpdate(() => {// 更新相机位置camera.position.copy(startPosition);camera.lookAt(targetPosition);}).start();
},
//计算距离
functionOfDistance(distance) {// 设定最小和最大距离以及对应的缩放因子const minDistance = 4100;const maxDistance = 18000;const minScaleFactor = 0;const maxScaleFactor = 0.8;if (distance < minDistance) {return minScaleFactor;} else if (distance > maxDistance) {return maxScaleFactor;}// 根据距离范围内的比例，计算缩放因子const ratio = (distance - minDistance) / (maxDistance - minDistance);return minScaleFactor + ratio * (maxScaleFactor - minScaleFactor);
},

5. 关键代码分析

5.1 移除模型

  • 1.获取想要移除的模型名称
const meshes = scene.children.filter((o) => {return o.name !== `${interName}EqpInfo` && o.name.indexOf("EqpInfo") > -1;
});
  • 2.移除模型的子模型
meshes.forEach((l) => {l.remove(...l.children);
});
  • 3.移除模型
scene.remove(...meshes)

5.2 创建模型上方的弹框

  • 1.创建基础模型
const shpereMesh = this.createCpointMesh(`${interName}EqpInfo`, interObj.position.x, interObj.position.y + 1000, interObj.position.z);//创建基础模型
createCpointMesh(name, x, y, z) {const geo = new THREE.BoxGeometry(0.1);const mat = new THREE.MeshBasicMaterial({ color: 0xff0000 });const mesh = new THREE.Mesh(geo, mat);mesh.position.set(x, y, z);mesh.name = name;return mesh;
},
  • 2.创建动态div,渲染到基础模型中

由于我这里是一个弹框，我希望他能够点击关闭，所以多加了个关闭事件

  • 2.1 关闭按钮的渲染及触发
//关闭弹框标签
const closeInfo = document.createElement("div");
closeInfo.setAttribute("style", "width:100%;padding: 0.5rem 0.5rem 0 0;text-align:right");
closeInfo.innerHTML = "<i class='iconfont icon-yuyinguanbi' style='font-size:0.5rem;color:#27eeea;cursor: pointer;'></i>";
//弹框点击关闭事件
closeInfo.onclick = function (event) {const meshes = scene.children.filter((o) => {return o.name === `${interName}EqpInfo`;});meshes.forEach((l) => {l.remove(...l.children);});scene.remove(...meshes);event.cancelBubble = true;
};
  • 2.2 弹框信息显示

注意：pContainer.style.pointerEvents = "none"; //避免HTML标签遮挡三维场景的鼠标事件必须要写这个 要不然会导致模型无法推拽移动

//基础信息展示
const cardBaseInfo = `<div class='base-infos'><div class='base-info'><span class='name'>编码:</span><span>${encode}</span></div><div  class='base-info'><span class='name'>名称:</span><span>${interObj.name.match(/[^\(\)]+(?=\))/g)[0]}</span></div><div class='base-info'><span class='name'>状态:</span><span>${oeeStatus}</span></div></div>`;
//设备其他信息
const cardOthersInfo = `<div class='base-infos'><div class='base-info'><span class='name'>Yield:</span><span>${resYield}%</span></div><div class='base-info'><span class='name'>TaktTime:</span><span>${taktTime}</span></div></div>`;const cardInfo = document.createElement("div");
cardInfo.style.padding = "0 0 1rem 0";
cardInfo.innerHTML = cardBaseInfo + cardOthersInfo;const pContainer = document.createElement("div");
pContainer.id = `${interName}EqpInfo`;
pContainer.className = "workshop-tooltip";
pContainer.style.pointerEvents = "none"; //避免HTML标签遮挡三维场景的鼠标事件
pContainer.appendChild(closeInfo); //关闭按钮
pContainer.appendChild(cardInfo); //基础信息const cPointLabel = new CSS3DSprite(pContainer);
// cPointLabel.scale.set(5, 5, 5); //根据相机渲染范围控制HTML 3D标签尺寸
cPointLabel.rotateY(Math.PI / 2); //控制HTML标签CSS3对象姿态角度
cPointLabel.position.set(interObj.position.x, interObj.position.y + 1000, interObj.position.z);
cPointLabel.name = `${interName}EqpInfo`;
scene.add(cPointLabel);

5.3 相机缓入动画

动态的缩放因子是为了避免弹框占满整个屏幕，使其稍远一点，默认是1

// 动态调整相机位置
handlePosition(targetPosition, falg) {// 计算点击位置与当前相机位置之间的向量const direction = new THREE.Vector3().subVectors(targetPosition, camera.position);// 计算相机与目标位置之间的距离let distance = camera.position.distanceTo(targetPosition);// 以某种方式将距离转换为缩放因子let scaleFactor = falg ? this.functionOfDistance(distance) : 0;// 缩放向量，使其稍远一点// const scaleFactor = 0.5; // 缩放因子，可以根据需要进行调整const offset = direction.multiplyScalar(scaleFactor);const finalPosition = camera.position.clone().add(offset);	
},
  • 动态缩放因子的获取

也不能将缩放因子固定，因为当相近模型点击时，弹框会越来越近，直至占满整个屏幕，
所以：设定最小的距离和最大的距离，当模型相对于相机距离远，就设定缩放因子为0.8，
模型相对相机距离近，就设定缩放因子为0，表示不缩放

//计算距离
functionOfDistance(distance) {// 设定最小和最大距离以及对应的缩放因子（可视情况调整）const minDistance = 4100;const maxDistance = 18000;const minScaleFactor = 0;const maxScaleFactor = 0.8;if (distance < minDistance) {return minScaleFactor;} else if (distance > maxDistance) {return maxScaleFactor;}// 根据距离范围内的比例，计算缩放因子const ratio = (distance - minDistance) / (maxDistance - minDistance);return minScaleFactor + ratio * (maxScaleFactor - minScaleFactor);
},

5.4 动画执行

// 创建 Tween 实例
const startPosition = camera.position.clone();
const duration = 1000; // 动画持续时间，单位毫秒
tween = new TWEEN.Tween(startPosition).to(finalPosition, duration).onUpdate(() => {// 更新相机位置camera.position.copy(startPosition);camera.lookAt(targetPosition);}).start();

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/255600.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

temu分析数据软件:拼多多（Temu）商家数据分析软件

temu分析数据软件:拼多多（Temu）商家数据分析软件

在当今竞争激烈的电商市场中&#xff0c;了解市场趋势、优化产品和店铺运营、了解竞争对手等方面的数据分析变得至关重要。为了帮助拼多多商家更好地实现这些目标&#xff0c;拼多多推出了一款强大的数据分析工具——多多情报通&#xff08;原名&#xff1a;多多参谋&#xff0…
阅读更多...
数据结构与算法编程题50

数据结构与算法编程题50

假设不带权有向图采用邻接矩阵G存储&#xff0c;设计实现以下功能的算法。 &#xff08;1&#xff09;求出图中每个顶点的出度。 &#xff08;2&#xff09;求出图中出度为0的顶点数。 &#xff08;3&#xff09;求出图中每个顶点的入度。 //参考博客&#xff1a;https://blog.…
阅读更多...
高校需要哪些大数据实训平台？

高校需要哪些大数据实训平台？

当前&#xff0c;数据已成为重要的生产要素&#xff0c;大数据产业作为以数据生成、采集、存储、加工、分析、服务为主的战略性新兴产业&#xff0c;是激活数据要素潜能的关键支撑&#xff0c;是加快经济社会发展质量变革、效率变革、动力变革的重要引擎。 泰迪大数据实验…
阅读更多...
外置固态硬盘配置

外置固态硬盘配置

1、插上usb外置硬盘盒 2、邮件我的此“电脑”选择“管理” 3、例如新增的固态硬盘如下&#xff1a; 4、这里我选择mrb(旧模式)而没选guid(新模式) 因为mrb兼容模式更加适合windows、ios等系统 5、右击未分区磁盘&#xff0c;选择新增卷区&#xff0c;一路下一步即可
阅读更多...
什么是磁盘克隆？它的作用有哪些？

什么是磁盘克隆？它的作用有哪些？

在数字化时代&#xff0c;数据的安全性和可靠性变得尤为重要。为了应对硬盘损坏、系统故障或升级的需求&#xff0c;磁盘克隆技术成为了一种不可或缺的工具。 什么是磁盘克隆 磁盘克隆又称为驱动器克隆&#xff0c;它是一种将一个硬盘上的所有数据、分区和文件系统完整复制到…
阅读更多...
java--枚举

java--枚举

1.枚举 枚举是一种特殊类 2.枚举类的格式 注意&#xff1a; ①枚举类中的第一行&#xff0c;只能写一些合法的标识符(名称)&#xff0c;多个名称用逗号隔开。 ②这些名称&#xff0c;本质是常量&#xff0c;每个常量都会记住枚举类的一个对象。 3.枚举类的特点 ①枚举类的…
阅读更多...
圣诞将至—C语言圣诞树代码来啦

圣诞将至—C语言圣诞树代码来啦

文章目录 圣诞将至—C实现语言圣诞树源码 圣诞将至—C实现语言圣诞树 圣诞树 源码 #define _CRT_SECURE_NO_WARNINGS#include <stdio.h> #include <math.h> #include <stdlib.h> #include <windows.h> #include <time.h> #define PI 3.14159265…
阅读更多...
pycharm使用Anaconda中的虚拟环境【我的入门困惑二】

pycharm使用Anaconda中的虚拟环境【我的入门困惑二】

Anaconda的作用 Anaconda的存在&#xff0c;使得一台电脑上可以存在多个不同版本的python和相应的包&#xff0c;这解决了多个项目运行时&#xff0c;所需要的python和包版本不同的问题。 本文内容 今天就来简单说说如何在pycharm使用Anaconda中的虚拟环境。 详细介绍 首先…
阅读更多...
flex布局的flex为1到底是什么

flex布局的flex为1到底是什么

参考博客&#xff1a;flex:1什么意思_公孙元二的博客-CSDN博客 flex&#xff1a;1即为flex-grow&#xff1a;1&#xff0c;经常用作自适应布局&#xff0c;将父容器的display&#xff1a;flex&#xff0c;侧边栏大小固定后&#xff0c;将内容区flex&#xff1a;1&#xff0c;内…
阅读更多...
docker安装配置prometheus+node_export+grafana

docker安装配置prometheus+node_export+grafana

简介 Prometheus是一套开源的监控预警时间序列数据库的组合&#xff0c;Prometheus本身不具备收集监控数据功能&#xff0c;通过获取不同的export收集的数据&#xff0c;存储到时序数据库中。Grafana是一个跨平台的开源的分析和可视化工具&#xff0c;将采集过来的数据实现可视…
阅读更多...
php循环遍历删除文件下文件和目录

php循环遍历删除文件下文件和目录

前言 今天在写一个demo的时候需要循环删除目录下文件。如下想删temp下文件和目录。 具体实现 private function deleteDir($dirPath){if (is_dir($dirPath)) {$contents scandir($dirPath);// 如果是空目录if (count($contents) 2) {rmdir($dirPath);return;}// 不是空目录f…
阅读更多...
一分钟教你弄懂KMP算法

一分钟教你弄懂KMP算法

问题背景 KMP算法主要应用与字符串的比较&#xff0c;有一个主串&#xff0c;有一个子串&#xff0c;我们要通过一种方式来查看子串是否为主串的一部分。我们通常的想法是&#xff1a;主串和子串左对齐&#xff0c;一个字符一个字符进行比较&#xff0c;如果其中有个字符不匹配…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023