|
@@ -36,57 +36,26 @@ import vmenu from "@/components/menu";
|
|
import Loading from "@/components/loading";
|
|
import Loading from "@/components/loading";
|
|
import vintroduce from "@/components/introduce";
|
|
import vintroduce from "@/components/introduce";
|
|
|
|
|
|
-let step = 1
|
|
|
|
|
|
+const transitionTime = 2000
|
|
|
|
+
|
|
|
|
+let labelClick = (e) => {
|
|
|
|
+ if (e.centerCamePosi) {
|
|
|
|
+ let { x, y, z } = e.centerCamePosi
|
|
|
|
+ window.transitions.start(
|
|
|
|
+ window.lerp.vector(window.viewer.camera.position,
|
|
|
|
+ new window.THREE.Vector3(x, y, z)),
|
|
|
|
+ transitionTime,
|
|
|
|
+ () => { },
|
|
|
|
+ 0/* Delay */,
|
|
|
|
+ window.easing.easeInOutQuad,
|
|
|
|
+ 'cameraFly');
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
|
|
let infoLabels = [{ "title": "宝珠钮", "posInModel": [-4.6302, 20.0953, 2.9731] },
|
|
let infoLabels = [{ "title": "宝珠钮", "posInModel": [-4.6302, 20.0953, 2.9731] },
|
|
-{ "title": "瓶盖", "posInModel": [-11.7969, -1.7939, 3.9055] },
|
|
|
|
-{ "title": "瓶身", "posInModel": [-6.0636, 16.2615, 3.4633] }]
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-// let picLabels = [
|
|
|
|
-// {
|
|
|
|
-// "title": "宝珠钮",
|
|
|
|
-// "entitle": "Diagonal squares pattern",
|
|
|
|
-// "labeltype": "canShow",
|
|
|
|
-// "posInModel": [
|
|
|
|
-// 0.2358,
|
|
|
|
-// 24.1179,
|
|
|
|
-// 4.7176
|
|
|
|
-// ]
|
|
|
|
-// },
|
|
|
|
-// {
|
|
|
|
-// "title": "斜方格纹",
|
|
|
|
-// "entitle": "Diagonal squares pattern",
|
|
|
|
-// "labeltype": "canShow",
|
|
|
|
-// "posi": "right",
|
|
|
|
-// "posInModel": [
|
|
|
|
-// 4.9625,
|
|
|
|
-// 16.7108,
|
|
|
|
-// 3.7418
|
|
|
|
-// ]
|
|
|
|
-// },
|
|
|
|
-// {
|
|
|
|
-// "title": "卷草纹",
|
|
|
|
-// "entitle": "Diagonal squares pattern",
|
|
|
|
-// "labeltype": "canShow",
|
|
|
|
-// "posi": "right",
|
|
|
|
-// "posInModel": [
|
|
|
|
-// 8.1682,
|
|
|
|
-// 12.9736,
|
|
|
|
-// 5.3315
|
|
|
|
-// ]
|
|
|
|
-// },
|
|
|
|
-// {
|
|
|
|
-// "title": "缠枝扁菊纹",
|
|
|
|
-// "entitle": "Diagonal squares pattern",
|
|
|
|
-// "labeltype": "canShow",
|
|
|
|
-// "posInModel": [
|
|
|
|
-// -9.4563,
|
|
|
|
-// 11.9996,
|
|
|
|
-// 5.5396
|
|
|
|
-// ]
|
|
|
|
-// }
|
|
|
|
-// ]
|
|
|
|
|
|
+{ "title": "瓶身", "posInModel": [-11.7969, -1.7939, 3.9055] },
|
|
|
|
+{ "title": "瓶盖", "posInModel": [-6.0636, 16.2615, 3.4633] }]
|
|
|
|
|
|
let picLabels = [
|
|
let picLabels = [
|
|
{
|
|
{
|
|
@@ -99,7 +68,13 @@ let picLabels = [
|
|
-9.9383,
|
|
-9.9383,
|
|
1.517,
|
|
1.517,
|
|
8.4702
|
|
8.4702
|
|
- ]
|
|
|
|
|
|
+ ],
|
|
|
|
+ "centerCamePosi": {
|
|
|
|
+ x: -0.4650665393060424,
|
|
|
|
+ y: 0.0106499843061736,
|
|
|
|
+ z: 0.43269467554899155,
|
|
|
|
+ },
|
|
|
|
+ clickFun: labelClick
|
|
},
|
|
},
|
|
{
|
|
{
|
|
"title": "牡丹",
|
|
"title": "牡丹",
|
|
@@ -112,7 +87,13 @@ let picLabels = [
|
|
-10.5926,
|
|
-10.5926,
|
|
-6.1392,
|
|
-6.1392,
|
|
1.8685
|
|
1.8685
|
|
- ]
|
|
|
|
|
|
+ ],
|
|
|
|
+ "centerCamePosi": {
|
|
|
|
+ x: -0.5357516927819861,
|
|
|
|
+ y: -0.3176574374999963,
|
|
|
|
+ z: 0.1252552053945424
|
|
|
|
+ },
|
|
|
|
+ clickFun: labelClick
|
|
},
|
|
},
|
|
{
|
|
{
|
|
"title": "梅",
|
|
"title": "梅",
|
|
@@ -125,7 +106,13 @@ let picLabels = [
|
|
12.4014,
|
|
12.4014,
|
|
5.4827,
|
|
5.4827,
|
|
2.9209
|
|
2.9209
|
|
- ]
|
|
|
|
|
|
+ ],
|
|
|
|
+ "centerCamePosi": {
|
|
|
|
+ x: 0.5882886392634421,
|
|
|
|
+ y: 0.2267149762544653,
|
|
|
|
+ z: 0.07836955309150107
|
|
|
|
+ },
|
|
|
|
+ clickFun: labelClick
|
|
},
|
|
},
|
|
{
|
|
{
|
|
"title": "松",
|
|
"title": "松",
|
|
@@ -137,11 +124,18 @@ let picLabels = [
|
|
-5.2427,
|
|
-5.2427,
|
|
1.903,
|
|
1.903,
|
|
-12.1582
|
|
-12.1582
|
|
- ]
|
|
|
|
|
|
+ ],
|
|
|
|
+ "centerCamePosi": {
|
|
|
|
+ x: -0.2604583387784285,
|
|
|
|
+ y: 0.00816509249833358,
|
|
|
|
+ z: -0.5794133027654209
|
|
|
|
+ },
|
|
|
|
+ clickFun: labelClick
|
|
}
|
|
}
|
|
]
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
components: { vmenu, Loading, vintroduce },
|
|
components: { vmenu, Loading, vintroduce },
|
|
data() {
|
|
data() {
|
|
@@ -150,7 +144,6 @@ export default {
|
|
camera: null,
|
|
camera: null,
|
|
renderer: null,
|
|
renderer: null,
|
|
controls: null,
|
|
controls: null,
|
|
- textrueLoader: null,
|
|
|
|
rafId: null,
|
|
rafId: null,
|
|
container: null,
|
|
container: null,
|
|
containerW: 0,
|
|
containerW: 0,
|
|
@@ -191,7 +184,7 @@ export default {
|
|
window.transitions.start(
|
|
window.transitions.start(
|
|
window.lerp.vector(window.viewer.camera.rotation,
|
|
window.lerp.vector(window.viewer.camera.rotation,
|
|
new window.THREE.Vector3(-6.123233995736765e-17, 0, 0)),
|
|
new window.THREE.Vector3(-6.123233995736765e-17, 0, 0)),
|
|
- 3000,
|
|
|
|
|
|
+ transitionTime,
|
|
() => { },
|
|
() => { },
|
|
0/* Delay */,
|
|
0/* Delay */,
|
|
window.easing.easeInOutQuad,
|
|
window.easing.easeInOutQuad,
|
|
@@ -208,7 +201,7 @@ export default {
|
|
window.transitions.start(
|
|
window.transitions.start(
|
|
window.lerp.vector(window.viewer.model.position,
|
|
window.lerp.vector(window.viewer.model.position,
|
|
new window.THREE.Vector3(0, 0, 0)),
|
|
new window.THREE.Vector3(0, 0, 0)),
|
|
- 3000,
|
|
|
|
|
|
+ transitionTime,
|
|
() => { },
|
|
() => { },
|
|
0/* Delay */,
|
|
0/* Delay */,
|
|
window.easing.easeInOutQuad,
|
|
window.easing.easeInOutQuad,
|
|
@@ -219,7 +212,7 @@ export default {
|
|
window.transitions.start(
|
|
window.transitions.start(
|
|
window.lerp.vector(window.viewer.model.rotation,
|
|
window.lerp.vector(window.viewer.model.rotation,
|
|
new window.THREE.Vector3(0, 0, 0)),
|
|
new window.THREE.Vector3(0, 0, 0)),
|
|
- 3000,
|
|
|
|
|
|
+ transitionTime,
|
|
() => {
|
|
() => {
|
|
window.viewer.loadLabelsFromData(infoLabels)
|
|
window.viewer.loadLabelsFromData(infoLabels)
|
|
window.viewer.control.maxPolarAngle = Math.PI;
|
|
window.viewer.control.maxPolarAngle = Math.PI;
|
|
@@ -233,7 +226,7 @@ export default {
|
|
window.transitions.start(
|
|
window.transitions.start(
|
|
window.lerp.vector(window.viewer.camera.position,
|
|
window.lerp.vector(window.viewer.camera.position,
|
|
new window.THREE.Vector3(0, 0, 0.78)),
|
|
new window.THREE.Vector3(0, 0, 0.78)),
|
|
- 3000,
|
|
|
|
|
|
+ transitionTime,
|
|
() => { },
|
|
() => { },
|
|
0/* Delay */,
|
|
0/* Delay */,
|
|
window.easing.easeInOutQuad,
|
|
window.easing.easeInOutQuad,
|
|
@@ -252,10 +245,8 @@ export default {
|
|
window.transitions.start(
|
|
window.transitions.start(
|
|
window.lerp.vector(window.viewer.camera.position,
|
|
window.lerp.vector(window.viewer.camera.position,
|
|
new window.THREE.Vector3(0, 3.8901816405972494e-17, 0.6353148749999993)),
|
|
new window.THREE.Vector3(0, 3.8901816405972494e-17, 0.6353148749999993)),
|
|
- 3000,
|
|
|
|
- () => {
|
|
|
|
- window.viewer.loadLabelsFromData(picLabels)
|
|
|
|
- },
|
|
|
|
|
|
+ transitionTime,
|
|
|
|
+ () => { },
|
|
0/* Delay */,
|
|
0/* Delay */,
|
|
window.easing.easeInOutQuad,
|
|
window.easing.easeInOutQuad,
|
|
'cameraFly');
|
|
'cameraFly');
|
|
@@ -265,7 +256,7 @@ export default {
|
|
window.transitions.start(
|
|
window.transitions.start(
|
|
window.lerp.vector(window.viewer.model.position,
|
|
window.lerp.vector(window.viewer.model.position,
|
|
new window.THREE.Vector3(0, 0, 0)),
|
|
new window.THREE.Vector3(0, 0, 0)),
|
|
- 3000,
|
|
|
|
|
|
+ transitionTime,
|
|
() => { },
|
|
() => { },
|
|
0/* Delay */,
|
|
0/* Delay */,
|
|
window.easing.easeInOutQuad,
|
|
window.easing.easeInOutQuad,
|
|
@@ -276,10 +267,12 @@ export default {
|
|
window.transitions.start(
|
|
window.transitions.start(
|
|
window.lerp.vector(window.viewer.model.rotation,
|
|
window.lerp.vector(window.viewer.model.rotation,
|
|
new window.THREE.Vector3(0, 0, 0)),
|
|
new window.THREE.Vector3(0, 0, 0)),
|
|
- 3000,
|
|
|
|
|
|
+ transitionTime,
|
|
() => {
|
|
() => {
|
|
window.viewer.control.maxPolarAngle = Math.PI / 1.5;
|
|
window.viewer.control.maxPolarAngle = Math.PI / 1.5;
|
|
window.viewer.control.minPolarAngle = Math.PI / 6;
|
|
window.viewer.control.minPolarAngle = Math.PI / 6;
|
|
|
|
+ window.viewer.loadLabelsFromData(picLabels)
|
|
|
|
+ window.showWenli = true
|
|
},
|
|
},
|
|
0/* Delay */,
|
|
0/* Delay */,
|
|
window.easing.easeInOutQuad,
|
|
window.easing.easeInOutQuad,
|
|
@@ -300,6 +293,14 @@ export default {
|
|
centerLabel(newVal) {
|
|
centerLabel(newVal) {
|
|
if (newVal) {
|
|
if (newVal) {
|
|
newVal.elem[0].style.display == 'block' && newVal.elem.addClass('detailShow')
|
|
newVal.elem[0].style.display == 'block' && newVal.elem.addClass('detailShow')
|
|
|
|
+ let wlmesh = window.viewer.model.getObjectByName("WL48_ping")
|
|
|
|
+ wlmesh.material.emissiveMap = this.centerLabel.emissiveTexture;
|
|
|
|
+ wlmesh.material.dispose();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ currentItem(newVal) {
|
|
|
|
+ if (newVal != 'pix') {
|
|
|
|
+ window.showWenli = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -330,44 +331,24 @@ export default {
|
|
window.viewer.control.minPolarAngle = 0;
|
|
window.viewer.control.minPolarAngle = 0;
|
|
})
|
|
})
|
|
|
|
|
|
- let textrueLoader = new window.THREE.TextureLoader();
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- window.viewer.addEventListener("delayUpdate", (e) => {
|
|
|
|
- setTimeout(() => {
|
|
|
|
- if (this.currentItem == 'pic') {
|
|
|
|
- let centerLabel = window.viewer.getCLabel()
|
|
|
|
- if (centerLabel) {
|
|
|
|
- window.viewer.labels.forEach(item => {
|
|
|
|
- if (centerLabel.title == item.title) {
|
|
|
|
- this.centerLabel = centerLabel
|
|
|
|
- }
|
|
|
|
- else {
|
|
|
|
- item.elem.removeClass('detailShow')
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- window.viewer.addEventListener("onPointerUp", () => {
|
|
|
|
- if (this.currentItem == 'pic') {
|
|
|
|
- if (this.centerLabel) {
|
|
|
|
- console.log(this.centerLabel);
|
|
|
|
- let emissiveTexture = textrueLoader.load(`model/${this.centerLabel.wenli}.jpg`);
|
|
|
|
- let wlmesh = window.viewer.model.getObjectByName("WL48_ping")
|
|
|
|
- setTimeout(() => {
|
|
|
|
- wlmesh.material.emissiveMap = emissiveTexture;
|
|
|
|
- wlmesh.material.dispose();
|
|
|
|
- }, 100);
|
|
|
|
|
|
+ window.viewer.addEventListener("delayUpdate", (e) => {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ if (this.currentItem == 'pic') {
|
|
|
|
+ let centerLabel = window.viewer.getCLabel()
|
|
|
|
+ if (centerLabel) {
|
|
|
|
+ window.viewer.labels.forEach(item => {
|
|
|
|
+ if (centerLabel.title == item.title) {
|
|
|
|
+ this.centerLabel = centerLabel
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ item.elem.removeClass('detailShow')
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ });
|
|
})
|
|
})
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
},
|
|
},
|
|
|
|
|
|
beforeDestroy() {
|
|
beforeDestroy() {
|
|
@@ -658,6 +639,8 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
&.detailShow {
|
|
&.detailShow {
|
|
|
|
+ z-index: 1088 !important;
|
|
|
|
+
|
|
&:after {
|
|
&:after {
|
|
content: "";
|
|
content: "";
|
|
background-image: url('~@/assets/images/point_active.svg');
|
|
background-image: url('~@/assets/images/point_active.svg');
|
|
@@ -675,9 +658,10 @@ export default {
|
|
.picdetail {
|
|
.picdetail {
|
|
opacity: 1;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
pointer-events: auto;
|
|
|
|
+
|
|
&::before {
|
|
&::before {
|
|
content: '';
|
|
content: '';
|
|
- background-color: #fff!important;
|
|
|
|
|
|
+ background-color: #fff !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|