Skip to content

Z
zghywpc-vue
Commit a6617874 authored by 李苏's avatar 李苏 💬
Browse files
Options

解决缓存时渲染问题

parent 13fe4d02
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 10 deletions
public/index.html
View file @ a6617874
...@@ -198,6 +198,7 @@ ...@@ -198,6 +198,7 @@
<link rel="stylesheet" href="/vt/style/vt.css"> <link rel="stylesheet" href="/vt/style/vt.css">
<script src="/vt/libs/three.min.js"></script> <script src="/vt/libs/three.min.js"></script>
<script src="/vt/vt.js"></script> <script src="/vt/vt.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
......
src/views/yhlywsytst/yhlywsytst/index.vue
View file @ a6617874
...@@ -5,8 +5,27 @@ ...@@ -5,8 +5,27 @@
一回路异物溯源态势图 一回路异物溯源态势图
</div> </div>
<!-- 视角工具栏--> <!-- 视角工具栏-->
<div class="toolButton2">
<div class="flex1 text-center">
<el-select :popper-append-to-body='false' style="width: 100px;background-color: rgba(0, 0, 0, 0.0);" @change="flowPieDataChange" v-model="flowPieData" clearable placeholder="绘制流动">
<el-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }}
</el-option>
</el-select>
</div>
<div class="flex1 text-center">
<el-switch
style="color: #fff ;"
v-model="flowDirection"
active-text="正向"
inactive-text="反向">
</el-switch>
</div>
</div>
<div class="toolButton"> <div class="toolButton">
<div class="flex1 text-center"> <div class="flex1 text-center">
<span @click="reView"><i class="el-icon-view"></i>重置视角</span> <span @click="reView"><i class="el-icon-view"></i>重置视角</span>
</div> </div>
<div class="flex1 text-center"> <div class="flex1 text-center">
...@@ -15,6 +34,11 @@ ...@@ -15,6 +34,11 @@
<div class="flex1 text-center"> <div class="flex1 text-center">
<span @click="clearSelected"><i class="el-icon-circle-close"></i>清除选中</span> <span @click="clearSelected"><i class="el-icon-circle-close"></i>清除选中</span>
</div> </div>
<!-- <el-select @change="flowPieDataChange" v-model="flowPieData" clearable placeholder="请选择">
<el-option v-for="(item, index) in allPieData" :key="index" :value="item.name">
{{ item.name }}
</el-option>
</el-select> -->
</div> </div>
<!-- 左侧操作边框--> <!-- 左侧操作边框-->
<!-- <div class="leftOpt"> <!-- <div class="leftOpt">
...@@ -48,6 +72,7 @@ ...@@ -48,6 +72,7 @@
<div class="full"> <div class="full">
<!-- 一级内容--> <!-- 一级内容-->
</div> </div>
</div> </div>
</div> </div>
...@@ -107,14 +132,33 @@ ...@@ -107,14 +132,33 @@
}) })
this.init() this.init()
this.tdClick() this.tdClick()
this.getData()
}) })
}, },
beforeDestroy() { beforeDestroy() {
this.viewer.canRequestAnimationFrame = false this.viewer.canRequestAnimationFrame = false
}, },
deactivated(){
this.viewer.canRequestAnimationFrame = false
},
activated(){
try {
this.viewer.canRequestAnimationFrame = true
this.viewer.reInit()
}catch(e){
rconsole.error(e)
}
/* 开启渲染*/
},
data() { data() {
return { return {
flowDirection:true,
flowPieData: '',
/* 流向数据*/
allPieData: [],
selectedModel: { selectedModel: {
name: '' name: ''
}, },
...@@ -125,11 +169,121 @@ ...@@ -125,11 +169,121 @@
/* 模型加载器*/ /* 模型加载器*/
modelLoader: null, modelLoader: null,
/* */ /* */
reMaterialQue: [] reMaterialQue: [],
allFlowObject: []
} }
}, },
watch:{
flowDirection(){
if (this.allFlowObject) {
this.allFlowObject.forEach((item) => {
item.reverseMapRotation();
});
}
}
},
methods: { methods: {
flowPieDataChange(val){
this.handlerAllFlow()
},
/* 绘制流动方法
*/
handlerAllFlow() {
if (this.allFlowObject.length) {
this.allFlowObject.forEach((item) => {
item.removeFromParent();
});
this.allFlowObject = [];
}
const children = this.allPieData.find((item) => item.name === this.flowPieData)?.children;
if (!children) {
return;
}
children.forEach((item) => {
if (item.data.length >= 2) {
const o = this.drawPipe(
item.data.map((item) => [item.x, item.y, item.z]),
item.radius,
this.flowDirection,
);
o.traverse((node) => {
if (node.isMesh) {
node._thing_tag = "helper";
}
});
this.allFlowObject.push(o);
const box = new THREE.Box3();
o.points.forEach((item) => {
box.expandByPoint(new THREE.Vector3(...item));
});
let point=box.max
let finallyPoint = this.getCameraPosition(5,point )
this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
}
});
},
/* 获取流向数据*/
getData() {
fetch(`/data.json?${new Date().getTime()}`)
.then(response => {
if (!response.ok) {
throw new Error('网络响应错误');
} else {
return response.json()
}
}).then(data => {
this.allPieData = data.filter((item) => {
return item.children.some((child) => child.data.length >= 2);
});
console.log( this.allPieData,' this.allPieData')
})
},
/* 流向动画*/
drawPipe(positions, radius, direction) {
const viewer = this.viewer;
const points = positions.map(
/* 根据本身的模型定位来*/
(item) => new THREE.Vector3(item[0] / 1000-42, item[2] / 1000-10, -item[1] / 1000)
);
const flowObject = new VT.TubeLine({
points: points,
geometry: {
radius: radius / 100 / 2,
cornerRadius: 0,
cornerSplit: 10,
},
material: {
// color: "#0099ff",
color: "lightgreen",
side: 2,
map: {
image: "vt/resources/texture/arrow.png",
repeat: [1, 4],
// rotation: direction ? Math.PI : 0,
wrapS: THREE.RepeatWrapping,
wrapT: THREE.RepeatWrapping,
},
transparent: true,
depthTest: true,
},
});
flowObject.line.onBeforeRender = () => {
if (flowObject.line.material.map) {
flowObject.line.material.map.offset.x -= 0.05;
}
};
flowObject.traverse((node) => {
if (node.isMesh) {
node._thing_tag = "helper";
}
});
viewer.scene.add(flowObject);
return flowObject;
},
clearSelected() { clearSelected() {
// this.viewer.scene.traverse(function(obj) { // this.viewer.scene.traverse(function(obj) {
// console.log(obj,'模型对象') // console.log(obj,'模型对象')
...@@ -163,8 +317,8 @@ ...@@ -163,8 +317,8 @@
}, },
init() { init() {
this.viewer = new Viewer('container', this) this.viewer = new Viewer('container')
this.viewer.camera.position.set(0, 32, -82) this.viewer.camera.position.set(0, 17, -60)
const manager = new THREE.LoadingManager(); const manager = new THREE.LoadingManager();
manager.onProgress = (item, loaded, total) => { manager.onProgress = (item, loaded, total) => {
...@@ -188,7 +342,7 @@ ...@@ -188,7 +342,7 @@
lights.addDirectionalLight([200, 200, 200], { lights.addDirectionalLight([200, 200, 200], {
color: 'rgb(253,253,253)', color: 'rgb(253,253,253)',
intensity: 3, intensity: 3,
castShadow: true // 是否投射阴影 castShadow: false // 是否投射阴影
}) })
// this.viewer.addAxis() // this.viewer.addAxis()
/* 添加地面*/ /* 添加地面*/
...@@ -235,12 +389,17 @@ ...@@ -235,12 +389,17 @@
// TODO: 第一个参数是否需要指定模型 // TODO: 第一个参数是否需要指定模型
const intersects = rayCaster.intersectObject(this.viewer.scene, true) // 计算物体和射线的焦点 const intersects = rayCaster.intersectObject(this.viewer.scene, true) // 计算物体和射线的焦点
if (intersects[0]) { if (intersects[0]) {
console.log(intersects[0])
if (intersects[0].object.name == '地面') { if (intersects[0].object.name == '地面') {
return return
} }
const model = intersects[0].object let model
if(intersects[0].object.name==''){
model= intersects[1].object
}else{
model= intersects[0].object
}
this.selectedModel = model this.selectedModel = model
/* 执行并情况材料队列 */ /* 执行并情况材料队列 */
this.reMaterialQue.forEach(item => { this.reMaterialQue.forEach(item => {
...@@ -269,7 +428,7 @@ ...@@ -269,7 +428,7 @@
/* */ /* */
let point = intersects[0].point let point = intersects[0].point
let finallyPoint = this.getCameraPosition(24, point) let finallyPoint = this.getCameraPosition(5, point)
this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z) this.cameraTo(finallyPoint.x, finallyPoint.y, finallyPoint.z, point.x, point.y, point.z)
} }
...@@ -325,11 +484,11 @@ ...@@ -325,11 +484,11 @@
let coldy = this.viewer.controls.target.y let coldy = this.viewer.controls.target.y
let coldz = this.viewer.controls.target.z let coldz = this.viewer.controls.target.z
let viewer = this.viewer let viewer = this.viewer
console.log(coldx, coldy, coldz)
/* 计算过渡差值*/ /* 计算过渡差值*/
let tl = gsap.timeline(); let tl = gsap.timeline();
tl.to({}, { tl.to({}, {
duration: 2, // 动画持续时间 duration: 1.5, // 动画持续时间
ease: "power1.inOut", // 缓动函数 ease: "power1.inOut", // 缓动函数
onUpdate: function() { onUpdate: function() {
let progress = this.progress(); // 获取当前进度（0到1之间） let progress = this.progress(); // 获取当前进度（0到1之间）
...@@ -350,6 +509,17 @@ ...@@ -350,6 +509,17 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .el-switch__label{
color: #fff;
}
::v-deep .el-switch__label.is-active{
color: #26c6f0;
}
::v-deep .el-input__inner {
background-color: rgba(0, 0, 0, 0.0);
color: #fff;
}
.nullbp { .nullbp {
border: 0; border: 0;
padding: 0; padding: 0;
...@@ -395,6 +565,19 @@ ...@@ -395,6 +565,19 @@
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
min-width: 250px; min-width: 250px;
color: #fff;
font-size: 13px;
// background-color: #07417a;
}
.toolButton2 {
display: flex;
margin-top: 18px;
position: absolute;
left: 100px;
z-index: 12;
height: 40px;
line-height: 40px;
min-width: 250px;
color: #26c6f0; color: #26c6f0;
font-size: 13px; font-size: 13px;
// background-color: #07417a; // background-color: #07417a;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment