potree-sdk/src/custom/objects/tool/AxisViewer.js

 
import * as THREE from "../../../../libs/three.js/build/three.module.js";
  
 
import {ViewerBase} from "../../viewer/viewerBase.js" 
import Viewport from "../../viewer/Viewport.js"

import {ExtendView} from "../../../viewer/ExtendView.js"
import {LineDraw/* , MeshDraw */} from "../../utils/DrawUtil.js";
 
import {TextSprite} from '../TextSprite.js'

 

export default class AxisViewer extends ViewerBase{
    constructor(listenViewport, parentArea, options={}){
        let domElement = $(`<div name="Axisdom" viewport=${listenViewport.name}></div>`)
        $(parentArea).append(domElement)
        
        
         
        let posInfo = Object.assign({
            //default:
            right: 0, top:0, width:'100px', height:'100px'
        },options.domStyle,{
            position:'absolute'
        }) 
        if(options.domStyle){
            if(options.domStyle.bottom != void 0){
                delete posInfo.top 
            }
            if(options.domStyle.left != void 0){
                delete posInfo.right 
            }
        } 
        domElement.css(posInfo)
        
                    
        
        
        super(domElement[0],{name:'axis', antialias:true } )
        
        
    
        this.listenViewport = listenViewport
        
        Object.defineProperty(listenViewport, 'axis', {
          value: this,
          writable: true, // 可写（可选）
          enumerable: false, // 不可枚举
          configurable: true // 可配置（可选）
        });
      
        this.scene = new THREE.Scene   
        //this.camera = new THREE.PerspectiveCamera(30, 1,  1, this.radius*3); 
         
         
        let w = 50
        this.camera = new THREE.OrthographicCamera(-w/2,w/2,w/2,-w/2 , 1, w*4);  
        this.camera.zoom = 2.7//(domElement.clientWidth || 300) / w * 1.267//zoom越大视野越小
        this.camera.updateProjectionMatrix() 
         
         
        this.view = new ExtendView(); 
        this.view.radius = 70
        this.viewports = [new Viewport( this.view, this.camera, {
            left:0, bottom:0, width:1, height: 1, name:'axis' 
        }) ]
        this.updateScreenSize() 
        
        
        this.createAxis()
        
        let updateCamera = e => {
            if (e.viewport == listenViewport && e.changeInfo.quaternionChanged) {
                 this.update()
            } 
        }  
        viewer.addEventListener('camera_changed', updateCamera)
        
        
        
        let repos = ()=>{
            
            
            if(!listenViewport.active || listenViewport.width == 0 || listenViewport.height == 0){
                return domElement.css('visibility','hidden')
            }
            domElement.css('visibility','visible')
            
            let props = [['left','right', 'width'],['bottom','top', 'height']]
             
            let set = (prop)=>{ 
                let str
                let name = posInfo[prop[1]] != void 0 ? prop[1] : prop[0]
                let percent = posInfo[prop[1]] != void 0  ?  (1-listenViewport[prop[0]] - listenViewport[prop[2]]) : listenViewport[prop[0]] 
                if(posInfo[name] == 0 || posInfo[name].includes('%')){
                    str = (parseFloat(posInfo[name]) + percent * 100) + '%'
                }else{//px
                    str = 'calc('+(percent * 100) + '% + ' + posInfo[name] + ')'
                }  
                domElement.css(name, str)
            }
             
            set(props[0])
            set(props[1])
            
        } 
              
        this.listenViewport.addEventListener('resize',repos)
        
        this.addEventListener('dispose',()=>{
            viewer.removeEventListener('camera_changed', updateCamera)
            viewer.removeEventListener('resize', repos) 
        })
        
        repos()
        this.update()
    }
    
    createAxis(){
        let axis = new THREE.Object3D
         
        
        ;['x','y','z'].forEach((axisText)=>{
            let color = new THREE.Color().set(Potree.config.axis[axisText].color)
            let group = new THREE.Object3D
            let line = LineDraw.createLine([new THREE.Vector3, new THREE.Vector3(0,0,7)],{color})
         
            let label = this.createLabel(axisText, color)  
                label.position.set(0,0,11 /*  + this.renderArea.clientWidth/200 */);
                
            if(axisText == 'y'){
                group.rotation.x = -Math.PI / 2
            }else if(axisText == 'x'){
                group.rotation.y = Math.PI / 2
            } 
            
            group.add(line) 
            group.add(label)
            axis.add(group)
        }) 
        
        
        
        this.axis = axis;
        this.scene.add(this.axis)
    }
    
    createLabel(text, color){
        let fontsize = this.renderArea.clientWidth / 5    //20//Math.round( Potree.math.linearClamp(this.renderArea.clientWidth, [80,500],[12,50])) 
        let s = 3100 / this.renderArea.clientWidth
        
        console.log('fontsize',fontsize)
        let label = new TextSprite({   
            backgroundColor: {r: 0, g: 0, b: 0, a:0},
            textColor: {r: color.r * 255, g: color.g*255, b: color.b*255, a:1},
            fontsize, 
            //useDepth : true ,
            renderOrder : 5,// pickOrder:5,
            fontWeight:'Lighter',
            text, name:'axis' ,
            viewports: this.viewports
        })
        
        label.scale.set(s,s,s)
        return label
    }  

    
    update(){
        
        this.updateCamera()
        this.render()
    } 
    
    
    updateCamera(){  
        let view = this.listenViewport.view
        this.view.yaw = view.yaw  
        this.view.pitch = view.pitch   
        var dir = view.direction;  //相机朝向
        this.view.position.copy(dir.multiplyScalar(this.view.radius).negate())  //相机绕着指南针中心（000）转动
        this.view.applyToCamera(this.camera) 
    }   
        
        
    render(){
        viewer.dispatchEvent({type:"render.begin", viewport:this.viewports[0]}) //update sprite
        this.renderer.render(this.scene, this.camera)
    }
        
    dispose(){
        this.axis.traverse((child)=>{
            if(child instanceof TextSprite){
                child.dispose()
            }else if(child instanceof THREE.LineSegments){
                child.material.dispose();
                child.geometry.dispose()
            }
        })
        super.dispose() 
        this.renderArea.parentElement.removeChild(this.renderArea)
        delete this.listenViewport.axis
    }
}