potree-sdk/src/navigation/Reticule.js

import * as THREE from "../../libs/three.js/build/three.module.js";
import {MOUSE} from '../defines.js'
import {transitions, easing, lerp} from '../utils/transitions.js'
import math from '../utils/math.js'


let texLoader = new THREE.TextureLoader()
let defaultOpacity =  0.7
//鼠标指示小圆片 
export default class Reticule extends THREE.Mesh{
    constructor(viewer){
        var defaultTex = texLoader.load(Potree.resourcePath+'/textures/whiteCircle.png'/* reticule-256x256.png'  */)  
        var crosshairTex = texLoader.load(Potree.resourcePath+'/textures/reticule_cross_hair.png') 
        
        super(new THREE.PlaneBufferGeometry(0.15,0.15,1,1),new THREE.MeshBasicMaterial({
            side: THREE.DoubleSide , 
            map: defaultTex,
            transparent:true,
            depthTest: !1,
            opacity: defaultOpacity,
            //depthWrite: !1,
        })) 
        
        //this.layers.set(0/* RenderLayers.RETICULE */);
        this.renderOrder = 0
        this.layers.set(Potree.config.renderLayers.marker);
        
        
        this.direction = new THREE.Vector3;
        this.hidden = !0;
        this.mouseLastMoveTime = Date.now();


        //viewer.inputHandler.addInputListener(this);
        viewer.addEventListener('global_mousemove',this.move.bind(this))
        
        viewer.addEventListener('measureMovePoint',()=>{
            this.material.map = crosshairTex
            this.state = 'crosshair' 
        }) 
        viewer.addEventListener('endMeasureMove',()=>{
            this.material.map = defaultTex 
            this.state = 'default' 
        }) 
        this.state = 'default'
        
        viewer.setObjectLayers(this, 'reticule' )
    }

    move(e){
        if(e.buttons == MOUSE.NONE || this.state == 'crosshair' ){//按下时不更新，除非拖拽测量
            this.hidden = false,
            this.mouseLastMoveTime = Date.now()
            
            this.updatePosition(e.intersectPoint, e.hoverViewport)
        }
    }

    hide(){
        //console.log("hide Reticule")
        this.hidden || (this.hidden = !0,
        transitions.start(lerp.property(this.material , "opacity", 0), 500))
    }

    show(){
        if(!this.visible)return
        //console.log("show Reticule")
        this.hidden = !1,
        this.material.opacity <= 0 && transitions.start(lerp.property(this.material, "opacity", defaultOpacity), 300)
    }

    //鼠标静止一段时间它就会消失
    updateVisible(){
        Date.now() - this.mouseLastMoveTime > 1500 && !this.hidden && this.hide()
    }

    updatePosition(intersectPoint, viewport ){ //在地图(当地图融合到viewer时)和场景里都显示且完全相同（大小可能不同）
        if (!this.hidden && this.visible) {
            if (!intersectPoint /* || !intersectPoint.point.normal */)
                return //this.hide();
            var atMap = !intersectPoint.location
            let normal = intersectPoint.point ? new THREE.Vector3().fromArray(intersectPoint.point.normal ) : new THREE.Vector3(0,0,1)//地图无normal
            let s, camera
            let location = intersectPoint.location || intersectPoint.orthoIntersect.clone()
                
            if(!atMap){
                camera = viewport.camera
                let n = camera.position.distanceTo(location)
                s = 1 + .01 * n;
                n < 1 && (s -= 1 - n)
            }else{
                camera = viewer.mapViewer.camera
                s = math.getScaleForConstantSize({width2d:300, position:location, camera, resolution:viewport.resolution2} )
                location.setZ(0);//低于相机高度即可
            }
            
            
            
            this.show();
            this.scale.set(s, s, s);
            this.direction = this.direction.multiplyScalar(.8); 
            this.direction.add(normal.clone().multiplyScalar(.2));
            this.position.copy(location).add(normal.clone().multiplyScalar(.01));
            this.lookAt(this.position.clone().add(this.direction));
        }
    }
}