potree-sdk/src/utils/DrawUtil.js

 
import * as THREE from "../../libs/three.js/build/three.module.js";
import math from './math.js';
import {Line2} from "../../libs/three.js/lines/Line2.js";
import {LineGeometry} from "../../libs/three.js/lines/LineGeometry.js";
import {LineMaterial} from "../../libs/three.js/lines/LineMaterial.js";
//画线等函数--by 许钟文
import {Features} from "../Features.js";


var defaultColor = new THREE.Color(1,1,1);//config.applicationName == "zhiHouse" ? Colors.zhiBlue : Colors.lightGreen;

var LineDraw = {
    
	createLine: function (posArr, o={}) {
        //多段普通线  （第二个点和第三个点之间是没有线段的, 所以不用在意线段顺序）
        var mat
        if(o.mat){
            mat = o.mat
        }else{
            let prop = {
                lineWidth: o.lineWidth || 1,
                //windows无效。 似乎mac/ios上粗细有效 ？ 
                color: o.color || defaultColor,
                transparent: o.dontAlwaysSeen ? false : true,
                depthTest: o.dontAlwaysSeen ? true : false, 
            }
            if(o.deshed ){
                prop.dashSize = o.dashSize || 0.1,
                prop.gapSize = o.gapSize || 0.1
            }
            mat = new THREE[o.deshed ? "LineDashedMaterial" : "LineBasicMaterial"](prop) 
        }
         
        
        
        var line = new THREE.LineSegments(new THREE.BufferGeometry, mat);
		line.renderOrder = o.renderOrder || 4
  
        this.moveLine(line, posArr)
        
		return line;  

	},
    
    
	moveLine: function (line, posArr) {
        if(posArr.length == 0)return
        let position = []
        posArr.forEach(e=>position.push(e.x,e.y,e.z))
        line.geometry.setAttribute('position', new THREE.Float32BufferAttribute(/* new Float32Array( */position/* ) */, 3));
      
		line.geometry.attributes.position.needsUpdate = true;
		line.geometry.computeBoundingSphere();
        if(line.material instanceof THREE.LineDashedMaterial){
            line.computeLineDistances()
            //line.geometry.attributes.lineDistance.needsUpdate = true;
             
            line.geometry.verticesNeedUpdate = true; //没用
             
        }
	}  
	,
     
	 
	createFatLineMat : function(o){ 
    
        var supportExtDepth = !!Features.EXT_DEPTH.isSupported()  
        
        let params = $.extend({}, {
            //默认
            lineWidth : 5,  
            color:0xffffff,
            transparent : true, depthWrite:false,  depthTest:false,
            dashSize : 0.1, gapSize:0.1, 
        }, o, {
            //修正覆盖：
            dashed: o.dashWithDepth ? supportExtDepth && !!o.dashed : !!o.dashed ,
            dashWithDepth:!!o.dashWithDepth,//只在被遮住的部分显示虚线
            useDepth: !!o.useDepth,  
            supportExtDepth,
            
        })
        
        
        
		var mat = new LineMaterial(params)
         
        
        //if(o.dashed)(mat.defines.USE_DASH = "") 
         
		return 	mat;			
	},
    
    /* 
        创建可以改变粗细的线。 
     */
	createFatLine : function(posArr, o){  
		var geometry = new LineGeometry(); 
		geometry.setColors( o.color || [1,1,1]);

		var matLine = o.material || this.createFatLineMat(o);
		var line = new Line2( geometry, matLine );
		//line.computeLineDistances();
         
		line.scale.set( 1, 1, 1 );
		line.renderOrder = 2;
        
        this.moveFatLine(line, posArr)
        
		return line;

	},
    
    
    
	moveFatLine: function(line, posArr){
		var geometry = line.geometry;
        var positions = [];
         
        posArr.forEach(e=>{positions.push(...e.toArray())})
        
        
		if(positions.length > 0){
            if(!geometry){
                geometry = line.geometry = new LineGeometry(); 
            }
            if(geometry.attributes.instanceEnd && geometry.attributes.instanceEnd.data.array.length != positions.length){//positions个数改变会有部分显示不出来,所以重建
                geometry.dispose();
                geometry = new LineGeometry();
                line.geometry = geometry
            }
            geometry.setPositions( positions ) 
            
            if(line.material.defines.USE_DASH != void 0){
                //line.geometry.verticesNeedUpdate = true; //没用
                line.geometry.computeBoundingSphere(); //for raycaster
                line.computeLineDistances(); 
            } 
        }else{
            geometry.dispose()
            line.geometry = new LineGeometry(); 
             
        }
        
        
	},
    
    updateLine: function(line, posArr){
        if(line instanceof Line2){
            LineDraw.moveFatLine(line,posArr) 
        }else{
            LineDraw.moveLine(line,posArr)
        }  
    },
     /* 
     
        为line创建用于检测鼠标的透明mesh，实际是个1-2段圆台。
        由于近大远小的原因，假设没有透视畸变、创建的是等粗的圆柱的话， 所看到的线上每个位置的粗细应该和距离成反比。所以将圆柱改为根据距离线性渐变其截面半径的圆台，在最近点（相机到线的垂足）最细。如果最近点在线段上，则分成两段圆台，否则一段。
      */
	createBoldLine:function(points, o){ 
		o = o || {}
		var cylinder = o && o.cylinder;  
		var CD = points[1].clone().sub(points[0]);
		
		var rotate = function(){//根据端点旋转好模型
			cylinder.lastVector = CD;//记录本次的端点向量 
			var AB = new THREE.Vector3(0,-1,0) 
			var axisVec = AB.clone().cross(CD).normalize(); //得到垂直于它们的向量，也就是旋转轴
			var rotationAngle = AB.angleTo(CD);
			cylinder.quaternion.setFromAxisAngle( axisVec, rotationAngle ) 
 		} 
		if(o && o.type == "init"){
			cylinder = new THREE.Mesh()
			cylinder.material = o.mat 
			if(CD.length() == 0)return cylinder;
			rotate()
		}
		
		if(CD.length() == 0)return cylinder;
		if(o.type != "update"){
			var CDcenter = points[0].clone().add(points[1]).multiplyScalar(.5);
			cylinder.position.copy(CDcenter);
			
			if(!cylinder.lastVector || o.type == "moveAndRotate")rotate()
 			else if(cylinder.lastVector &&  CD.angleTo(cylinder.lastVector)>0) rotate()//线方向改了or线反向了 重新旋转一下模型
 			if(config.isEdit && !objects.mainDesign.editing )return cylinder;//节省初始加载时间？
		}
 
		
		//为了保证线段任何地方的可检测点击范围看起来一样大，更新圆台的结构(但是在镜头边缘会比中心看起来大)
		var height = points[0].distanceTo(points[1]);
		var standPos = o && o.standPos || objects.player.position;
		var k = config.isMobile ? 20 : 40;
		var dis1 = points[0].distanceTo(standPos);
		var dis2 = points[1].distanceTo(standPos); 
	 
		var foot = math.getFootPoint(standPos, points[0], points[1]);//垂足
		
        if(o.constantBold || objects.player.mode != "panorama"){
            var width = 0.1//0.08;
            var pts = [new THREE.Vector2(width ,height/2),new THREE.Vector2(width ,-height/2)]  
        }else if(foot.clone().sub(points[0]).dot( foot.clone().sub(points[1])   ) > 0){//foot不在线段上
			var pts = [new THREE.Vector2(dis1 / k,height/2),new THREE.Vector2(dis2 / k,-height/2)]
		}else{//在线段上的话，要在垂足这加一个节点，因它距离站位最近，而两端较远
			var dis3 = foot.distanceTo(standPos); 
			var len = foot.distanceTo(points[0])
			var pts = [new THREE.Vector2(dis1 / k,height/2),  new THREE.Vector2(dis3 / k,height/2-len),  new THREE.Vector2(dis2 / k,-height/2)]
		} 
		cylinder.geometry && cylinder.geometry.dispose();//若不删除会占用内存
 		cylinder.geometry = new THREE.LatheBufferGeometry( pts, 4/* Math.min(dis1,dis2)<10?4:3 */ )  
		cylinder.renderOrder = 2;
		
		return cylinder;
	},  
	updateBoldLine:function(cylinder, points, type, standPos, constantBold){  
		this.createBoldLine(points,{type:type,  cylinder : cylinder, standPos:standPos, constantBold}) //type:move:平移 会改长短  , type:update根据距离和角度更新  不改长短
	},	
}

