VUE使用轮播图画3D模型图

使用vue的组件和three.js画出3d模型图

直接上代码，有问题评论区联系吧，经常在线。qq:2277655147

<template><div class="card text-center m-b-20"><div class="card-body text-muted" ><h4 class="mt-0 header-title" style="font-weight: bold;font-size: 20px; height: 40px;">{{equipmentTitle}}</h4><div class="paramPanel" v-show="sensorModel.sphereModel"><el-row><label>{{sensorModel.sensorName}}：{{sensorModel.sensorValue}}</label></el-row></div><el-carouseltrigger="click":autoplay="false":height="modelHeight"arrow="always"@change="equipmentChange"><el-carousel-item v-for="(item,index) in equipmentData" :key="index"  ><div ref="panel3d"  :style="'height: '+modelHeight"></div></el-carousel-item></el-carousel></div></div><!--<div ref="panel3d"  style="height: 31vh;"></div>-->
</template>
<script>import * as THREE from 'three'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'import { STLLoader } from 'three/examples/jsm/loaders/STLLoader'import * as TWEEN from '../../../Tween.js';export default {// props:['pointsInfo','sensorModel','equipmentTitle','parentActiveName','parentMethod','styleHeight'],/**equipmentData：3d模型所需要的标题和监测点数据* equipmentChangeParent：设备变化之后的方法* sensorChangeParent：传感器变化之后的方法* styleHeight：3d模型的高度* initHighLight：是否初始化高亮*/props:['equipmentData','equipmentChangeParent','sensorChangeParent','styleHeight','initHighLight'],data() {let temp_height=this.styleHeight;if(!this.styleHeight){temp_height='35vh';}return{//3d图scene: null,camera: null,raycaster: null,renderer: null,controls: null,material: null,mesh: null,INTERSECTED: null,INTERSECTEDForcus: null,pointsInfo: [],points: null,pointShells: null,width: 0,height: 0,//固定模型modelInfo:{path:'/big.STL',position:{x:108,y:0,z:-137,},rotation:'-90',scale:'0.052',},//模型的高度modelHeight:temp_height,//轮播图第一个sensorModel:{sphereModel:false,sensorName:'',sensorValue:'',},//变压器标题equipmentTitle:'',//所有监测点parentActiveName:'',//展示的第几个index:0,//所有的模型indexs:[]}},watch:{'equipmentTitle'(value){if(value==this.parentActiveName){if(this.points){if(!this.INTERSECTED){this.sensorModel.sphereModel=false;return false;}for(let i = 0; i < this.points.children.length; i++){if(this.points.children[i] == this.INTERSECTED){this.sensorModel.sphereModel=true;this.sensorModel.sensorName=this.pointsInfo[i].sensorName;this.sensorModel.sensorValue=this.pointsInfo[i].sensorValue;}}}}},},created() {this.getData();},methods: {getData(){this.$nextTick(function() {if(this.equipmentData[this.index]){this.equipmentTitle=this.equipmentData[this.index].equipmentName;this.init3DModel(this.index);this.pointsInfo=this.equipmentData[this.index].sensor;}// this.equipmentData.forEach((value, index)=> {// });this.sphere();if(this.initHighLight){this.initMouseDown();}});},initMouseDown(){if(this.points.children[this.index]){let point= this.points.children[this.index];this.INTERSECTED = point;this.INTERSECTEDForcus = false;this.highLight();}},init3DModel(index){this.width = this.$refs.panel3d[index].clientWidth;this.height = this.$refs.panel3d[index].clientHeight;//初始化场景this.scene = new THREE.Scene();this.scene.background = new THREE.Color( 0x1B4B9D );//0x006699this.scene.fog = new THREE.FogExp2( 0x006699, 0.0007 );//初始化相机配置this.camera = new THREE.PerspectiveCamera(70, this.width / this.height, 1, 10000);this.camera.position.set(600, 300, 0);let tempLookAt = this.scene.position;tempLookAt.y = -160;this.camera.lookAt(tempLookAt);this.raycaster = new THREE.Raycaster();//初始化渲染器this.renderer = new THREE.WebGLRenderer( { alpha: true } );this.renderer.setClearColor( 0x0000FF, 0 );this.renderer.setPixelRatio(window.devicePixelRatio);this.renderer.setSize(this.width, this.height);this.$refs.panel3d[index].appendChild(this.renderer.domElement);//光源let light = new THREE.AmbientLight(0x888888, 0.6);this.scene.add(light);let directionalLight = new THREE.DirectionalLight(0x888888, 1.1);directionalLight.position.set(300, 1000, 500);directionalLight.target.position.set(0, 0, 0);directionalLight.castShadow = true;let d = 300;directionalLight.shadow.camera = new THREE.OrthographicCamera(-d, d, d, -d, 500, 1600);directionalLight.shadow.bias = 0.0001;directionalLight.shadow.mapSize.width = directionalLight.shadow.mapSize.height = 1024;this.scene.add(directionalLight);directionalLight = new THREE.DirectionalLight(0x888888, 1.1);directionalLight.position.set(-300, -1000, -500);directionalLight.target.position.set(0, 0, 0);directionalLight.castShadow = true;d = 300;directionalLight.shadow.camera = new THREE.OrthographicCamera(-d, d, d, -d, 500, 1600);directionalLight.shadow.bias = 0.0001;directionalLight.shadow.mapSize.width = directionalLight.shadow.mapSize.height = 1024;this.scene.add(directionalLight);//网格var gridHelper = new THREE.GridHelper(600, 60);this.scene.add(gridHelper);//控制器this.controls = new OrbitControls(this.camera, this.renderer.domElement);this.controls.enableDamping = true;this.controls.dampingFactor = 0.25;this.controls.rotateSpeed = 0.35;//添加事件window.addEventListener('resize', this.onWindowResize, false);this.loop();//模型材质this.material = new THREE.MeshPhysicalMaterial({color: 0xB0C4DE,metalness: 0,roughness: 0.5,reflectivity: 0.5,envMap: null});this.points = new THREE.Object3D();this.pointShells = new THREE.Object3D();let loader = new STLLoader();let _this = this;loader.load(_this.modelInfo.path, function(geometry) {_this.mesh = new THREE.Mesh(geometry, _this.material);_this.mesh.position.set(_this.modelInfo.position.x, _this.modelInfo.position.y, _this.modelInfo.position.z);_this.mesh.scale.set(_this.modelInfo.scale, _this.modelInfo.scale, _this.modelInfo.scale);_this.mesh.rotation.set(0, (_this.modelInfo.rotation / 180) * Math.PI, 0);_this.mesh.castShadow = true;_this.mesh.receiveShadow = true;_this.mesh.name = 'model';_this.scene.add(_this.mesh);_this.renderer.domElement.addEventListener('mousedown', _this.onDocumentMouseDown, false);});},sphere(){if(this.scene && this.pointsInfo){this.pointsInfo.forEach(info=>{if(info.position){var sphereGeo = new THREE.SphereGeometry(4, 8, 8);//创建球体var sphereMat = new THREE.MeshLambertMaterial({//创建材料color:0x00FF00,wireframe:false});var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型sphereMesh.position.set(info.position.x,info.position.y,info.position.z);//设置球的坐标sphereMesh.name = info.id;this.points.add(sphereMesh);var sphereMat = new THREE.MeshLambertMaterial({//创建材料color:0x00FF00,opacity: 0, transparent: true});var sphereGeo = new THREE.SphereGeometry(20, 20, 20);//创建球体var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型sphereMesh.position.set(info.position.x,info.position.y,info.position.z);//设置球的坐标sphereMesh.name = info.id;this.pointShells.add(sphereMesh);}});this.scene.add(this.points);this.scene.add(this.pointShells);}},loop() {requestAnimationFrame(this.loop);TWEEN.update();this.render();},render(){if(this.renderer){this.renderer.render(this.scene, this.camera);}},startTween(pointPosition, cameraPosition){var x = pointPosition.x;var newX = cameraPosition.x;var y = pointPosition.y;var newY = cameraPosition.y;var z = pointPosition.z;var newZ = cameraPosition.z;var _this = this;new TWEEN.Tween( this.camera.position ).to( {x: newX,y: newY,z: newZ} ).easing( TWEEN.Easing.Linear.None ).onUpdate( function () {_this.camera.lookAt(pointPosition.x, pointPosition.y-160, pointPosition.z);_this.controls.target.set(x, y-160, z);} ).onComplete( function () {_this.camera.lookAt(pointPosition.x, pointPosition.y-160, pointPosition.z);_this.controls.update();} ).start();},highLight(){if(this.points){for(let i = 0; i < this.points.children.length; i++){this.points.children[i].material.emissive.setHex(0x000000);if(this.points.children[i] == this.INTERSECTED){this.points.children[i].material.emissive.setHex(0xff0000);//原来位绿色，加上红色为黄色if(this.INTERSECTEDForcus == false){this.startTween(this.points.children[i].position, this.pointsInfo[i].camera);this.INTERSECTEDForcus = true;this.sensorModel.sphereModel=true;this.sensorModel.sensorName=this.pointsInfo[i].sensorName;this.sensorModel.sensorValue=this.pointsInfo[i].sensorValue;if(this.sensorChangeParent){this.sensorChangeParent(this.pointsInfo[i].code,this.equipmentData[this.index].code,this.pointsInfo[i].sensorAllValue);}}}}}},onDocumentMouseDown(event){let mouse = new THREE.Vector2();event.preventDefault();let tempRect = this.renderer.domElement.getBoundingClientRect();mouse.x = ((event.clientX-tempRect.left)/this.width) * 2 - 1;mouse.y = -((event.clientY-tempRect.top)/this.height) * 2 + 1;this.raycaster.setFromCamera(mouse, this.camera);let intersects = this.raycaster.intersectObjects(this.pointShells.children);if (intersects.length > 0) {let point;for(let i = 0; i < this.points.children.length; i++){if(this.points.children[i].name == intersects[ 0 ].object.name){point = this.points.children[i];}}if(intersects.length > 0 && this.INTERSECTED != point) {this.INTERSECTED = point;this.INTERSECTEDForcus = false;this.highLight();}//失去焦点的时候else if(intersects.length > 0 && this.INTERSECTED == point){//取消焦点和位置数据this.INTERSECTED = null;this.INTERSECTEDForcus = false;//改变颜色this.highLight();// //设置摄像头的位置this.camera.position.set(400, 300, 0);// //设置查看的位置let tempLookAt = this.scene.position;tempLookAt.y = -160;this.camera.lookAt(tempLookAt);//取消注释this.sensorModel.sphereModel=false;}}},onWindowResize(){if(!this.$refs.panel3d[this.index]){return false;}this.width = this.$refs.panel3d[this.index].clientWidth;this.height = this.$refs.panel3d[this.index].clientHeight;this.camera.aspect = this.width / this.height;this.camera.updateProjectionMatrix();this.renderer.setSize(this.width, this.height);},equipmentChange(newIndex,oldIndex){this.index=newIndex;//延时清除一下旧的canvas,setTimeout(function (){document.getElementsByTagName('canvas')[oldIndex].remove();},600);//标题this.equipmentTitle=this.equipmentData[newIndex].equipmentName;//监测点信息this.pointsInfo=this.equipmentData[newIndex].sensor;//场景this.init3DModel(newIndex);//球this.sphere();//对应当前选中的值清除一下this.sensorModel.sphereModel=false;//父类方法调用if(this.equipmentChangeParent){this.equipmentChangeParent(this.equipmentData[newIndex].code,this.equipmentData[newIndex]);}},}};
</script>

