徐州模板开发建站,列表页面设计模板,昆明网站优化公司,网页制作工具哪个好点击模型相机缓入查看模型相关信息 1.引入2.初始化CSS3DRenderer3.animate 加入一直执行渲染4.点击事件4.1 初始化renderer时加入监听事件4.2 触发点击事件 5. 关键代码分析5.1 移除模型5.2 创建模型上方的弹框5.3 相机缓入动画5.4 动画执行 1.引入 引入模型所要呈现的3DSprite… 点击模型相机缓入查看模型相关信息 1.引入2.初始化CSS3DRenderer3.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 classiconfont icon-yuyinguanbi stylefont-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 classbase-infosdiv classbase-infospan classname编码:/spanspan${encode}/span/divdiv classbase-infospan classname名称:/spanspan${interObj.name.match(/[^\(\)](?\))/g)[0]}/span/divdiv classbase-infospan classname状态:/spanspan${oeeStatus}/span/div/div;//设备其他信息const cardOthersInfo div classbase-infosdiv classbase-infospan classnameYield:/spanspan${resYield}%/span/divdiv classbase-infospan classnameTaktTime:/spanspan${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 classiconfont icon-yuyinguanbi stylefont-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 classbase-infosdiv classbase-infospan classname编码:/spanspan${encode}/span/divdiv classbase-infospan classname名称:/spanspan${interObj.name.match(/[^\(\)](?\))/g)[0]}/span/divdiv classbase-infospan classname状态:/spanspan${oeeStatus}/span/div/div;
//设备其他信息
const cardOthersInfo div classbase-infosdiv classbase-infospan classnameYield:/spanspan${resYield}%/span/divdiv classbase-infospan classnameTaktTime:/spanspan${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();
