@eturnity/eturnity_3d 6.29.1 → 6.29.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/helper/renderMixin.js +38 -188
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {mapState, mapGetters } from 'vuex'
|
|
1
|
+
import { mapState, mapGetters } from 'vuex'
|
|
2
2
|
import renderMixin from './render'
|
|
3
3
|
import cameraMixin from './cameraMixin'
|
|
4
4
|
import * as THREE from 'three'
|
|
5
5
|
|
|
6
6
|
export default {
|
|
7
|
-
mixins:[renderMixin,cameraMixin],
|
|
7
|
+
mixins: [renderMixin, cameraMixin],
|
|
8
8
|
data() {
|
|
9
9
|
return {
|
|
10
10
|
meshes: {
|
|
@@ -21,7 +21,7 @@ export default {
|
|
|
21
21
|
lastTic: new Date().getTime() * 1e4,
|
|
22
22
|
//lastTic:(new Date()).getTime()
|
|
23
23
|
lastGeometryEventIdDone: -1,
|
|
24
|
-
backgroundImagesizeInMm:null
|
|
24
|
+
backgroundImagesizeInMm: null
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
created() {
|
|
@@ -36,7 +36,7 @@ export default {
|
|
|
36
36
|
roofMarginMeshes: {},
|
|
37
37
|
moduleFieldsMeshes: {}
|
|
38
38
|
}
|
|
39
|
-
if(this.wallColor){
|
|
39
|
+
if (this.wallColor) {
|
|
40
40
|
let wallColor = new THREE.Color(this.wallColor)
|
|
41
41
|
this.material.wall.color.set(wallColor)
|
|
42
42
|
}
|
|
@@ -44,7 +44,8 @@ export default {
|
|
|
44
44
|
|
|
45
45
|
computed: {
|
|
46
46
|
...mapState({
|
|
47
|
-
moduleTextureVersionId: (state) =>
|
|
47
|
+
moduleTextureVersionId: (state) =>
|
|
48
|
+
state.threeDModule.moduleTextureVersionId,
|
|
48
49
|
wallColor: (state) => state.threeDModule.wallColor,
|
|
49
50
|
selectedMapLayer: (state) => state.threeDModule.selectedMapLayer,
|
|
50
51
|
pvDataMemo: (state) => state.threeDModule.pvDataMemo
|
|
@@ -53,13 +54,13 @@ export default {
|
|
|
53
54
|
selectedTool: 'getSelectedTool',
|
|
54
55
|
roofs: 'getRoofs',
|
|
55
56
|
lastGeometryEventId: 'getLastGeometryEventId',
|
|
56
|
-
roofsBounds:'getRoofsBounds',
|
|
57
|
+
roofsBounds: 'getRoofsBounds',
|
|
57
58
|
geometryEvents: 'getGeometryEvents'
|
|
58
59
|
}),
|
|
59
|
-
layerKey(){
|
|
60
|
-
if(this.selectedMapLayer){
|
|
60
|
+
layerKey() {
|
|
61
|
+
if (this.selectedMapLayer) {
|
|
61
62
|
return this.selectedMapLayer.key
|
|
62
|
-
}else{
|
|
63
|
+
} else {
|
|
63
64
|
return null
|
|
64
65
|
}
|
|
65
66
|
},
|
|
@@ -103,8 +104,7 @@ export default {
|
|
|
103
104
|
this.renderMethods(methodList)
|
|
104
105
|
}
|
|
105
106
|
}
|
|
106
|
-
|
|
107
|
-
|
|
107
|
+
|
|
108
108
|
this.lastGeometryEventIdDone = this.lastGeometryEventId
|
|
109
109
|
},
|
|
110
110
|
renderingMethodsByEvent(geometryEvent) {
|
|
@@ -209,13 +209,13 @@ export default {
|
|
|
209
209
|
arg: []
|
|
210
210
|
})
|
|
211
211
|
break
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
212
|
+
case 'clearPanelFromChangingRoofs':
|
|
213
|
+
methodList.push({
|
|
214
|
+
name: 'clearPanelsFromChangingRoofs',
|
|
215
|
+
method: this.clearPanelsFromChangingRoofs,
|
|
216
|
+
arg: [params.roofIds]
|
|
217
|
+
})
|
|
218
|
+
break
|
|
219
219
|
}
|
|
220
220
|
return methodList
|
|
221
221
|
},
|
|
@@ -240,183 +240,33 @@ export default {
|
|
|
240
240
|
this.renderFlatRoofs()
|
|
241
241
|
},
|
|
242
242
|
|
|
243
|
-
applyTextureOnRoofs(){
|
|
244
|
-
this.roofs.forEach(roof=>{
|
|
243
|
+
applyTextureOnRoofs() {
|
|
244
|
+
this.roofs.forEach((roof) => {
|
|
245
245
|
//roofs
|
|
246
|
-
let mesh=this.meshes.roofMeshes[roof.id]
|
|
247
|
-
mesh.material=this.material.roof
|
|
248
|
-
if(this.material.roof && this.material.roof.project){
|
|
246
|
+
let mesh = this.meshes.roofMeshes[roof.id]
|
|
247
|
+
mesh.material = this.material.roof
|
|
248
|
+
if (this.material.roof && this.material.roof.project) {
|
|
249
249
|
this.material.roof.project(mesh)
|
|
250
250
|
}
|
|
251
251
|
//obstacle on roof
|
|
252
|
-
roof.holes
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
252
|
+
roof.holes
|
|
253
|
+
.filter((p) => p.layer == 'obstacle')
|
|
254
|
+
.forEach((obstacle) => {
|
|
255
|
+
let meshObstacle =
|
|
256
|
+
this.meshes.obstacleMeshes[obstacle.id + '-' + roof.id + '_top']
|
|
257
|
+
meshObstacle.material = this.material.roof
|
|
258
|
+
if (this.material.roof && this.material.roof.project)
|
|
259
|
+
this.material.roof.project(meshObstacle)
|
|
260
|
+
})
|
|
257
261
|
})
|
|
258
262
|
},
|
|
259
|
-
|
|
260
|
-
async updateProjectionMaterial(){
|
|
263
|
+
|
|
264
|
+
async updateProjectionMaterial() {
|
|
261
265
|
await this.loadProjectionMaterial()
|
|
262
266
|
this.applyTextureOnRoofs()
|
|
263
267
|
this.renderBackground()
|
|
264
268
|
},
|
|
265
|
-
<<<<<<< HEAD
|
|
266
|
-
async loadProjectionMaterial() {
|
|
267
|
-
const _this=this
|
|
268
|
-
if(!this.layoutSettings.base64_image_url)
|
|
269
|
-
{
|
|
270
|
-
this.loader.load(require("../assets/images/white_tile.png"),(texture)=>{
|
|
271
|
-
let projectionMaterial = new ProjectedMaterial({
|
|
272
|
-
camera: _this.cameraprojection,
|
|
273
|
-
texture: texture
|
|
274
|
-
})
|
|
275
|
-
this.material.roof = projectionMaterial
|
|
276
|
-
})
|
|
277
|
-
return
|
|
278
|
-
}
|
|
279
|
-
let projectedMaterialLoaded= await new Promise((resolve,reject) => {
|
|
280
|
-
this.loader.load(this.layoutSettings.base64_image_url,(texture)=>{
|
|
281
|
-
let backgroundImageZoomLvl=_this.layoutSettings.map_zoom
|
|
282
|
-
let backgroundImageCenter={
|
|
283
|
-
lat:_this.layoutSettings.layout_latitude,
|
|
284
|
-
lng:_this.layoutSettings.layout_longitude
|
|
285
|
-
}
|
|
286
|
-
if(_this.layoutSettings.background_map_settings){
|
|
287
|
-
backgroundImageZoomLvl=_this.layoutSettings.background_map_settings.zoom_lvl
|
|
288
|
-
backgroundImageCenter={
|
|
289
|
-
lat:_this.layoutSettings.background_map_settings.lat,
|
|
290
|
-
lng:_this.layoutSettings.background_map_settings.lng
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
_this.backgroundImagesizeInMm=_this.layoutSettings.background_map_settings.sizeInMm
|
|
294
|
-
if (_this.backgroundImagesizeInMm) {
|
|
295
|
-
_this.cameraprojection.aspect =
|
|
296
|
-
_this.backgroundImagesizeInMm.width / _this.backgroundImagesizeInMm.height
|
|
297
|
-
let projectionAltitude =
|
|
298
|
-
_this.backgroundImagesizeInMm.height /
|
|
299
|
-
(2 * Math.tan((_this.cameraprojection.fov * Math.PI) / 360))
|
|
300
269
|
|
|
301
|
-
|
|
302
|
-
//set projection camera over background_map_center
|
|
303
|
-
let cameraProjectionPosition={x:0,y:0,z:projectionAltitude / 1000}
|
|
304
|
-
if(_this.layoutSettings.background_map_settings && _this.layoutSettings.background_map_settings.positionInMm){
|
|
305
|
-
// let averageLat=(_this.layoutSettings.layout_latitude+_this.layoutSettings.background_map_settings.lat)/2
|
|
306
|
-
// let deltaLat=_this.layoutSettings.background_map_settings.lat-_this.layoutSettings.layout_latitude
|
|
307
|
-
// let deltaLng=_this.layoutSettings.background_map_settings.lng-_this.layoutSettings.layout_longitude
|
|
308
|
-
// let {x:x_mm,y:y_mm}=deltaLatLngToDistance(deltaLat,deltaLng,averageLat)
|
|
309
|
-
let positionInMm=this.layoutSettings.background_map_settings.positionInMm
|
|
310
|
-
cameraProjectionPosition.x=positionInMm.x/1000
|
|
311
|
-
cameraProjectionPosition.y=positionInMm.y/1000
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
_this.cameraprojection.position.set(cameraProjectionPosition.x, cameraProjectionPosition.y, projectionAltitude / 1000)
|
|
315
|
-
_this.cameraprojection.far = projectionAltitude * 16
|
|
316
|
-
_this.cameraprojection.updateProjectionMatrix()
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
let projectionMaterial = new ProjectedMaterial({
|
|
320
|
-
camera: _this.cameraprojection,
|
|
321
|
-
texture: texture
|
|
322
|
-
})
|
|
323
|
-
resolve(projectionMaterial)
|
|
324
|
-
})
|
|
325
|
-
})
|
|
326
|
-
this.material.roof =projectedMaterialLoaded
|
|
327
|
-
},
|
|
328
|
-
setCameraGlobalPosition() {
|
|
329
|
-
if(this.roofs.length==0)return
|
|
330
|
-
let bounds=this.roofsBounds
|
|
331
|
-
let targetVector={x:(bounds.xMax+bounds.xMin)/2000,y:(bounds.yMax+bounds.yMin)/2000,z:0}
|
|
332
|
-
let objectRadius_m=Math.max((bounds.xMax-bounds.xMin)/2000,(bounds.yMax-bounds.yMin)/2000)
|
|
333
|
-
let distance =
|
|
334
|
-
5 + objectRadius_m / Math.sin(((this.camera.fov / 2) * Math.PI) / 180)
|
|
335
|
-
let cameraMoveVector = { x: 0, y: 0, z: distance }
|
|
336
|
-
const positionVector = addVector(targetVector, cameraMoveVector)
|
|
337
|
-
const position = [
|
|
338
|
-
positionVector.x,
|
|
339
|
-
positionVector.y - distance,
|
|
340
|
-
positionVector.z
|
|
341
|
-
]
|
|
342
|
-
let target=[
|
|
343
|
-
targetVector.x,
|
|
344
|
-
targetVector.y,
|
|
345
|
-
targetVector.z
|
|
346
|
-
]
|
|
347
|
-
|
|
348
|
-
this.setTweenTo(position,target)
|
|
349
|
-
},
|
|
350
|
-
setCameraOrthogonalTo(polygon) {
|
|
351
|
-
if (polygon) {
|
|
352
|
-
let polygonRef = polygon
|
|
353
|
-
const targetVector = polygonRef.meanPoint
|
|
354
|
-
const target = [
|
|
355
|
-
targetVector.x / 1000,
|
|
356
|
-
targetVector.y / 1000,
|
|
357
|
-
targetVector.z / 1000
|
|
358
|
-
]
|
|
359
|
-
const positionVector = addVector(
|
|
360
|
-
polygonRef.meanPoint,
|
|
361
|
-
multiplyVector(45000, polygonRef.normalVector)
|
|
362
|
-
)
|
|
363
|
-
const position = [
|
|
364
|
-
positionVector.x / 1000,
|
|
365
|
-
positionVector.y / 1000 - 1,
|
|
366
|
-
positionVector.z / 1000
|
|
367
|
-
]
|
|
368
|
-
this.setTweenTo(position,target)
|
|
369
|
-
}
|
|
370
|
-
},
|
|
371
|
-
setCameraSideTo(polygon) {
|
|
372
|
-
if (polygon) {
|
|
373
|
-
let polygonRef = polygon
|
|
374
|
-
const targetVector = polygonRef.meanPoint
|
|
375
|
-
const target = [
|
|
376
|
-
targetVector.x / 1000,
|
|
377
|
-
targetVector.y / 1000,
|
|
378
|
-
targetVector.z / 1000
|
|
379
|
-
]
|
|
380
|
-
let sideVector={x:-Math.cos((polygonRef.direction+45)*Math.PI/180),y:Math.sin((polygonRef.direction+45)*Math.PI/180),z: 0}
|
|
381
|
-
const positionVector = addVector(
|
|
382
|
-
polygonRef.meanPoint,
|
|
383
|
-
multiplyVector(45000, sideVector)
|
|
384
|
-
)
|
|
385
|
-
const position = [
|
|
386
|
-
positionVector.x / 1000,
|
|
387
|
-
positionVector.y / 1000,
|
|
388
|
-
positionVector.z / 1000 +5
|
|
389
|
-
]
|
|
390
|
-
this.setTweenTo(position,target)
|
|
391
|
-
}
|
|
392
|
-
},
|
|
393
|
-
setTweenTo(position,target){
|
|
394
|
-
if (this.orbitControl) {
|
|
395
|
-
this.tweenOrbit = new TWEEN.Tween(this.orbitControl.target)
|
|
396
|
-
.to({ x: target[0], y: target[1], z: target[2] }, 2000)
|
|
397
|
-
.easing(TWEEN.Easing.Sinusoidal.Out)
|
|
398
|
-
.onUpdate(() => {
|
|
399
|
-
if(this.orbitControl){
|
|
400
|
-
this.orbitControl.update()
|
|
401
|
-
}
|
|
402
|
-
})
|
|
403
|
-
.start()
|
|
404
|
-
}
|
|
405
|
-
if (this.camera) {
|
|
406
|
-
this.tweenCamera = new TWEEN.Tween(this.camera.position)
|
|
407
|
-
.to({ x: position[0], y: position[1], z: position[2] }, 2000)
|
|
408
|
-
.easing(TWEEN.Easing.Sinusoidal.Out)
|
|
409
|
-
.onUpdate(() => {
|
|
410
|
-
if(this.orbitControl){
|
|
411
|
-
this.orbitControl.update()
|
|
412
|
-
}
|
|
413
|
-
})
|
|
414
|
-
.start()
|
|
415
|
-
}
|
|
416
|
-
},
|
|
417
|
-
=======
|
|
418
|
-
|
|
419
|
-
>>>>>>> origin/EPDM-7663
|
|
420
270
|
getCanvasOffset() {
|
|
421
271
|
if (!this.$refs.canvas3DContainer) return { top: 0, left: 0 }
|
|
422
272
|
var box = this.$refs.canvas3DContainer.getBoundingClientRect()
|
|
@@ -464,7 +314,7 @@ export default {
|
|
|
464
314
|
// update any render target sizes here
|
|
465
315
|
}
|
|
466
316
|
canvas = null
|
|
467
|
-
}
|
|
317
|
+
}
|
|
468
318
|
},
|
|
469
319
|
watch: {
|
|
470
320
|
wallColor(color) {
|
|
@@ -476,8 +326,8 @@ export default {
|
|
|
476
326
|
this.loadNewTexture()
|
|
477
327
|
}
|
|
478
328
|
},
|
|
479
|
-
'material.panel':{
|
|
480
|
-
handler(){
|
|
329
|
+
'material.panel': {
|
|
330
|
+
handler() {
|
|
481
331
|
this.renderPanels()
|
|
482
332
|
}
|
|
483
333
|
},
|
|
@@ -495,7 +345,7 @@ export default {
|
|
|
495
345
|
this.tweenCamera = null
|
|
496
346
|
}
|
|
497
347
|
this.clearThreeObjects(this.scene)
|
|
498
|
-
if(this.three_map){
|
|
348
|
+
if (this.three_map) {
|
|
499
349
|
this.three_map.clear()
|
|
500
350
|
this.clearThreeObjects(this.three_map)
|
|
501
351
|
}
|