|
|
@@ -38,6 +38,7 @@ export default class Monitor extends THREE.Object3D{
|
|
|
constructor(data, model){
|
|
|
super()
|
|
|
this.isMonitor = true
|
|
|
+ this.external = external//全景时不换材质
|
|
|
warnHls()
|
|
|
|
|
|
data.video = testUrl
|
|
|
@@ -101,6 +102,7 @@ export default class Monitor extends THREE.Object3D{
|
|
|
opacity: 0.1,
|
|
|
side: THREE.DoubleSide,
|
|
|
depthTest: false,
|
|
|
+ visible: !!data.showScope
|
|
|
})
|
|
|
|
|
|
|
|
|
@@ -109,8 +111,8 @@ export default class Monitor extends THREE.Object3D{
|
|
|
map: new THREE.VideoTexture(this.video),
|
|
|
side: THREE.DoubleSide,
|
|
|
depthTest: false,
|
|
|
- transparent: true,
|
|
|
- // opacity: 0.5,
|
|
|
+ transparent: true,
|
|
|
+
|
|
|
})
|
|
|
// 摄像头
|
|
|
if (!cameraModel) {
|
|
|
@@ -133,7 +135,7 @@ export default class Monitor extends THREE.Object3D{
|
|
|
this.updateAspect()
|
|
|
|
|
|
if(data.showTitle){
|
|
|
- let group = new THREE.Shim.FollowRootObject(this) //透明有问题,只有放到overlayScene里渲染了
|
|
|
+ let group = new THREE.Shim.FollowRootObject(this) //透明有问题,只有放到overlayScene里渲染了 (大小好像还是跟随模型了
|
|
|
|
|
|
this.titleLabel = new TextSprite({
|
|
|
text: data.name,
|
|
|
@@ -151,6 +153,15 @@ export default class Monitor extends THREE.Object3D{
|
|
|
group.add(this.titleLabel)
|
|
|
viewer.scene.overlayScene.add(group)
|
|
|
group.name = 'monitorLabel'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.addEventListener('isVisible',()=>{
|
|
|
+ Potree.Utils.updateVisible(group,'follow',this.realVisible())
|
|
|
+ })
|
|
|
+ this.parent.addEventListener('isVisible',()=>{
|
|
|
+ Potree.Utils.updateVisible(group,'follow',this.realVisible())
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -265,9 +276,10 @@ export default class Monitor extends THREE.Object3D{
|
|
|
position: camera.position.clone(),
|
|
|
quaternion: camera.quaternion.clone()
|
|
|
}
|
|
|
- this.showVideo(true)
|
|
|
+ this.data.showScope && this.showVideo(true)
|
|
|
this.video.pause()//先显示出画面
|
|
|
setTimeout(()=>{
|
|
|
+ this.data.showScope || this.showVideo(true)
|
|
|
viewer.mainViewport.cameraLayers = ['monitor'] //hide others
|
|
|
viewer.scene.monitors.forEach(e=>Potree.Utils.updateVisible(e,'watch', e == this ))
|
|
|
},800)
|
|
|
@@ -298,6 +310,7 @@ export default class Monitor extends THREE.Object3D{
|
|
|
viewer.mainViewport.view.cancelFlying()
|
|
|
viewer.mainViewport.cameraLayers = null
|
|
|
viewer.scene.monitors.forEach(e=>Potree.Utils.updateVisible(e,'watch', true ))
|
|
|
+ this.data.showScope || this.showVideo(false)
|
|
|
this.video.pause()
|
|
|
viewer.mainViewport.view.setView({
|
|
|
position: this.oldState.position,
|
|
|
@@ -309,7 +322,7 @@ export default class Monitor extends THREE.Object3D{
|
|
|
},
|
|
|
callback:()=>{
|
|
|
viewer.renderArea.style['pointer-events'] = '';
|
|
|
- this.showVideo(false)
|
|
|
+ this.data.showScope && this.showVideo(false)
|
|
|
viewer.mainViewport.view.setRotMode('standard')
|
|
|
},
|
|
|
duration:1000
|
|
|
@@ -446,47 +459,51 @@ export default class Monitor extends THREE.Object3D{
|
|
|
|
|
|
|
|
|
updateMesh() {
|
|
|
- console.log('updateMesh')
|
|
|
+
|
|
|
let nearHeight, nearWidth, farHeight, farWidth
|
|
|
nearHeight = Math.tan(THREE.MathUtils.degToRad(this.fov / 2)) * this.cylinderNear
|
|
|
nearWidth = nearHeight * this.aspect //根据canvas比例调整视频面的比例,保持和canvas一致。
|
|
|
farHeight = Math.tan(THREE.MathUtils.degToRad(this.fov / 2)) * this.cylinderFar
|
|
|
farWidth = farHeight * this.aspect
|
|
|
-
|
|
|
- // 投射体(底面以外)
|
|
|
- let vertices = [],
|
|
|
- bottomVertices = []
|
|
|
- vertices.push(-nearWidth, nearHeight, -this.cylinderNear)
|
|
|
- vertices.push(nearWidth, nearHeight, -this.cylinderNear)
|
|
|
- vertices.push(nearWidth, -nearHeight, -this.cylinderNear)
|
|
|
- vertices.push(-nearWidth, -nearHeight, -this.cylinderNear)
|
|
|
- bottomVertices.push(-farWidth, farHeight, -this.cylinderFar)
|
|
|
- bottomVertices.push(farWidth, farHeight, -this.cylinderFar)
|
|
|
- bottomVertices.push(farWidth, -farHeight, -this.cylinderFar)
|
|
|
- bottomVertices.push(-farWidth, -farHeight, -this.cylinderFar)
|
|
|
- vertices = vertices.concat(bottomVertices)
|
|
|
let firstBuild = !this.cylinder
|
|
|
- if (firstBuild) {
|
|
|
- let uvs = []
|
|
|
- uvs.push(0, 1, 1, 1, 1, 0, 0, 0)
|
|
|
- uvs.push(0, 1, 1, 1, 1, 0, 0, 0)
|
|
|
-
|
|
|
- let indexs = []
|
|
|
- indexs.push(0, 1, 3, 2, 3, 1)
|
|
|
- indexs.push(0, 1, 4, 5, 4, 1)
|
|
|
- indexs.push(1, 2, 5, 6, 5, 2)
|
|
|
- indexs.push(2, 3, 6, 7, 6, 3)
|
|
|
- indexs.push(3, 0, 7, 4, 7, 0)
|
|
|
- // indexs.push(4, 7, 5, 6, 5, 7)
|
|
|
- let cylinderGeo = new THREE.BufferGeometry()
|
|
|
- cylinderGeo.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2))
|
|
|
- cylinderGeo.setIndex(new THREE.BufferAttribute(new Uint16Array(indexs), 1))
|
|
|
- this.cylinder = new THREE.Mesh(cylinderGeo, this.normalMat)
|
|
|
- //if (this.control.player.$app.config.mobile) this.cylinder.rotateZ(-Math.PI / 2) //用户自己旋转屏幕吧
|
|
|
+ if(this.data.showScope){
|
|
|
+ // 投射体(底面以外)
|
|
|
+ let vertices = [],
|
|
|
+ bottomVertices = []
|
|
|
+ vertices.push(-nearWidth, nearHeight, -this.cylinderNear)
|
|
|
+ vertices.push(nearWidth, nearHeight, -this.cylinderNear)
|
|
|
+ vertices.push(nearWidth, -nearHeight, -this.cylinderNear)
|
|
|
+ vertices.push(-nearWidth, -nearHeight, -this.cylinderNear)
|
|
|
+ bottomVertices.push(-farWidth, farHeight, -this.cylinderFar)
|
|
|
+ bottomVertices.push(farWidth, farHeight, -this.cylinderFar)
|
|
|
+ bottomVertices.push(farWidth, -farHeight, -this.cylinderFar)
|
|
|
+ bottomVertices.push(-farWidth, -farHeight, -this.cylinderFar)
|
|
|
+ vertices = vertices.concat(bottomVertices)
|
|
|
+
|
|
|
+ if (firstBuild) {
|
|
|
+ let uvs = []
|
|
|
+ uvs.push(0, 1, 1, 1, 1, 0, 0, 0)
|
|
|
+ uvs.push(0, 1, 1, 1, 1, 0, 0, 0)
|
|
|
+
|
|
|
+ let indexs = []
|
|
|
+ indexs.push(0, 1, 3, 2, 3, 1)
|
|
|
+ indexs.push(0, 1, 4, 5, 4, 1)
|
|
|
+ indexs.push(1, 2, 5, 6, 5, 2)
|
|
|
+ indexs.push(2, 3, 6, 7, 6, 3)
|
|
|
+ indexs.push(3, 0, 7, 4, 7, 0)
|
|
|
+ // indexs.push(4, 7, 5, 6, 5, 7)
|
|
|
+ let cylinderGeo = new THREE.BufferGeometry()
|
|
|
+ cylinderGeo.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2))
|
|
|
+ cylinderGeo.setIndex(new THREE.BufferAttribute(new Uint16Array(indexs), 1))
|
|
|
+ this.cylinder = new THREE.Mesh(cylinderGeo, this.normalMat)
|
|
|
+ //if (this.control.player.$app.config.mobile) this.cylinder.rotateZ(-Math.PI / 2) //用户自己旋转屏幕吧
|
|
|
+ this.obj3d.add(this.cylinder)
|
|
|
+ }
|
|
|
+ this.cylinder.geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3))
|
|
|
+ }else if(!this.cylinder){
|
|
|
+ this.cylinder = new THREE.Group()
|
|
|
this.obj3d.add(this.cylinder)
|
|
|
}
|
|
|
- this.cylinder.geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3))
|
|
|
-
|
|
|
// 投射体底面 (视频)
|
|
|
const bottomGeo = new THREE.PlaneGeometry(farWidth * 2, farHeight * 2)
|
|
|
if (firstBuild) {
|
|
|
@@ -498,13 +515,15 @@ export default class Monitor extends THREE.Object3D{
|
|
|
}
|
|
|
this.cylinder.bottom.position.set(0, 0, this.cylinderNear - this.cylinderFar)
|
|
|
|
|
|
- // 投射体线框
|
|
|
- if (firstBuild) {
|
|
|
- this.cylinder.line = new THREE.LineSegments(new THREE.EdgesGeometry(this.cylinder.geometry), new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.6, transparent: true }))
|
|
|
- this.cylinder.add(this.cylinder.line)
|
|
|
- } else {
|
|
|
- this.cylinder.line.geometry.dispose()
|
|
|
- this.cylinder.line.geometry = new THREE.EdgesGeometry(this.cylinder.geometry)
|
|
|
+ if(this.data.showScope){
|
|
|
+ // 投射体线框
|
|
|
+ if (firstBuild) {
|
|
|
+ this.cylinder.line = new THREE.LineSegments(new THREE.EdgesGeometry(this.cylinder.geometry), new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.6, transparent: true }))
|
|
|
+ this.cylinder.add(this.cylinder.line)
|
|
|
+ } else {
|
|
|
+ this.cylinder.line.geometry.dispose()
|
|
|
+ this.cylinder.line.geometry = new THREE.EdgesGeometry(this.cylinder.geometry)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|