potree-sdk/src/objects/Axis.js

import * as THREE from "../../libs/three.js/build/three.module.js"; 
import {MeshDraw,LineDraw} from '../utils/DrawUtil.js'
 
/*  

                 z   
                 |
                 |
                 |
                 | 
       x <-------|   中心为点云position加boudingbox中心
                /
               /
             y

 */
 
var lineLen = 2, stemLen = 4, arrowLen = 2, lineDisToStem = 5;
var opacity = 0.5
export default class Axis extends THREE.Object3D {// 坐标轴
	constructor (position) {
		super()
        this.getArrow() 
        this.createArrows()
        //this.position.copy(position) 点云的中心点就是在(0,0,0)
        //this.scale.set(2,2,2)
    }
    getArrow(){
        var arrowGroup = new THREE.Object3D()
        
        
        
        var line = LineDraw.createLine([new THREE.Vector3, new THREE.Vector3(0,0,lineLen)])
        var stem = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.3, stemLen)) 
            stem.position.set(0,0,lineLen+lineDisToStem+stemLen/2);
        var arrow = new THREE.Mesh(new THREE.CylinderBufferGeometry( 0, 0.6, arrowLen, 12, 1, false ));//radiusTop = 1, radiusBottom = 1, height = 1, radialSegments = 8, heightSegments = 1, openEnded = false, thetaStart = 0, thetaLength = Math.PI * 2
            arrow.position.set(0,0,lineLen+lineDisToStem+stemLen + arrowLen/2);
            arrow.rotation.set(Math.PI/2,0,0)
            
        arrowGroup.add(stem)
        arrowGroup.add(line)
        arrowGroup.add(arrow)
        
        this.arrowGroup = arrowGroup
        
    } 
    
    
    
    createArrows(){ 


        var material = new THREE.MeshBasicMaterial({color:"#00d7df",side:2,transparent:true,opacity:0.8, depthWrite:false});
        let axis = Object.keys(Potree.config.axis)
        axis.forEach((axisText)=>{
            let color =  Potree.config.axis[axisText].color
            var group = this.arrowGroup.clone()
            
            group.children.forEach(e=>{
                e.material = e.material.clone()
                /* e.material.opacity = opacity
                e.material.transparent = true */
                e.material.color.set(color)
            })  
            
            var label = this.createLabel(axisText, color)  
                label.position.set(0, 0, lineLen + stemLen + arrowLen + lineDisToStem + 3);
                group.add(label) 
        

            if(axisText == 'y'){
                group.rotation.x = -Math.PI / 2
            }else if(axisText == 'x'){
                group.rotation.y = Math.PI / 2
            } 
            
            this.add(group)
        }) 
        
    }

    createLabel(text,color){
        var canvas = document.createElement("canvas")
        var context = canvas.getContext("2d");
        canvas.width = 256,
        canvas.height = 256; 
        var fontSize = 120  
        context.fillStyle =  color //"#00ffee";
        context.font = "normal " + fontSize + "px 微软雅黑" 
        var textWidth = context.measureText(text).width; 
        context.clearRect(0,0,canvas.width,canvas.height);
        context.fillText(text, (canvas.width - textWidth) / 2 , (canvas.height + fontSize) / 2);
         
        var tex = new THREE.Texture(canvas); 
        tex.needsUpdate = true


        tex.minFilter = THREE.NearestFilter//防止边缘发黑
        tex.magFilter = THREE.NearestFilter//防止边缘发黑
        var sprite = new THREE.Sprite(new THREE.SpriteMaterial({ 
            map: tex  , // depthWrite:false,
             
        })) 
        
        sprite.renderOrder = 1//防止在透明后还是出现白矩形挡住其他mesh
        sprite.scale.set(3,3,3)
        return sprite
       
    }
   
}