potree-sdk/src/utils/Magnifier.js

import * as THREE from "../../libs/three.js/build/three.module.js";
import math from './math'
import Viewport from '../viewer/Viewport'
 
let texLoader = new THREE.TextureLoader() 
let circleGeo = new THREE.CircleGeometry(1.45,100);
 
 
 
const magDistance_ = 2;//相机离目标位置的距离的分界线，当离得远时要缩小fov以使看到的视野固定（望远镜效果）
const radius_ = 0.2; //当相机离目标位置的距离>magDistance_时，希望看到的视野的半径
const maxFov = THREE.Math.radToDeg(Math.atan(radius_ / magDistance_ )) * 2//提前计算出当相机离目标位置的距离<magDistance_时的fov，均使用=magDistance_时的fov。只要保证该fov大于主相机的fov就会有放大效果 
const width2dPX = 200/1.4;//px
const sphereGeo = new THREE.SphereBufferGeometry(0.02,10,10);


export default class Magnifier extends THREE.Object3D {//放大镜or望远镜
	constructor (viewer) {
		super()
        this.width = this.height = 256;
        this.camera = new THREE.PerspectiveCamera(50, 1, 0.1, 10000);  //fov aspect near far
        this.camera.up = new THREE.Vector3(0,0,1) 
        
        
        this.viewport = new Viewport( null, this.camera, {
            left:0, bottom:0, width:1, height: 1, name:'magnifier' , cameraLayers:['magnifierContent']
        })
        this.viewport.setResolution(this.width, this.height,0,0)
        
        
        this.renderTarget = new THREE.WebGLRenderTarget(this.width,this.height, { 
            minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter,
            format: THREE.RGBAFormat ,
            /* type: THREE.FloatType,
            minFilter: THREE.NearestFilter,
			magFilter: THREE.NearestFilter, 
			  */ 
        } )
        
		this.rtEDL = new THREE.WebGLRenderTarget(this.width, this.height, {
			minFilter: THREE.NearestFilter,
			magFilter: THREE.NearestFilter,
			format: THREE.RGBAFormat,
			type: THREE.FloatType,
			depthTexture: new THREE.DepthTexture(undefined, undefined, THREE.UnsignedIntType)
		});
        
        
        
        this.mesh = new THREE.Mesh(circleGeo, new THREE.MeshBasicMaterial({
            side: THREE.DoubleSide , 
            map: this.renderTarget.texture ,
            transparent:true,
            depthTest: !1,
            //depthWrite: !1,
        }))
        this.overlayMesh = new THREE.Mesh(circleGeo, new THREE.MeshBasicMaterial({
            side: THREE.DoubleSide , 
            map:texLoader.load(Potree.resourcePath+'/textures/crosshair.png') ,
            transparent:true,
            depthTest: !1,
            //depthWrite: !1,
        }))
        
        this.targetPoint = new THREE.Mesh(sphereGeo, new THREE.MeshBasicMaterial({ 
            color:"#ff0000",
            transparent:true,
            opacity:0.7,
             
        }))
        this.targetPoint.name = 'magnifierPointTarget'
        viewer.scene.scene.add(this.targetPoint)
        viewer.setObjectLayers(this.targetPoint, 'magnifierContent' )
        
        this.add(this.mesh)
        this.add(this.overlayMesh)
        
        this.position.set(-1000,-1000,-100000)//令它看不见
        this.mesh.renderOrder = 10;
        this.overlayMesh.renderOrder = 11;
        this.aimPos
        viewer.setObjectLayers(this, 'magnifier' )
        //viewer.inputHandler.addInputListener(this)
        
        viewer.addEventListener('camera_changed',(e)=>{ // 平移、滚轮时更新
            if(e.viewport == viewer.mainViewport) this.update()
        })
            

        
        
        this.mesh.layers.set(Potree.config.renderLayers.magnifier);
        this.overlayMesh.layers.set(Potree.config.renderLayers.magnifier);
        //this.layers.set(Potree.config.renderLayers.magnifier);//这句在外层写没用
        
        this.dontRender = false 
        viewer.addEventListener('global_drag', (e)=>{//拖拽时不渲染。主要是右键平移时渲染延迟了，会闪烁。 
            this.dontRender = true 
        })
        viewer.addEventListener('global_drop', (e)=>{
            this.dontRender = false
        })
        viewer.addEventListener('global_mouseup', (e)=>{//测量时拖拽场景再mouseup
            this.dontRender = false
        })
        
        var updateVisi = (e)=>{
            if(e.hoverViewport == viewer.mainViewport){
                viewer.updateVisible(this,"atViewport", true)
                this.update(e.intersectPoint && e.intersectPoint.location)
            }else{
                viewer.updateVisible(this,"atViewport", false) //小地图不显示
            }
            
        }
        
        viewer.addEventListener('global_mousemove', updateVisi)
        viewer.addEventListener('global_touchstart', updateVisi)
      
        
        
        
        
        
        /* viewer.addEventListener("beginSplitView",()=>{
            this.updateVisible("splitView", false) 
        })
        viewer.addEventListener("finishSplitView",()=>{
            this.updateVisible("splitView", true) 
        })  */
         
         
        this.addEventListener("setEnable",(e)=>{
            viewer.updateVisible(this, "enable", e.value) //界面开关
        })
         
         
        if(Potree.settings.isOfficial){
            viewer.updateVisible(this, "enable", false) 
        }else{
            viewer.updateVisible(this, "measure", false) 
            viewer.addEventListener("measureMovePoint",()=>{//测量开始
                viewer.updateVisible(this, "measure", true) 
            })
            viewer.addEventListener("endMeasureMove",()=>{
                viewer.updateVisible(this, "measure", false) 
            })
        }
    }
    
    
    /* updateVisible(reason, ifShow){//当所有加入的条件都不为false时才显示
        if(ifShow){
            var index = this.unvisibleReasons.indexOf(reason)
            index > -1 && this.unvisibleReasons.splice(index, 1)
            if(this.unvisibleReasons.length == 0)this.visible = true
        }else{
            if(!this.unvisibleReasons.includes(reason)) this.unvisibleReasons.push(reason)
            this.visible = false    
        }
        
    } */
    
    
    update(aimPos){ 
        
        aimPos = aimPos instanceof THREE.Vector3 ?  aimPos : this.aimPos
        if(!aimPos  || !this.visible)return
        //console.log(aimPos)
    
        //相机位置
        var playerCamera = viewer.scene.getActiveCamera()
        var playerPos = playerCamera.position;//viewer.scene.view.getPivot()
        var dis = playerPos.distanceTo(aimPos);
        /* var vec = playerPos.clone().sub(aimPos).normalize().multiplyScalar(dis > magDistance_ ? magDistance_ : magDistance_/2)
        this.camera.position.copy(aimPos.clone().add(vec)) 
        this.camera.lookAt(aimPos) */
        
        if(dis<magDistance_){
            this.camera.fov = maxFov
        }else{
            this.camera.fov = THREE.Math.radToDeg(Math.atan(radius_ / dis )) * 2 //radius_是能看到的范围半径。当dis大于magDistance_时就放大，否则维持fov为maxFov
        }
        this.camera.updateProjectionMatrix()
        this.camera.position.copy(playerPos)
        this.camera.lookAt(aimPos)
        
        this.quaternion.copy(playerCamera.quaternion);

        //mesh位置
        let screenPos = viewer.inputHandler.mouse.clone();
        let clientWidth = viewer.inputHandler.domElement.clientWidth * viewer.mainViewport.width;
        let clientHeight = viewer.inputHandler.domElement.clientHeight * viewer.mainViewport.height;
        screenPos.x = screenPos.x / clientWidth * 2 - 1;
        screenPos.y = -((screenPos.y  < 300 ? 200 : -200) + screenPos.y) / clientHeight * 2 + 1;
    
                
        let newPos = new THREE.Vector3(screenPos.x,screenPos.y,0.8).unproject(playerCamera); //z:-1朝外       
        let dir = newPos.clone().sub(playerPos).normalize().multiplyScalar(10);//这个数值要大于playerCamera.near
        
        this.position.copy(playerPos.clone().add(dir))
         

        this.aimPos = aimPos
        this.targetPoint.position.copy(aimPos);
        
        var scale = math.getScaleForConstantSize({// 
            width2d : width2dPX,
            camera:viewer.scene.getActiveCamera(),  position: this.getWorldPosition(new THREE.Vector3()),
            resolution: viewer.mainViewport.resolution2
        })
        this.scale.set(scale, scale, scale); 
 
        if(!this.dontRender){
            this.waitRender = true
        }
        
 
           
    }//位置需要计算，不仅仅是点云，所以需要深度图
    
    render(){ 
 
        if(!this.waitRender)return
        //this.visible = false;//防止放大镜里有自己
        viewer.render({
            target : this.renderTarget,
            viewports : [this.viewport],
            camera : this.camera,
            magnifier : true,
            rtEDL: this.rtEDL 
            /* width :this.renderTarget.width,
            height: this.renderTarget.height, */
        })
        //this.visible = true;
        this.waitRender = false
    }
   
}