VUE使用轮播图画3D模型图相关推荐

3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
vue实现轮播图代码
这是一段简单的 Vue 实现轮播图的代码: <template><div><div class="carousel"><transitio ...
用vue做轮播图关于require的用法
一开始,我用html做的页面,头部是轮播图,效果很好. 页面展示图片如下: 代码如下: <!DOCTYPE html> <html lang="en">&l ...
Vue——图片轮播组件
Notices: 这是我一个项目中的一个子组件,要展示的数据.图片地址等的都在父组件data中.所以后面的讲述都是基于从父组件获取的参数进行处理.(如需将这个SlideShow写成一个单独的主组件,将 ...
python绘制3d图-python3利用Axes3D库画3D模型图
Python3利用Axes3D库画3D模型图,供大家参考,具体内容如下最近在学习机器学习相关的算法,用python实现.自己实现两个特征的线性回归,用Axes3D库进行建模. python代码 im ...
xs资料网-产品设计图档下载_proe玩具车3D模型图档下载creo4.0汽车模型下载中磊教育...
现在设计产品的还是有相当一大部分人是用proe造型的,之前我们一直做的是UG的产品造型,今天给大家介绍一款玩具车的3d模型,喜欢的可以下载下载自己研究研究, 中磊教育产品设计教程 proe玩具车3D模 ...
python画3d图-python3利用Axes3D库画3D模型图
Python3利用Axes3D库画3D模型图,供大家参考,具体内容如下最近在学习机器学习相关的算法,用python实现.自己实现两个特征的线性回归,用Axes3D库进行建模. python代码 im ...
Vue实现轮播的方法
Vue实现轮播的方法 1.定义图片数组 2.添加图片索引 3.绑定src属性(v-bind) 4.图片切换逻辑 html代码如下: <!DOCTYPE html> <html lan ...

VUE使用轮播图画3D模型图

使用vue的组件和three.js画出3d模型图

VUE使用轮播图画3D模型图相关推荐

最新文章

热门文章