potree-sdk/src/utils/TransformationToolNew.js

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

import History from "../custom/utils/History.js"
//问题：如何转换到世界坐标？(缩放方向有bug。)

//add-------------------------------------
const OpaWhenNotSelect = 0.6
const ScaleRatio =  3
const OutlineColor = 0x666666
//----------------------------------------
const hideFocusHandles = true//add


export class TransformationTool extends THREE.EventDispatcher{
	constructor(viewer  ) {
        super()
		this.viewer = viewer;
        this.modesEnabled = {}//add
        this.style = 'singleMode' //建mesh时按照singleModes建的
        
		this.scene = new THREE.Scene(); 
		this.selection = [];
		this.pivot = new THREE.Vector3();
		this.dragging = false;
		this.showPickVolumes = false;

		this.viewer.inputHandler.registerInteractiveScene(this.scene);
		this.viewer.inputHandler.addEventListener('selection_changed', (e) => {
			/* for(let selected of this.selection){ //若不删除，应该会穿过选中的物体选到别的而不是取消选择
				this.viewer.inputHandler.blacklist.delete(selected);
			} */

			this.selection = e.selection;

			/* for(let selected of this.selection){
				this.viewer.inputHandler.blacklist.add(selected);
			} */

		}); 


        this.viewer.addEventListener('global_touchstart',(e)=>{ //add
            this.update()
        })
        this.viewer.addEventListener('global_mousemove',(e)=>{ //add
            this.onPointerMove()
        })


		let red = Potree.config.axis.x.color
		let green = Potree.config.axis.y.color
		let blue = Potree.config.axis.z.color
		let white = Potree.config.axis.xyz.color
        
        
		this.activeHandle = null;
		this.scaleHandles = {
			"scale.x+": {name: "scale.x+", node: new THREE.Object3D(), color: red, alignment: [+1, +0, +0]},
			"scale.x-": {name: "scale.x-", node: new THREE.Object3D(), color: red, alignment: [-1, +0, +0]},
			"scale.y+": {name: "scale.y+", node: new THREE.Object3D(), color: green, alignment: [+0, +1, +0]},
			"scale.y-": {name: "scale.y-", node: new THREE.Object3D(), color: green, alignment: [+0, -1, +0]},
			"scale.z+": {name: "scale.z+", node: new THREE.Object3D(), color: blue, alignment: [+0, +0, +1]},
			"scale.z-": {name: "scale.z-", node: new THREE.Object3D(), color: blue, alignment: [+0, +0, -1]},
            "lines": {name:'lines', node: new THREE.Object3D(), dontScale:true }//add
        };
		this.focusHandles = {
			"focus.x+": {name: "focus.x+", node:  new THREE.Object3D(), color: red, alignment: [+1, +0, +0]},
			"focus.x-": {name: "focus.x-", node:  new THREE.Object3D(), color: red, alignment: [-1, +0, +0]},
			"focus.y+": {name: "focus.y+", node:  new THREE.Object3D(), color: green, alignment: [+0, +1, +0]},
			"focus.y-": {name: "focus.y-", node:  new THREE.Object3D(), color: green, alignment: [+0, -1, +0]},
			"focus.z+": {name: "focus.z+", node:  new THREE.Object3D(), color: blue, alignment: [+0, +0, +1]},
			"focus.z-": {name: "focus.z-", node:  new THREE.Object3D(), color: blue, alignment: [+0, +0, -1]},
		};
		this.translationHandles = {
			"translation.x": {name: "translation.x", node:  new THREE.Object3D(), color: red, alignment: [1, 0, 0]},
			"translation.y": {name: "translation.y", node:  new THREE.Object3D(), color: green, alignment: [0, 1, 0]},
			"translation.z": {name: "translation.z", node:  new THREE.Object3D(), color: blue, alignment: [0, 0, 1]},
            //add
            'translation.xyz':{name: "translation.xyz", node:  new THREE.Object3D(),color: white, alignment: [0, 0, 0],  alignment2: [1, 1, 1]},
            'translation.plane.xy':{name: "translation.plane.xy", node:  new THREE.Object3D(),color: blue,alignment: [0, 0, 1], alignment2: [1, 1, 0]},
            'translation.plane.yz':{name: "translation.plane.yz", node:  new THREE.Object3D(),color: red, alignment: [1, 0, 0], alignment2: [0, 1, 1]},
            'translation.plane.xz':{name: "translation.plane.xz", node:  new THREE.Object3D(),color: green, alignment: [0, 1, 0], alignment2: [1, 0, 1]},
		};
		this.rotationHandles = {
			"rotation.x": {name: "rotation.x", node:  new THREE.Object3D(), color: red, alignment: [1, 0, 0]},
			"rotation.y": {name: "rotation.y", node:  new THREE.Object3D(), color: green, alignment: [0, 1, 0]},
			"rotation.z": {name: "rotation.z", node:  new THREE.Object3D(), color: blue, alignment: [0, 0, 1]},
		};
		this.handles = Object.assign({}, this.scaleHandles,    hideFocusHandles?{}:this.focusHandles, this.translationHandles, this.rotationHandles);
		this.pickVolumes = [];

		this.initializeScaleHandles();
		this.initializeFocusHandles();
		this.initializeTranslationHandles();
		this.initializeRotationHandles();
        
        
        
        

		let boxFrameGeometry = new THREE.Geometry();
		{
			// bottom
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, -0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, -0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, -0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, -0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, -0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, -0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, -0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, -0.5, 0.5));
			// top
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, 0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, 0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, 0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, 0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, 0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, 0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, 0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, 0.5, 0.5));
			// sides
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, -0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, 0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, -0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, 0.5, 0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, -0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(0.5, 0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, -0.5, -0.5));
			boxFrameGeometry.vertices.push(new THREE.Vector3(-0.5, 0.5, -0.5));
		}
		this.frame = new THREE.LineSegments(boxFrameGeometry, new THREE.LineBasicMaterial({color: 0xffff00}));
		this.scene.add(this.frame);
        
        
        
        //------------------add-----------------------
        
        this.setModeEnable(['scale','translation','rotation'])
        Potree.Utils.setObjectLayers(this.scene, 'transformationTool' )
		
        this.scene.traverse(e=>{
            e.pickDontCheckDis = true; //pick时不需要识别是否在点云之上
        })
        
        {
            let exist = (object)=>{//是否没被删除（暂时不考虑换了parent） 
                while(object.parent){
                    object = object.parent
                }
                if(object instanceof THREE.Scene){
                    return true
                }
            }
            this.history = new History({ //也可以写到全局，但需要加个判断物品是否存在的函数
                applyData: (data)=>{  
                    if(exist(data.object)){//viewer.scene.volumes.includes(data.box) //或许还要识别是否matrixAuto
                        data.matrix.decompose( data.object.position, data.object.quaternion, data.object.scale );
                        viewer.dispatchEvent('content_changed')
                        return true
                    } 
                } ,
                getData:(data)=>{ 
                    return data
                } 
            })
      
            this.addEventListener('transformed', (e)=>{ 
                let object = viewer.transformationTool.selection[0]
                this.history.beforeChange({object, matrix:e.matrixBefore.clone()} )
                this.viewer.dispatchEvent('content_changed') 
            })
            this.addEventListener('stopDrag', (e)=>{ 
                let object = viewer.transformationTool.selection[0]
                object && this.history.afterChange({object, matrix:object.matrix.clone()} )
            })
            /* viewer.inputHandler.addEventListener('keydown', (e)=>{
                if(e.keyCode == 90 && e.event.ctrlKey){//Z
                    this.history.undo()
                }else if(e.keyCode == 89 && e.event.ctrlKey){//Y
                    this.history.redo()
                }
            }) */
        }
	}
  
  
    setModeEnable(enableModes=[] ){//xzw add
       
        let length=0;
        ['translation','scale','rotation'].forEach(mode=>{
            let handels = this[mode + 'Handles']
            let enable = enableModes.includes(mode)
            
            for(let o in handels){
                Potree.Utils.updateVisible(handels[o].node,'modeForce', !!enable) 
            }
            this.modesEnabled[mode] = !!enable
            
            
            enable && length++
        })
        
        
        
        if(this.style == 'singleMode' && length > 1){
            this.changeStyle('mixedModes')
        }else if(this.style == 'mixedModes' && length == 1){
            this.changeStyle('singleMode')
        }
         
        
    }
     
    changeStyle(style){// 切换单个mode & 多个mode混合 风格（因多个混合比较拥挤，需要做调整）
        ['x','y','z'].forEach(axis=>{
            this.translationHandles['translation.'+axis].node.children.forEach(mesh=>{
                if(mesh.name.includes('arrow')){
                    Potree.Utils.updateVisible(mesh, 'modeStyle', style == 'singleMode') 
                }else if(mesh.name.includes('handle')){
                    mesh.material.lineWidth = style == 'singleMode' ? 5 : 8
                }
            })
            
        });
       
        ['xy','yz','xz'].forEach(axis=>{
            let handle = this.translationHandles['translation.plane.'+axis]
            
            let s =  style == 'singleMode' ? 15 : 12
            handle.node.children[0].scale.set(s,s,s);
            handle.node.children[0].position.fromArray(handle.alignment2).multiplyScalar(s*1.5)        
        })
        
        Potree.Utils.updateVisible(this.scaleHandles['lines'].node, 'modeStyle', style == 'singleMode') 
        
        
        this.style = style
    } 
    
    
    
    
	initializeTranslationHandles(){//大改

		let boxGeometry = new THREE.BoxGeometry(1, 1, 1);
        let length = 100 , arrowRadius = 4, arrowHeight = 10
        let arrowGeometry = new THREE.CylinderBufferGeometry( 0, arrowRadius, arrowHeight, 12, 1, false );//add 箭头朝(0,1,0)
        let arrowInitialQua = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1,0,0), -Math.PI/2 )//先将qua旋转到朝向0,0,-1, 因为一般quaternion不设置时默认表示朝向0,0,-1,
        let octahedronGeometry = new THREE.OctahedronBufferGeometry( 5, 0 );
         
        let planeGeometry =  new THREE.PlaneBufferGeometry( 1, 1 ) 
        
		for(let handleName of Object.keys(this.translationHandles)){
			let handle = this.handles[handleName];
			let node = handle.node;
			this.scene.add(node); 
            node.name = handleName//add
            
            
            let alignment = new THREE.Vector3(...handle.alignment)
            let geometry , mesh, pickVolume, meshScale, pickScale, rotation, position, lookAtPoint, hasPick = true, meshPickable = false, renderOrder
            let matProp = {
                color: handle.color,
                opacity: OpaWhenNotSelect, 
                transparent: true,
                side: handleName.includes('plane') ? THREE.DoubleSide : THREE.FrontSide
            }
            let material = new THREE.MeshBasicMaterial(matProp)  
		 

			let pickMaterial = new THREE.MeshNormalMaterial({
				opacity: 0.2,
				transparent: true,
				visible: this.showPickVolumes
			});

            
            if(handleName.includes('xyz') ){
                geometry = octahedronGeometry 
                meshPickable = true
                renderOrder = 12; 
            }else if(handleName.includes('plane') ){
                geometry = planeGeometry
                meshPickable = true
                
                position = new THREE.Vector3(...handle.alignment2) 
                lookAtPoint = alignment
                if(handleName.includes('xy') ) { 
                    
                }else if(handleName.includes('yz')){
                    
                }else if(handleName.includes('xz')){
                     
                }
            }else{
                geometry = boxGeometry
                
                
                let point = new THREE.Vector3(0,0,length/2)//new THREE.Vector3().copy(alignment).multiplyScalar(length/2)
                mesh = LineDraw.createFatLine([point, point.clone().negate()],{lineWidth:5, mat : new LineDraw.createFatLineMat(matProp)})
                lookAtPoint = alignment 
                renderOrder = 10; 
                
                pickScale = new THREE.Vector3(4, 4, length+arrowHeight*2) //pickScale = new THREE.Vector3(4, 4, 1.2) 
                   
                  
                {
                    let arrow = new THREE.Mesh(arrowGeometry, material)   
                    arrow.name = `${handleName}.arrow`;   
                    arrow.renderOrder = 11;  
                    arrow.position.set( ...handle.alignment).multiplyScalar(length/2+arrowHeight/2)
                    arrow.lookAt(0,0,0) 
                    node.add(arrow); 
                     
                    let arrow2 = arrow.clone(); 
                    arrow2.position.negate()
                    arrow2.lookAt(0,0,0)
                    node.add(arrow2);   
                     
                    arrow.quaternion.multiply(arrowInitialQua) //乘上初始旋转
                    arrow2.quaternion.multiply(arrowInitialQua) 
                    
                } 
                
            }
            
            mesh || (mesh = new THREE.Mesh(geometry,material))
            mesh.name = `${handleName}.handle`;
            node.add(mesh);
            renderOrder && (mesh.renderOrder = renderOrder)
            meshScale && mesh.scale.copy(meshScale) 
            rotation && mesh.rotation.copy(rotation)
            lookAtPoint && mesh.lookAt(lookAtPoint) 
            position && mesh.position.copy(position)
             
            if(!meshPickable && hasPick){
                pickVolume = new THREE.Mesh(geometry, pickMaterial); 
                pickScale && pickVolume.scale.copy(pickScale) 
            }else if(hasPick && meshPickable){
                pickVolume = mesh  
            }
            
            
            if(pickVolume){
                if(mesh != pickVolume){
                    mesh.add(pickVolume);
                    pickVolume.name = `${handleName}.pick_volume`;
                }else{
                    pickVolume.name += ' & pick_volume'
                }
                pickVolume.handle = handleName;
                
                this.pickVolumes.push(pickVolume);
            }
            
             
			node.setOpacity = (target) => {
                if(handleName.includes('plane')){
                    let more = 1.5; //减掉更多，使min更低，max还是1
                    target = 1 - (1-target)*more 
                }
                
				let opacity = {x: material.opacity};
				let t = new TWEEN.Tween(opacity).to({x: target},  0);
				t.onUpdate(() => {
					mesh.visible = opacity.x > 0;
					pickVolume && (pickVolume.visible = opacity.x > 0);
					material.opacity = opacity.x;
                    mesh.material.opacity = opacity.x;
					//outlineMaterial.opacity = opacity.x;
					pickMaterial.opacity = opacity.x * 0.5;
				});
				t.start();
			};

			pickVolume.addEventListener("drag", (e) => {this.dragTranslationHandle(e)});
			pickVolume.addEventListener("drop", (e) => {this.dropTranslationHandle(e)});
		}
	}
  
	initializeScaleHandles(){
		let sgSphere = new THREE.SphereGeometry(1, 32, 32);
		let sgLowPolySphere = new THREE.SphereGeometry(1, 16, 16);

		for(let handleName of Object.keys(this.scaleHandles)){ 
			let handle = this.scaleHandles[handleName];
			let node = handle.node;
            node.name = handleName//add
            
			this.scene.add(node);
            
            if(handleName == 'lines'){ //add 
                 
                ['x','y','z'].forEach(axis=>{
                    let handle1_ = this.scaleHandles['scale.'+axis+'+']
                    let handle2_ = this.scaleHandles['scale.'+axis+'-'] 
                   
                    let line = LineDraw.createFatLine([
                        new THREE.Vector3().fromArray(handle1_.alignment).multiplyScalar(0.5), 
                        new THREE.Vector3().fromArray(handle2_.alignment).multiplyScalar(0.5) ], 
                        {color:handle1_.color, lineWidth:4}  // , dontAlwaysSeen:true
                    )  
                    node.add(line) 
                }) 
                
                node.setOpacity = (opacity) => {
                    opacity *= 0.6
                    node.children.forEach(e=>e.material.opacity = opacity) 
                };
                
                continue;
            }
            
            
            
			node.position.set(...handle.alignment).multiplyScalar(0.5);
            
			let material = new THREE.MeshBasicMaterial({
				color: handle.color,
                side:THREE.DoubleSide,//xzw add
				opacity: OpaWhenNotSelect,
				transparent: true
				});

			let outlineMaterial = new THREE.MeshBasicMaterial({
				color: OutlineColor, 
				side: THREE.BackSide,
				opacity: OpaWhenNotSelect,
				transparent: true});

			let pickMaterial = new THREE.MeshNormalMaterial({
				opacity: 0.2,
				transparent: true,
                side:THREE.DoubleSide,//xzw add for orthoCam, 缩小画面时因球体放大导致到相机背面去了而看不到球体正面
				visible: this.showPickVolumes});

			let sphere = new THREE.Mesh(sgSphere, material);
			sphere.scale.set(5, 5, 5 );
			sphere.name = `${handleName}.handle`;
			node.add(sphere);
			sphere.renderOrder = 10
             
			/* let outline = new THREE.Mesh(sgSphere, outlineMaterial);
			outline.scale.set(1.1, 1.1, 1.1);
			outline.name = `${handleName}.outline`;
			sphere.add(outline); */

			let pickSphere = new THREE.Mesh(sgLowPolySphere, pickMaterial);
			pickSphere.name = `${handleName}.pick_volume`;
			pickSphere.scale.set(1.5, 1.5, 1.5);
			sphere.add(pickSphere);
			pickSphere.handle = handleName;
			this.pickVolumes.push(pickSphere);


			node.setOpacity = (target) => {
				let opacity = {x: material.opacity};
				let t = new TWEEN.Tween(opacity).to({x: target},  0);  //xzw改 原100毫秒，因为太慢容易选错
				t.onUpdate(() => {
					sphere.visible = opacity.x > 0;
					pickSphere.visible = opacity.x > 0;
					material.opacity = opacity.x;
					outlineMaterial.opacity = opacity.x;
					pickSphere.material.opacity = opacity.x * 0.5;
				});
				t.start();
			};

			pickSphere.addEventListener("drag", (e) => this.dragScaleHandle(e));
			pickSphere.addEventListener("drop", (e) => this.dropScaleHandle(e));

			pickSphere.addEventListener("mouseover", e => {
				//node.setOpacity(1);
			});

			pickSphere.addEventListener("click", e => {
				//e.consume();
			});

			pickSphere.addEventListener("mouseleave", e => {
				//node.setOpacity(OpaWhenNotSelect);
			});
		}
         
        
	}
    
    
	initializeRotationHandles(){
		let boldAdjust = 2.5;
		let torusGeometry = new THREE.TorusGeometry(1.4, boldAdjust * 0.015, 8, 64, Math.PI / 2);
		//let outlineGeometry = new THREE.TorusGeometry(1, boldAdjust * 0.018, 8, 64, Math.PI / 2);
		let pickGeometry = new THREE.TorusGeometry(1.4, boldAdjust * 0.06, 6, 4, Math.PI / 2);

		for(let handleName of Object.keys(this.rotationHandles)){
			let handle = this.handles[handleName];
			let node = handle.node;
			this.scene.add(node);
            node.name = handleName//add
			let material = new THREE.MeshBasicMaterial({
				color: handle.color,
				opacity: OpaWhenNotSelect,
				transparent: true
            });

			/* let outlineMaterial = new THREE.MeshBasicMaterial({
				color: OutlineColor, 
				side: THREE.BackSide,
				opacity: OpaWhenNotSelect,
				transparent: true
            }); */

			let pickMaterial = new THREE.MeshNormalMaterial({
				opacity: 0.2,
				transparent: true,
				visible: this.showPickVolumes
			});

			let box = new THREE.Mesh(torusGeometry, material);
			box.name = `${handleName}.handle`;
			box.scale.set(30, 30, 30);
			box.lookAt(new THREE.Vector3(...handle.alignment));
			node.add(box);
			handle.translateNode = box;

			/* let outline = new THREE.Mesh(outlineGeometry, outlineMaterial);
			outline.name = `${handleName}.outline`;
			outline.scale.set(1, 1, 1);
			outline.renderOrder = 0;
			box.add(outline);
             */
			let pickVolume = new THREE.Mesh(pickGeometry, pickMaterial);
			pickVolume.name = `${handleName}.pick_volume`;
			pickVolume.scale.set(1, 1, 1);
			pickVolume.handle = handleName;
			box.add(pickVolume);
			this.pickVolumes.push(pickVolume);

			node.setOpacity = (target) => {
				let opacity = {x: material.opacity};
				let t = new TWEEN.Tween(opacity).to({x: target}, 0);
				t.onUpdate(() => {
					box.visible = opacity.x > 0;
					pickVolume.visible = opacity.x > 0;
					material.opacity = opacity.x;
					//outlineMaterial.opacity = opacity.x;
					pickMaterial.opacity = opacity.x * 0.5;
				});
				t.start();
			};


			//pickVolume.addEventListener("mouseover", (e) => {
			//	//let a = this.viewer.scene.getActiveCamera().getWorldDirection(new THREE.Vector3()).dot(pickVolume.getWorldDirection(new THREE.Vector3()));
			//	console.log(pickVolume.getWorldDirection(new THREE.Vector3()));
			//});
			
			pickVolume.addEventListener("drag", (e) => {this.dragRotationHandle(e)});
			pickVolume.addEventListener("drop", (e) => {this.dropRotationHandle(e)});
		}
	}

	initializeFocusHandles(){
        if(hideFocusHandles)return//add
		//let sgBox = new THREE.BoxGeometry(1, 1, 1);
		let sgPlane = new THREE.PlaneGeometry(4, 4, 1, 1);
		let sgLowPolySphere = new THREE.SphereGeometry(1, 16, 16);

		let texture = new THREE.TextureLoader().load(`${exports.resourcePath}/icons/eye_2.png`);

		for(let handleName of Object.keys(this.focusHandles)){
			let handle = this.focusHandles[handleName];
			let node = handle.node;
			this.scene.add(node);
			let align = handle.alignment;
            node.name = handleName//add
			//node.lookAt(new THREE.Vector3().addVectors(node.position, new THREE.Vector3(...align)));
			node.lookAt(new THREE.Vector3(...align));

			let off = 0.8;
			if(align[0] === 1){
				node.position.set(1, off, -off).multiplyScalar(0.5);
				node.rotation.z = Math.PI / 2;
			}else if(align[0] === -1){
				node.position.set(-1, -off, -off).multiplyScalar(0.5);
				node.rotation.z = Math.PI / 2;
			}else if(align[1] === 1){
				node.position.set(-off, 1, -off).multiplyScalar(0.5);
				node.rotation.set(Math.PI / 2, Math.PI, 0.0);
			}else if(align[1] === -1){
				node.position.set(off, -1, -off).multiplyScalar(0.5);
				node.rotation.set(Math.PI / 2, 0.0, 0.0);
			}else if(align[2] === 1){
				node.position.set(off, off, 1).multiplyScalar(0.5);
			}else if(align[2] === -1){
				node.position.set(-off, off, -1).multiplyScalar(0.5);
			}

			let material = new THREE.MeshBasicMaterial({
				color: handle.color,
				opacity: 0,
				transparent: true,
				map: texture
			});

			//let outlineMaterial = new THREE.MeshBasicMaterial({
			//	color: 0x000000, 
			//	side: THREE.BackSide,
			//	opacity: 0,
			//	transparent: true});

			let pickMaterial = new THREE.MeshNormalMaterial({
				//opacity: 0,
				transparent: true,
				visible: this.showPickVolumes});

			let box = new THREE.Mesh(sgPlane, material);
			box.name = `${handleName}.handle`;
			box.scale.set(1.5, 1.5, 1.5);
			box.position.set(0, 0, 0);
			box.visible = false;
			node.add(box);
			//handle.focusNode = box;
			
			//let outline = new THREE.Mesh(sgPlane, outlineMaterial);
			//outline.scale.set(1.4, 1.4, 1.4);
			//outline.name = `${handleName}.outline`;
			//box.add(outline);

			let pickSphere = new THREE.Mesh(sgLowPolySphere, pickMaterial);
			pickSphere.name = `${handleName}.pick_volume`;
			pickSphere.scale.set(2, 2, 2);
			box.add(pickSphere);
			pickSphere.handle = handleName;
			this.pickVolumes.push(pickSphere);

			node.setOpacity = (target) => {
				let opacity = {x: material.opacity};
				let t = new TWEEN.Tween(opacity).to({x: target},  0);
				t.onUpdate(() => {
					pickSphere.visible = opacity.x > 0;
					box.visible = opacity.x > 0;
					material.opacity = opacity.x;
					//outlineMaterial.opacity = opacity.x;
					pickSphere.material.opacity = opacity.x * 0.5;
				});
				t.start();
			};

			//pickSphere.addEventListener("drag", e => {});

			pickSphere.addEventListener("mouseup", e => {
				//e.consume();
			});

			pickSphere.addEventListener("mousedown", e => {
				//e.consume();
			});

			pickSphere.addEventListener("click", e => {
				//e.consume();

				let selected = this.selection[0];
				let maxScale = Math.max(...selected.scale.toArray());
				let minScale = Math.min(...selected.scale.toArray());
				let handleLength = Math.abs(selected.scale.dot(new THREE.Vector3(...handle.alignment)));
				let alignment = new THREE.Vector3(...handle.alignment).multiplyScalar(2 * maxScale / handleLength);
				alignment.applyMatrix4(selected.matrixWorld);
				let newCamPos = alignment;
				let newCamTarget = selected.getWorldPosition(new THREE.Vector3());

				Utils.moveTo(this.viewer.scene, newCamPos, newCamTarget);
			});

			pickSphere.addEventListener("mouseover", e => {
				//box.setOpacity(1);
			});

			pickSphere.addEventListener("mouseleave", e => {
				//box.setOpacity(OpaWhenNotSelect);
			});
		}
	}

	dragRotationHandle(e){
		let drag = e.drag;
		let handle = this.activeHandle;
		let camera = this.viewer.mainViewport.camera//this.viewer.scene.getActiveCamera();

		if(!handle){
			return
		};

		let localNormal = new THREE.Vector3(...handle.alignment);
		let n = new THREE.Vector3();
		n.copy(new THREE.Vector4(...localNormal.toArray(), 0).applyMatrix4(handle.node.matrixWorld));
		n.normalize();

		if (!drag.intersectionStart){

			//this.viewer.scene.scene.remove(this.debug);
			//this.debug = new THREE.Object3D();
			//this.viewer.scene.scene.add(this.debug);
			//Utils.debugSphere(this.debug, drag.location, 3, 0xaaaaaa);
			//let debugEnd = drag.location.clone().add(n.clone().multiplyScalar(20));
			//Utils.debugLine(this.debug, drag.location, debugEnd, 0xff0000);

			drag.intersectionStart = drag.location;
			drag.objectStart = drag.object.getWorldPosition(new THREE.Vector3());
			drag.handle = handle;

			let plane = new THREE.Plane().setFromNormalAndCoplanarPoint(n, drag.intersectionStart);

			drag.dragPlane = plane;
			drag.pivot = drag.intersectionStart;
		}else{
			handle = drag.handle;
		}
        if(!drag.dragPlane)return//xzw add 因有时候没有
		this.dragging = true;

		let pointer = this.viewer.inputHandler.pointer
		let domElement = this.viewer.renderer.domElement;
		let ray = Utils.mouseToRay(pointer, camera, domElement.clientWidth, domElement.clientHeight);
		
		let I = ray.intersectPlane(drag.dragPlane, new THREE.Vector3());

		if (I) {
			let center = this.scene.getWorldPosition(new THREE.Vector3());
			let from = drag.pivot;
			let to = I;

			let v1 = from.clone().sub(center).normalize();
			let v2 = to.clone().sub(center).normalize();

			let angle = Math.acos(v1.dot(v2));
			let sign = Math.sign(v1.cross(v2).dot(n));
			angle = angle * sign;
			if (Number.isNaN(angle)) {
				return;
			}
            let matrixBefore = this.selection[0].matrix.clone()
			let normal = new THREE.Vector3(...handle.alignment);
			for (let selection of this.selection) {
				selection.rotateOnAxis(normal, angle);
				selection.dispatchEvent({
					type: "orientation_changed",
					object: selection
				});
			}
            this.dispatchEvent({type:'transformed', changeType: ['orientation'], matrixBefore })//add
			drag.pivot = I;
		}
	}

	dropRotationHandle(e){
		this.dragging = false;
		this.setActiveHandle(null);
        this.dispatchEvent({type:'stopDrag', handle:'rotation'})//add
	}

	dragTranslationHandle(e){//---大改，参考transformControls，为了加上xyz xy yz xz 这四个方向的变换。 （但感觉好像plane上有丢丢延迟？是因为drag延迟还是worldmatrix没更新）
		let drag = e.drag;
		let handle = this.activeHandle;
		let camera = this.viewer.mainViewport.camera//this.viewer.scene.getActiveCamera();
		
        if(handle && this.selection[0]){
        
            let posWorld = this.selection[0].getWorldPosition(new THREE.Vector3()); //是需要世界坐标吗
                
            if(!drag.intersectionStart){
                drag.intersectionStart = drag.location;
                drag.worldPositionStart = posWorld
                  
                 
                drag.objectQua = this.selection[0].quaternion.clone()//不考虑父级
                drag.objectQuaInv = drag.objectQua.clone().invert()
                this.dragging = true
            }

            if(drag.intersectionStart){ 
                let pointer = this.viewer.inputHandler.pointer
                let ray = Utils.mouseToRay(pointer, camera);
                
                let normal = viewer.mainViewport.view.direction
                drag.dragPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, posWorld/* drag.worldPositionStart */)//过center的与视线垂直的平面
                 
                
                
                let I = ray.intersectPlane(drag.dragPlane, new THREE.Vector3());

                if (I) {
                    let offset = new THREE.Vector3().subVectors( I , drag.worldPositionStart );

                    //let offset = new THREE.Vector3().subVectors(iOnLine, drag.worldPositionStart);
                    if(!drag.pointStart){
                        drag.pointStart = offset
                    }else{
                        drag.pointEnd = offset
                            
                        let diff = new THREE.Vector3().subVectors(drag.pointEnd, drag.pointStart)
                        diff.applyQuaternion(drag.objectQuaInv) // 得到在该物体local空间上的offset
                        
                        if(!handle.name.includes('x')) diff.x = 0
                        if(!handle.name.includes('y')) diff.y = 0
                        if(!handle.name.includes('z')) diff.z = 0
                        
                        //恢复为world offset  
                        diff.applyQuaternion(drag.objectQua)
                       
                        //-------------    
                            
                        let matrixBefore = this.selection[0].matrix.clone()
                        
                        this.selection[0].position.copy( diff ).add( drag.worldPositionStart );    
                        
                        
                        for (let selection of this.selection) {
                             
                            selection.dispatchEvent({
                                type: "position_changed",
                                object: selection
                            });
                        }
                        this.dispatchEvent({type:'transformed', changeType: ['position'], matrixBefore})//add
                           
                    }  
                }
            }
        }
	}


	dropTranslationHandle(e){
		this.dragging = false;
		this.setActiveHandle(null);
        this.dispatchEvent({type:'stopDrag', handle:'translation'})//add
	}

	dropScaleHandle(e){
		this.dragging = false;
		this.setActiveHandle(null);
        this.dispatchEvent({type:'stopDrag', handle:'scale'})//add
	}

	dragScaleHandle(e){
		let drag = e.drag;
		let handle = this.activeHandle;
        if(!handle)return
		let camera = this.viewer.mainViewport.camera//this.viewer.scene.getActiveCamera();

		if(!drag.intersectionStart){
			drag.intersectionStart = drag.location;
			drag.objectStart = drag.object.getWorldPosition(new THREE.Vector3());
			drag.handle = handle;
            let start = drag.intersectionStart;
            let dir = new THREE.Vector4(...handle.alignment, 0).applyMatrix4(this.scene.matrixWorld);
            let end = new THREE.Vector3().addVectors(start, dir);
            let line = new THREE.Line3(start.clone(), end.clone());
			drag.line = line;
 
			let normal   
            if(camera.type == 'OrthographicCamera'){//xzw add
                normal = new THREE.Vector3(0,0,-1).applyQuaternion(camera.quaternion)
            }else{ 
                let camOnLine = line.closestPointToPoint(camera.position, false, new THREE.Vector3());
                normal = new THREE.Vector3().subVectors(camera.position, camOnLine);
            }
			let plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, drag.intersectionStart); //过轴线的一个能铺满屏幕的平面
			drag.dragPlane = plane;
			drag.pivot = drag.intersectionStart;

			//Utils.debugSphere(viewer.scene.scene, drag.pivot, 0.05);
		}else{
			handle = drag.handle;
		}

		this.dragging = true;

		if(drag.dragPlane){//xzw add 因有时候没有
			let pointer = this.viewer.inputHandler.pointer
			let domElement = this.viewer.renderer.domElement;
			let ray = Utils.mouseToRay(pointer, camera, domElement.clientWidth, domElement.clientHeight);
			let I = ray.intersectPlane(drag.dragPlane, new THREE.Vector3());

			if (I) {
				let iOnLine = drag.line.closestPointToPoint(I, false, new THREE.Vector3());
				let direction = handle.alignment.reduce( (a, v) => a + v, 0);

				let toObjectSpace = this.selection[0].matrixWorld.clone().invert();
				let iOnLineOS = iOnLine.clone().applyMatrix4(toObjectSpace);
				let pivotOS = drag.pivot.clone().applyMatrix4(toObjectSpace);
				let diffOS = new THREE.Vector3().subVectors(iOnLineOS, pivotOS);
				let dragDirectionOS = diffOS.clone().normalize();
				if(iOnLine.distanceTo(drag.pivot) === 0){
					dragDirectionOS.set(0, 0, 0);
				}
				let dragDirection = dragDirectionOS.dot(new THREE.Vector3(...handle.alignment));

				let diff = new THREE.Vector3().subVectors(iOnLine, drag.pivot);
				let diffScale = new THREE.Vector3(...handle.alignment).multiplyScalar(diff.length() * direction * dragDirection);
				let diffPosition = diff.clone().multiplyScalar(0.5);
   
 
                let matrixBefore = this.selection[0].matrix.clone()
				for (let selection of this.selection) {
                    //xzw 改：否则不跟手
                    let diffScale_ = diffScale.clone().divide(selection.boundingBox.getSize(new THREE.Vector3))
					selection.scale.add(diffScale_);
                    //selection.scale.add(diffScale);
					selection.scale.x = Math.max(0.1, selection.scale.x);
					selection.scale.y = Math.max(0.1, selection.scale.y);
					selection.scale.z = Math.max(0.1, selection.scale.z);
					selection.position.add(diffPosition);
                    
                    
					selection.dispatchEvent({
						type: "position_changed",
						object: selection
					});
					selection.dispatchEvent({
						type: "scale_changed",
						object: selection
					});
                    
                    this.dispatchEvent({type:'transformed', changeType: ['position','scale'], matrixBefore})//add
				}

				drag.pivot.copy(iOnLine);
				//Utils.debugSphere(viewer.scene.scene, drag.pivot, 0.05);
			}
		}
	}
 
	setActiveHandle(handle){
		if(this.dragging){
			return;
		}

		if(this.activeHandle === handle){
			return;
		}

		this.activeHandle = handle;

		if(handle === null){
			for(let handleName of Object.keys(this.handles)){
				let handle = this.handles[handleName];
				handle.node.setOpacity(0);
			}
		}
        
        
        viewer.dispatchEvent({type:'CursorChange', action: this.activeHandle ? 'add' : 'remove', name:'hoverTranHandle'})
        
		if(!hideFocusHandles){
            for(let handleName of Object.keys(this.focusHandles)){
                let handle = this.focusHandles[handleName]; 
                if(this.activeHandle === handle){
                    handle.node.setOpacity(1.0);
                }else{
                    handle.node.setOpacity(OpaWhenNotSelect)
                }
            }
		}

		for(let handleName of Object.keys(this.translationHandles)){
			let handle = this.translationHandles[handleName];

			if(this.activeHandle === handle){
				handle.node.setOpacity(1.0);
			}else{
				handle.node.setOpacity(OpaWhenNotSelect)
			}
		}

		for(let handleName of Object.keys(this.rotationHandles)){
			let handle = this.rotationHandles[handleName];

			//if(this.activeHandle === handle){
			//	handle.node.setOpacity(1.0);
			//}else{
			//	handle.node.setOpacity(OpaWhenNotSelect)
			//}

			handle.node.setOpacity(OpaWhenNotSelect);
		}

		for(let handleName of Object.keys(this.scaleHandles)){
			let handle = this.scaleHandles[handleName];

			if(this.activeHandle === handle){
				handle.node.setOpacity(1.0);
                if(!hideFocusHandles){
                    let relatedFocusHandle = this.focusHandles[handle.name.replace("scale", "focus")];
                    let relatedFocusNode = relatedFocusHandle.node;
                    relatedFocusNode.setOpacity(OpaWhenNotSelect);
                }
				for(let translationHandleName of Object.keys(this.translationHandles)){
					let translationHandle = this.translationHandles[translationHandleName];
					translationHandle.node.setOpacity(OpaWhenNotSelect);
				}

				//let relatedTranslationHandle = this.translationHandles[
				//	handle.name.replace("scale", "translation").replace(/[+-]/g, "")];
				//let relatedTranslationNode = relatedTranslationHandle.node;
				//relatedTranslationNode.setOpacity(OpaWhenNotSelect);


			}else{
				handle.node.setOpacity(OpaWhenNotSelect)
			}
		}

		



		if(handle){
			handle.node.setOpacity(1.0); 
		}
        
		viewer.dispatchEvent('content_changed') 
	}

	update () {

		if(this.selection.length === 1){ 
			this.scene.visible = true;

			this.scene.updateMatrix();
			this.scene.updateMatrixWorld();

			let selected = this.selection[0];
			let world = selected.matrixWorld;
			let camera = this.viewer.mainViewport.camera//this.viewer.scene.getActiveCamera();
			let domElement = this.viewer.renderer.domElement;

            
        
			let center = selected.boundingBox.getCenter(new THREE.Vector3()).clone().applyMatrix4(selected.matrixWorld);

			this.scene.scale.copy(selected.boundingBox.getSize(new THREE.Vector3()).multiply(selected.scale));
			this.scene.position.copy(center);
			this.scene.rotation.copy(selected.rotation);    //这里只考虑当前子级的scale rotation
            
            //如果是世界坐标 (缩放方向有bug。)
            /* 
            let boundingBox = selected.boundingBox.clone().applyMatrix4(selected.matrixWorld);
            let center = boundingBox.getCenter(new THREE.Vector3())
            this.scene.position.copy(center);
            this.scene.scale.copy(boundingBox.getSize(new THREE.Vector3()));
             
             */
            

			this.scene.updateMatrixWorld();

			{ 
				// adjust rotation handles
				if(!this.dragging){
                    if(this.modesEnabled.rotation || this.modesEnabled.translation){
                        let tWorld = this.scene.matrixWorld;
                        let tObject = tWorld.clone().invert();
                        let camObjectPos = camera.getWorldPosition(new THREE.Vector3()).applyMatrix4(tObject);

                        
                        
                        if(this.modesEnabled.translation){//add
                            ['xy','yz','xz'].forEach(axis=>{
                                let handle = this.translationHandles["translation.plane."+axis] 
                                let pos = handle.node.children[0].position  
                                camObjectPos.x && (pos.x = Math.sign(camObjectPos.x) * Math.abs(pos.x))
                                camObjectPos.y && (pos.y = Math.sign(camObjectPos.y) * Math.abs(pos.y))
                                camObjectPos.z && (pos.z = Math.sign(camObjectPos.z) * Math.abs(pos.z))
                                 
                            })
                        }
                        
                        if(this.modesEnabled.rotation){
                            let above = camObjectPos.z > 0;
                            let below = !above;
                            let PI_HALF = Math.PI / 2;
                            
                            let x = this.rotationHandles["rotation.x"].node.rotation;
                            let y = this.rotationHandles["rotation.y"].node.rotation;
                            let z = this.rotationHandles["rotation.z"].node.rotation; 
                            x.order = "ZYX";
                            y.order = "ZYX";

                          
                            if(above){
                                if(camObjectPos.x > 0 && camObjectPos.y > 0){
                                    x.x = 1 * PI_HALF;
                                    y.y = 3 * PI_HALF;
                                    z.z = 0 * PI_HALF; 
                                }else if(camObjectPos.x < 0 && camObjectPos.y > 0){
                                    x.x = 1 * PI_HALF;
                                    y.y = 2 * PI_HALF;
                                    z.z = 1 * PI_HALF;
                                }else if(camObjectPos.x < 0 && camObjectPos.y < 0){
                                    x.x = 2 * PI_HALF;
                                    y.y = 2 * PI_HALF;
                                    z.z = 2 * PI_HALF;
                                }else if(camObjectPos.x > 0 && camObjectPos.y < 0){
                                    x.x = 2 * PI_HALF;
                                    y.y = 3 * PI_HALF;
                                    z.z = 3 * PI_HALF;
                                } 
                            }else if(below){
                                if(camObjectPos.x > 0 && camObjectPos.y > 0){
                                    x.x = 0 * PI_HALF;
                                    y.y = 0 * PI_HALF;
                                    z.z = 0 * PI_HALF;
                                }else if(camObjectPos.x < 0 && camObjectPos.y > 0){
                                    x.x = 0 * PI_HALF;
                                    y.y = 1 * PI_HALF;
                                    z.z = 1 * PI_HALF;
                                }else if(camObjectPos.x < 0 && camObjectPos.y < 0){
                                    x.x = 3 * PI_HALF;
                                    y.y = 1 * PI_HALF;
                                    z.z = 2 * PI_HALF;
                                }else if(camObjectPos.x > 0 && camObjectPos.y < 0){
                                    x.x = 3 * PI_HALF;
                                    y.y = 0 * PI_HALF;
                                    z.z = 3 * PI_HALF;
                                } 
                                
                            }  
                        } 
                    }
				}


                // adjust scale of components
				for(let handleName of Object.keys(this.handles)){
					let handle = this.handles[handleName];
					let node = handle.node; 
                    
                    
                    //xzw add:---- -当该轴正对相机时隐藏。（主要针对ortho类型camera。 
                    if(!Potree.Utils.getObjVisiByReason(node,'modeForce')  )continue;   
                    
                    let alignment = handle.alignment;
                    if(alignment && (!handleName.includes('rotation') || camera.type == 'OrthographicCamera')){//旋转的话正常都应该显示
                        
                        let normal
                        let dir = new THREE.Vector3(...alignment).applyQuaternion(this.scene.quaternion)
                        if(camera.type == 'OrthographicCamera'){ 
                            normal = new THREE.Vector3(0,0,-1).applyQuaternion(camera.quaternion)
                        }else{ 
                            normal = new THREE.Vector3().subVectors(center, camera.position).normalize()
                        } 
                        let ifOnLine
                        
                        if(handleName.includes('rotation') || handleName.includes('plane')){ // 旋转轴和视线垂直时隐藏
                            ifOnLine = Math.abs(dir.dot(normal)) < 0.1
                        }else{
                            ifOnLine = Math.abs(dir.dot(normal)) > 0.995
                        }
                        
                        Potree.Utils.updateVisible(node, 'faceToCamHide', !ifOnLine)
                    }else{
                        Potree.Utils.updateVisible(node, 'faceToCamHide', true)
                    }      
                     
                    if(!node.visible)continue;   
                    
                    //------------------------------------------------------------------------
                    if(handle.dontScale)continue; //add
					let handlePos = node.getWorldPosition(new THREE.Vector3());
					let distance = handlePos.distanceTo(camera.position);
					let pr = Utils.projectedRadius(1, camera, distance, domElement.clientWidth, domElement.clientHeight);

					let ws = node.parent.getWorldScale(new THREE.Vector3());

					let s = (ScaleRatio / pr);
					let scale = new THREE.Vector3(s, s, s).divide(ws);
                
					let rot = new THREE.Matrix4().makeRotationFromEuler(node.rotation);     //需要使用到旋转，所以我把设置scale的移到旋转后了，否则在视图上下旋转的分界线处rotateHandel会被拉长从而闪烁。
					let rotInv = rot.clone().invert();
                
					scale.applyMatrix4(rotInv);
					scale.x = Math.abs(scale.x);
					scale.y = Math.abs(scale.y);
					scale.z = Math.abs(scale.z);

					node.scale.copy(scale);
                     
                    
				}
 
				 
			}

		}else{
			this.scene.visible = false;
		}
		
	}


    onPointerMove(){
        let pointer = this.viewer.inputHandler.pointer;
        let camera = this.viewer.mainViewport.camera 
        if( this.selection.length === 1 && !this.dragging ){ //xzw 添加dragging条件
            let ray = Utils.mouseToRay(pointer, camera );
            let raycaster = new THREE.Raycaster(ray.origin, ray.direction);
            raycaster.layers.enableAll()//add
                  
            
            let pickVolumes = this.pickVolumes.filter(v=>{
                let mode = v.handle.split('.')[0]; 
                if(!this.modesEnabled[mode])return
                return v.parent.parent.visible  //可能被隐藏该轴
            })
            let intersects = raycaster.intersectObjects(pickVolumes, true);
            intersects = intersects.sort(function(a,b){
                let order2 = b.object.renderOrder || 0
                let order1 = a.object.renderOrder || 0
                return order2-order1
            }) // 降序
             
            if(intersects.length > 0){
                let I = intersects[0];
                let handleName = I.object.handle;
                //console.log(handleName)
              
                this.setActiveHandle(this.handles[handleName]);
            }else{
                this.setActiveHandle(null);
            }
        }


    }


};





/* 
    note:
      
    transformationTool.scene会跟随选中物体，其scale就是boundingbox的大小。因此transformationTool.frame这个框也会跟着缩放
    
    




 */