potree-sdk/src/navigation/Reticule.js

import * as THREE from "../../libs/three.js/build/three.module.js";

import {transitions, esing, lerp} from '../utils/transitions.js'



let texLoader = new THREE.TextureLoader()
let defaultOpacity =  0.7
//鼠标指示小圆片 
export default class Reticule extends THREE.Mesh{
    constructor(inputHandler){
        var defaultTex = texLoader.load(Potree.config.urls.localTextures+'whiteCircle.png'/* reticule-256x256.png'  */)  
        var crosshairTex = texLoader.load(Potree.config.urls.localTextures+'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,
        }))
        
        
        
        
        /*  new THREE.RawShaderMaterial({
            side: THREE.DoubleSide,
            depthWrite: !1,
            depthTest: !1,
            transparent: !0,
            vertexShader: shaders.waypoint.vertexShader,
            fragmentShader: shaders.waypoint.fragmentShader,
            uniforms: uniform,
            name: "waypoint",
            opacity: 0
        })); */
        
        
        
        
        
        //this.layers.set(0/* RenderLayers.RETICULE */);
        this.renderOrder = 0
       
        this.direction = new THREE.Vector3;
        this.hidden = !0;
        this.mouseLastMoveTime = Date.now();


        inputHandler.addInputListener(this);
        this.addEventListener('mousemove',this.move.bind(this))
        
        this.addEventListener('measureMovePoint',()=>{
            this.material.map = crosshairTex
        }) 
        this.addEventListener('endMeasureMove',()=>{
            this.material.map = defaultTex 
        }) 
         
    
    }

    move(){
        this.hidden = false,
        this.mouseLastMoveTime = Date.now()
    }

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

    show(){
        //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, cameraPos ){
        if (!this.hidden) {
            if (!intersectPoint || !intersectPoint.point.normal)
                return //this.hide();
            var i = intersectPoint.location
                , n = cameraPos.distanceTo(i)
                , r = 1 + .01 * n;
            n < 1 && (r -= 1 - n)
            
            let normal = new THREE.Vector3().fromArray(intersectPoint.point.normal)
            this.show();
            this.scale.set(r, r, r);
            this.direction = this.direction.multiplyScalar(.8); 
            this.direction.add(normal.clone().multiplyScalar(.2));
            this.position.copy(i).add(normal.clone().multiplyScalar(.01));
            this.lookAt(this.position.clone().add(this.direction));
        }
    }
}