var MeshDraw = { 
    getShape:function(points, holes){
        var shape = new THREE.Shape();
        shape.moveTo( points[0].x, points[0].y );
        for(var i=1,len=points.length; i<len; i++){
            shape.lineTo(points[i].x, points[i].y ) 
        } 
        
        /* var holePath = new THREE.Path()
                .moveTo( 20, 10 )
                .absarc( 10, 10, 10, 0, Math.PI * 2, true ) 
            arcShape.holes.push( holePath );
         */
        if(holes){//挖空
            holes.forEach((points)=>{
                var holePath = new THREE.Path()
                holePath.moveTo( points[0].x, points[0].y )
                for(var i=1,len=points.length; i<len; i++){
                    holePath.lineTo(points[i].x, points[i].y ) 
                } 
                shape.holes.push( holePath );
            }) 
        }
        return shape        
    },
    getShapeGeo: function(points, holes){//获取任意形状（多边形或弧形）的形状面  //quadraticCurveTo() 这是弧形的含函数
		
		var geometry = new THREE.ShapeBufferGeometry( this.getShape(points, holes) );  //ShapeGeometry
        
       /*  var matrix = new THREE.Matrix4();//将竖直的面变为水平
		matrix.set(//z = y 
			1, 0, 0, 0,
			0, 0, 0, 0,
			0, 1, 0, 0,
			0, 0, 0, 1 
		)
		geometry.applyMatrix(matrix) */
		//geometry.computeVertexNormals();//对于光照需要的是点法线
         
		return geometry;
		
		
	},
    
    
    getExtrudeGeo:  function(points, holes, options={}){//获得挤出棱柱，可以选择传递height，或者extrudePath
        var shape = this.getShape(points, holes) //points是横截面 [vector2,...]
        
        if(options.extrudePath ){// 路径 :[vector3,...]
            
            var length = extrudePath.reduce((total, currentValue, currentIndex, arr)=>{
                if(currentIndex == 0)return 0
                return total + currentValue.distanceTo(arr[currentIndex-1]);
            },0)
            options.extrudePath = new THREE.CatmullRomCurve3(extrudePath, options.closed ,  'catmullrom'  /* 'centripetal' */  , options.tension)
            
           
        }
         
        var extrudeSettings = $.extend(options,{
            steps: options.steps != void 0 ? options.steps : ( options.extrudePath ? Math.round(length/0.3) : 1),
            bevelEnabled: false, //不加的话，height为0时会有圆弧高度
            //depth
        }) 
        var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
        return geometry;
    },
    
    
	getUnPosPlaneGeo : function(){//获取还没有赋值位置的plane geometry
		var e = new Uint16Array([0, 1, 2, 0, 2, 3])
		//	, t = new Float32Array([-.5, -.5, 0, .5, -.5, 0, .5, .5, 0, -.5, .5, 0])
			, i = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1])
			, g = new THREE.BufferGeometry;
		g.setIndex(new THREE.BufferAttribute(e, 1)),
		//g.addAttribute("position", new n.BufferAttribute(t, 3)),
		g.setAttribute("uv", new THREE.BufferAttribute(i, 2)) 
		return function(){
			return g
		}	 
	}(), 
	getPlaneGeo : function(A,B,C,D){
		var geo = this.getUnPosPlaneGeo().clone();
		var pos = [
			A.x, A.y, A.z, 
			B.x, B.y, B.z, 
			C.x, C.y, C.z, 
			D.x, D.y, D.z  
		] 
		//geo.addAttribute("position", new THREE.BufferAttribute(pos, 3)) 
        geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
      
        
		geo.computeVertexNormals()
		geo.computeBoundingSphere() //for raycaster
		return geo;
	}, 
	drawPlane : function(A,B,C,D, material){   
		var wall = new THREE.Mesh(this.getPlaneGeo(A,B,C,D), material); 
		return wall;
	  
	}, 
	movePlane: function(mesh, A,B,C,D){
		var pos = new Float32Array([
			A.x, A.y, A.z, 
			B.x, B.y, B.z, 
			C.x, C.y, C.z, 
			D.x, D.y, D.z  
		])
		mesh.geometry.addAttribute("position", new THREE.BufferAttribute(pos, 3)) 
		mesh.geometry.computeBoundingSphere()//for checkIntersect
	}  
    
    ,
    
    createGeometry:function(posArr, faceArr, uvArr, normalArr ){//创建复杂mesh.  faceArr:[[0,1,2],[0,2,3]]
        let geo = new THREE.BufferGeometry;
        
        let positions = []; 
        posArr.forEach(p=>positions.push(p.x,p.y,p.z)); 
        geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
        
        if(faceArr){
            let indice = []
            faceArr.forEach(f=>indice.push(...f));
            geo.setIndex(indice) // auto set Uint16BufferAttribute or Uint32BufferAttribute
        }
        
        if(uvArr){
            let uvs = []
            uvArr.forEach(uv=>uvs.push(uv.x,uv.y));
            geo.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)) 
        } 
        
        if(normalArr){
            let normals = []
            normalArr.forEach(n=>normals.push(n.x,n.y,n.z));
            geo.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3)) 
        }
        /*  
        geo.computeVertexNormals()
		geo.computeBoundingSphere() //for raycaster 
          */
        return geo
    },
    
    
    updateGeometry:function(geo, posArr, faceArr, uvArr, normalArr ){//创建复杂mesh.  faceArr:[[0,1,2],[0,2,3]]
        
        let positions = []; 
        posArr.forEach(p=>positions.push(p.x,p.y,p.z)); 
        geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
        geo.attributes.position.needsUpdate = true;
		 
        if(faceArr){
            let indice = []
            faceArr.forEach(f=>indice.push(...f));
            geo.setIndex(indice) // auto set Uint16BufferAttribute or Uint32BufferAttribute
        }
        
        if(uvArr){
            let uvs = []
            uvArr.forEach(uv=>uvs.push(uv.x,uv.y));
            geo.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)) 
        } 
        
        if(normalArr){
            let normals = []
            normalArr.forEach(n=>normals.push(n.x,n.y,n.z));
            geo.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3)) 
        }
        /*  
        geo.computeVertexNormals()
		
          */
        geo.computeBoundingSphere() //for raycaster and visi
        return geo
    }
} 

export {LineDraw, MeshDraw} ;