123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334 |
-
- import * as THREE from "../../libs/three.js/build/three.module.js";
- import math from './math';
- 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 = o.mat || new THREE[o.deshed ? "LineDashedMaterial" : "LineBasicMaterial"]({
- lineWidth: o.lineWidth || 1,
- //windows无效。 似乎mac/ios上粗细有效 ?
- color: o.color || defaultColor,
- transparent: o.dontAlwaysSeen ? false : true,
- depthTest: o.dontAlwaysSeen ? true : false,
- dashSize : o.dashSize || 0.1,
- gapSize: o.gapSize || 0.1
- })
- 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创建用于检测鼠标的透明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根据距离和角度更新 不改长短
- },
-
- createFatLineMat : function(o){
-
- var supportExtDepth = !!Features.EXT_DEPTH.isSupported()
-
-
-
-
- var mat = new LineMaterial( {
- color: o.color || 0xffffff,
- lineWidth: o.lineWidth || 5, // in pixels
- //vertexColors: THREE.VertexColors,//THREE.VertexColors,
- resolution: o.resolution || new THREE.Vector2(100,100),// to be set by renderer, eventually
- //viewportOffset: o.viewportOffset,
- transparent:true, //o.dontAlwaysSeen ? false : true,
- depthTest: false,// o.alwaysShow ? false : true,//o.dontAlwaysSeen ? true : false
- depthWrite:false,
- dashSize : o.dashSize || 0.1,
- gapSize: o.gapSize || 0.1,
-
- useDepth: !!o.useDepth,
- dashed: o.dashWithDepth ? supportExtDepth && !!o.dashed : !!o.dashed,
- dashWithDepth:!!o.dashWithDepth,//只在被遮住的部分显示虚线
-
- supportExtDepth,
-
-
-
- /* transparent:o.dontAlwaysSeen ? false : true,
- depthTest:o.dontAlwaysSeen ? true : false
- */
- /* polygonOffset : true,//是否开启多边形偏移 for not cover the lineMesh
- polygonOffsetFactor : -o.width*2.5 || -5 ,//多边形偏移因子
- polygonOffsetUnits : -4.0,//多边形偏移单位 */
-
- } );
-
- //if(o.dashed)(mat.defines.USE_DASH = "")
-
- var opa = 0
- Object.defineProperty( mat, "opacity", {
- get: function () {
- return opa;
- },
- set: function(o){
- mat.uniforms.opacity.value = opa = o;
- }
- })
- mat.opacity = o.opacity != void 0 ? o.opacity : 1;
-
- return mat;
- },
-
- /*
- 创建可以改变粗细的线。
- */
- createFatLine : function(posArr, o){
- var geometry = new LineGeometry();
- geometry.setPositions( posArr );
- geometry.setColors( o.color || [1,1,1]);
- var matLine = o.material || this.createFatLineMat(o);
- var line = new Line2( geometry, matLine );
- //line.computeLineDistances();
-
- if(line.material.defines.USE_DASH != void 0){
- //line.geometry.verticesNeedUpdate = true;
- //line.geometry.computeBoundingSphere();
- line.computeLineDistances();
- }
-
- line.scale.set( 1, 1, 1 );
- line.renderOrder = 2;
- return line;
- },
- moveFatLine: function(line, posArr){
- var geometry = line.geometry;
- geometry.setPositions( [
- ...posArr[0].toArray(), ...posArr[1].toArray(),
- ]);
-
-
- if(line.material.defines.USE_DASH != void 0){
- //line.geometry.verticesNeedUpdate = true;
- //line.geometry.computeBoundingSphere();
- line.computeLineDistances();
- }
-
-
-
- },
-
- updateLine: function(line, posArr){
- if(line instanceof Line2){
- LineDraw.moveFatLine(line,posArr)
- }else{
- LineDraw.moveLine(line,posArr)
- }
- }
-
- }
- 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, height, extrudePath, tension, closed){//获得挤出棱柱,可以选择传递height,或者extrudePath
- var shape = this.getShape(points) //points是横截面 [vector2,...]
-
- if(extrudePath){// 路径 :[vector3,...]
-
-
- var length = extrudePath.reduce((total, currentValue, currentIndex, arr)=>{
- if(currentIndex == 0)return 0
- return total + currentValue.distanceTo(arr[currentIndex-1]);
- },0)
- extrudePath = new THREE.CatmullRomCurve3(extrudePath, closed , 'catmullrom' /* 'centripetal' */ , tension)
-
-
- }
-
-
-
-
-
- var extrudeSettings = {
- steps: height != void 0 ? 1 : Math.round(length/0.3),
- depth: height,
- extrudePath,
-
- };
- 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 = 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
- ])
- geo.addAttribute("position", new THREE.BufferAttribute(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
- }
-
-
-
- }
- export {LineDraw, MeshDraw} ;
|