|
@@ -8,7 +8,7 @@ import math from "../../utils/math.js";
|
|
|
import DepthBasicMaterial from "../../materials/DepthBasicMaterial.js";
|
|
|
import Sprite from '../Sprite.js'
|
|
|
import {config} from '../../settings.js'
|
|
|
-
|
|
|
+import browser from "../../utils/browser.js";
|
|
|
import {ctrlPolygon} from './ctrlPolygon.js'
|
|
|
|
|
|
|
|
@@ -22,18 +22,24 @@ var markerMats;
|
|
|
var lineMats;
|
|
|
var planeMats
|
|
|
|
|
|
+const textSizeRatio = math.linearClamp(window.innerWidth * window.innerHeight , 360*720, 1920*1080, 0.75, 1) //pc字显示大一些
|
|
|
+
|
|
|
const lineDepthInfo = {
|
|
|
clipDistance : 4,//消失距离
|
|
|
occlusionDistance: 1,//变为backColor距离
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+const markerMapShrink = browser.isMobile() ? 0.4 : 0.8 //触屏需要更大的热区
|
|
|
|
|
|
const markerSizeInfo = {
|
|
|
- minSize : 25 , maxSize : 65, nearBound : 0.2, farBound : 4,
|
|
|
-}
|
|
|
+ width2d : 18 / markerMapShrink , nearBound : 1.5, farBound : 15,
|
|
|
+}
|
|
|
+/* const markerSizeInfo = {
|
|
|
+ minSize : 10 , maxSize : 15 , nearBound : 1.5, farBound : 15,
|
|
|
+} */
|
|
|
+
|
|
|
const labelSizeInfo = {width2d:200}
|
|
|
-const mainLabelProp = {
|
|
|
+/* const mainLabelProp = {
|
|
|
backgroundColor: {r: defaultColor.r*255, g: defaultColor.g*255, b: defaultColor.b*255, a:config.measure.default.opacity},
|
|
|
textColor: {r: textColor.r*255, g: textColor.g*255, b: textColor.b*255, a: 1.0},
|
|
|
fontsize:16,
|
|
@@ -45,14 +51,44 @@ const mainLabelProp = {
|
|
|
occlusionDistance: 5,//变为backColor距离
|
|
|
maxOcclusionFactor:0.7,
|
|
|
|
|
|
+} */
|
|
|
+const mainLabelProp = {
|
|
|
+ //backgroundColor: {r: defaultColor.r*255, g: defaultColor.g*255, b: defaultColor.b*255, a:config.measure.default.opacity},
|
|
|
+ backgroundColor: {r: 0, g: 0, b: 0, a:0},
|
|
|
+ textColor: {r: textColor.r*255, g: textColor.g*255, b: textColor.b*255, a: 1.0},
|
|
|
+ textBorderColor: {r:255, g: 255, b:255, a: 1.0},
|
|
|
+ textBorderThick:3 ,
|
|
|
+ fontsize: 15 * textSizeRatio,
|
|
|
+ borderRadius : 12, margin:{x:20,y:4},
|
|
|
+ renderOrder : 5, pickOrder:5,
|
|
|
+ disToLine:-0.15,
|
|
|
+
|
|
|
+ useDepth : true ,
|
|
|
+ // 2023.10 尽量不让数字被挡住
|
|
|
+ clipDistance : 10,//消失距离
|
|
|
+ occlusionDistance: 10,//变为backColor距离
|
|
|
+ maxOcclusionFactor:0.3,
|
|
|
+ maxClipFactor:0.8
|
|
|
+
|
|
|
}
|
|
|
const subLabelProp = {
|
|
|
+ backgroundColor: {r: 255, g: 255, b: 255, a:0},
|
|
|
+ textColor: {r: textColor.r*255, g: textColor.g*255, b: textColor.b*255, a: 1.0},
|
|
|
+ textBorderColor: {r:255, g: 255, b:255, a: 1.0},
|
|
|
+ textBorderThick:3 ,
|
|
|
+ fontsize: 15 * textSizeRatio,
|
|
|
+ renderOrder : 4, pickOrder:4,
|
|
|
+ disToLine:-0.13,
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* const subLabelProp = {
|
|
|
backgroundColor: {r: 255, g: 255, b: 255, a:1},
|
|
|
textColor: {r: 0, g: 0, b:0, a: 1.0},
|
|
|
fontsize:14,
|
|
|
renderOrder : 4, pickOrder:4,
|
|
|
}
|
|
|
-
|
|
|
+ */
|
|
|
|
|
|
const angle = THREE.Math.degToRad(5);//显示水平垂直辅助线的最小角度
|
|
|
const guideShowMinAngle = {min: angle, max: Math.PI/2 - angle}
|
|
@@ -230,18 +266,26 @@ export class Measure extends ctrlPolygon{
|
|
|
|
|
|
|
|
|
let setEdgeLabel = (label,p1,p2,distance)=>{//设置label位置和字
|
|
|
- let center = new THREE.Vector3().addVectors(p1,p2).multiplyScalar(0.5);
|
|
|
- label.setPos(center)
|
|
|
+ this.setEdgeLabelPos(label,p1,p2)
|
|
|
distance = distance == void 0 ? p1.distanceTo(p2) : distance;
|
|
|
//var text = viewer.unitConvert.convert(distance, 'distance', Potree.settings.precision, this.unitSystem, 1 , true)//distance要传0.1 这个factor
|
|
|
var text = viewer.unitConvert.convert(distance, 'distance', Potree.settings.precision , this.unitSystem, 0.01 , true )//distance要传0.1 这个factor
|
|
|
-
|
|
|
-
|
|
|
label.setText(text)
|
|
|
return distance
|
|
|
}
|
|
|
|
|
|
|
|
|
+ /* let setEdgeLabel = (label,p1,p2,distance)=>{//设置label位置和字
|
|
|
+ this.setEdgeLabelPos(label,p1,p2)
|
|
|
+
|
|
|
+ distance = distance == void 0 ? p1.distanceTo(p2) : distance;
|
|
|
+ var text = this.labelText || viewer.unitConvert.convert(distance, 'distance', Potree.settings.precision , this.unitSystem, 0.001 , true, true)//distance要传0.1 这个factor
|
|
|
+ label.setText(text)
|
|
|
+
|
|
|
+ } */
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
let lastIndex = this.points.length - 1;
|
|
|
for (let index = 0; index <= lastIndex; index++) {
|
|
|
|
|
@@ -260,6 +304,7 @@ export class Measure extends ctrlPolygon{
|
|
|
edgeLabel.shouldVisi = (index < lastIndex || this.isRect || this.closed && !this.isNew ) && distance>0
|
|
|
/* this.closed || */edgeLabel.setVisible(edgeLabel.shouldVisi)
|
|
|
if(edgeLabel.visible){
|
|
|
+ edgeLabel.lineDir = new THREE.Vector3().subVectors(point,nextPoint).normalize() //[point,nextPoint]
|
|
|
setEdgeLabel(edgeLabel,point,nextPoint,distance)
|
|
|
}
|
|
|
}
|
|
@@ -307,13 +352,85 @@ export class Measure extends ctrlPolygon{
|
|
|
this.areaLabel.setText(msg);
|
|
|
this.areaLabel.setVisible(true)
|
|
|
//}
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ }
|
|
|
};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ setEdgeLabelPos(label,p1,p2){ //调整label的位置,使倾斜后看起来在线的中心,而不要挡住端点
|
|
|
+ let center = new THREE.Vector3().addVectors(p1,p2).multiplyScalar(0.5);
|
|
|
+ return label.setPos(center)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if(label.lineDir && label.lineDir.length() > 0){
|
|
|
+ if(viewer.mainViewport.camera.type == 'OrthographicCamera'){
|
|
|
+ label.setPos(center)
|
|
|
+ }else{
|
|
|
+ //根据视线和线的夹角(后又加入相机和两个端点距离差)来决定标签偏移位置。+
|
|
|
+ let eyePos = viewer.mainViewport.camera.position;
|
|
|
+ let dir = viewer.mainViewport.view.direction //new THREE.Vector3().subVectors(center,eyePos).normalize()
|
|
|
+
|
|
|
+ /*let centerDir = new THREE.Vector3().subVectors(center,eyePos).normalize()
|
|
|
+ if(centerDir.dot(dir)<0){//中点在相机后方,就不设置
|
|
|
+ label.setPos(center)
|
|
|
+ return
|
|
|
+ } */
|
|
|
+ let cos = dir.dot(label.lineDir)
|
|
|
+ let nearPoint = cos > 0 ? p2 : p1 //近端点。
|
|
|
+ let far = cos > 0 ? p1 : p2 //远端点。
|
|
|
+ let nearPointDir = new THREE.Vector3().subVectors(nearPoint,eyePos)//.normalize()
|
|
|
+ //使label在中点和近端点中变化, 近端点可能到了相机后方,需要投影到相机所在平面上
|
|
|
+ if(nearPointDir.dot(dir)<0){//近端点到了相机后方,前移。
|
|
|
+ //let hfov = cameraLight.getHFOVForCamera(viewer.mainViewport.camera , true ); //暂且只看水平fov
|
|
|
+ //if(nearPointDir.dot(dir)<Math.cos(hfov/2)){//近端点在镜头外,前移。 --但是这个就得把点转化成在镜头边缘而非左右两边(camDirPlane上)
|
|
|
+ let ray = new THREE.Raycaster()
|
|
|
+ ray.set(nearPoint, cos>0?label.lineDir:label.lineDir.clone().negate())
|
|
|
+ let camDirPlane = new THREE.Plane().setFromNormalAndCoplanarPoint(dir, eyePos)
|
|
|
+ nearPoint = ray.ray.intersectPlane(camDirPlane, new THREE.Vector3())
|
|
|
+ if(!nearPoint){//线是垂直的,视线是水平的时候
|
|
|
+ return label.setPos(center)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //防止离远了之后也偏移很多,但远了之后相机到端点vec和到中点的vec的夹角接近,不需要怎么偏移的。
|
|
|
+ let dis1 = nearPoint.distanceToSquared(eyePos)
|
|
|
+ let dis2 = far.distanceToSquared(eyePos)
|
|
|
+ let diff = Math.abs(dis1/dis2)
|
|
|
+ diff<1 && (diff = 1/diff)
|
|
|
+ diff = math.linearClamp(diff,0, 30, 0,1 )
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let efficiency = 0.7; // 0-1 数值越高,r越容易接近1或-1,label越容易在倾斜后靠近近端点。
|
|
|
+ //let r = 0.5*efficiency*cos + 0.5
|
|
|
+ let r = 0.5*efficiency*diff*cos + 0.5
|
|
|
+ r = THREE.Math.clamp(r,0.1,0.9)
|
|
|
+
|
|
|
+ //视线越接近线的方向,标签应该越往近端点偏移,防止看起来几乎在远端。
|
|
|
+ if(cos > 0){
|
|
|
+ center = p1.clone().multiplyScalar(1-r).add(nearPoint.clone().multiplyScalar(r)); //label在线上滑动,使尽量保持在视觉中心
|
|
|
+ }else{
|
|
|
+ center = nearPoint.clone().multiplyScalar(1-r).add(p2.clone().multiplyScalar(r)); //label在线上滑动,使尽量保持在视觉中心
|
|
|
+ }
|
|
|
+
|
|
|
+ label.setPos(center)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //归零
|
|
|
+ //this.orient2dInfo = null
|
|
|
+ //this.markers.forEach(e=>e.needsUpdate=true)
|
|
|
+ }else{
|
|
|
+
|
|
|
+ label.setPos(center)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
|
|
|
addMarker (o={}) {
|
|
|
|
|
@@ -327,7 +444,7 @@ export class Measure extends ctrlPolygon{
|
|
|
marker.addEventListener('drop',(e)=>{
|
|
|
viewer.inputHandler.dispatchEvent({type: 'isMeasuring', v:false, cause:'stopDragging'} )
|
|
|
})
|
|
|
-
|
|
|
+ //marker.measure = this
|
|
|
let edge
|
|
|
{ // edges
|
|
|
edge = LineDraw.createFatLine( [ ],{mat:this.getLineMat('edgeDefault')} )
|
|
@@ -666,6 +783,7 @@ export class Measure extends ctrlPolygon{
|
|
|
})
|
|
|
}
|
|
|
edgeLabel.visible = false
|
|
|
+ edgeLabel.measure = this
|
|
|
edgeLabel.sprite.material.depthTestWhenPick = true
|
|
|
Potree.Utils.setObjectLayers(edgeLabel, 'measure' )
|
|
|
this.add(edgeLabel)
|
|
@@ -673,20 +791,9 @@ export class Measure extends ctrlPolygon{
|
|
|
}
|
|
|
|
|
|
createAreaLabel(){
|
|
|
- /* const areaLabel = new Label({
|
|
|
- className:'measure_area',
|
|
|
-
|
|
|
- })
|
|
|
- areaLabel.elem.on('mouseover',()=>{
|
|
|
- this.setSelected(true, 'areaLabel')
|
|
|
- })
|
|
|
- areaLabel.elem.on('mouseout',()=>{
|
|
|
- this.setSelected(false, 'areaLabel')
|
|
|
- }) */
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
const areaLabel = new TextSprite(
|
|
|
- $.extend(mainLabelProp,{sizeInfo: labelSizeInfo, name:'areaLabel_'} )
|
|
|
+ $.extend({},mainLabelProp,{sizeInfo: labelSizeInfo, name:'areaLabel_', disToLine:0, fontsize:16*textSizeRatio} )
|
|
|
)
|
|
|
|
|
|
areaLabel.addEventListener('mouseover',()=>{
|
|
@@ -709,22 +816,27 @@ export class Measure extends ctrlPolygon{
|
|
|
|
|
|
getMarkerMaterial(type) {
|
|
|
if(!markerMats){
|
|
|
+
|
|
|
markerMats = {
|
|
|
default: new DepthBasicMaterial($.extend({},lineDepthInfo,{
|
|
|
transparent: !0,
|
|
|
opacity: 1,
|
|
|
map: texLoader.load(Potree.resourcePath+'/textures/pic_point_s32.png' ),
|
|
|
- useDepth:true
|
|
|
+ useDepth:true ,
|
|
|
+ mapScale: markerMapShrink
|
|
|
})),
|
|
|
select: new THREE.MeshBasicMaterial({
|
|
|
transparent: !0,
|
|
|
opacity: 1,
|
|
|
depthTest:false,
|
|
|
- map: texLoader.load(Potree.resourcePath+'/textures/pic_point32.png'/* , null, null, { antialias: false } */),
|
|
|
-
|
|
|
+ map: texLoader.load(Potree.resourcePath+'/textures/pic_point32.png'/* , null, null, { antialias: false } */),
|
|
|
}),
|
|
|
}
|
|
|
Measure.markerMats = markerMats
|
|
|
+
|
|
|
+ markerMats.select.map.repeat.set(1/markerMapShrink,1/markerMapShrink)
|
|
|
+ markerMats.select.map.offset.set((markerMapShrink-1)/2/markerMapShrink, (markerMapShrink-1)/2/markerMapShrink)
|
|
|
+ //markerMats.select.map.offset.set( -1.1 , -1.1 )
|
|
|
}
|
|
|
return markerMats[type]
|
|
|
|
|
@@ -761,7 +873,7 @@ export class Measure extends ctrlPolygon{
|
|
|
dashSize: 0.1,
|
|
|
gapSize: 0.02,
|
|
|
dashed: true,
|
|
|
- lineWidth: config.measure.lineWidth
|
|
|
+ lineWidth: config.measure.lineWidth/2
|
|
|
}))
|
|
|
|
|
|
}
|
|
@@ -942,97 +1054,34 @@ export class Measure extends ctrlPolygon{
|
|
|
}
|
|
|
viewer.inputHandler.dispatchEvent( {type:'isMeasuring', v:true, cause:'reDraw'} )
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* get showCoordinates () {
|
|
|
- return this._showCoordinates;
|
|
|
- }
|
|
|
-
|
|
|
- set showCoordinates (value) {
|
|
|
- this._showCoordinates = value;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- get showAngles () {
|
|
|
- return this._showAngles;
|
|
|
- }
|
|
|
-
|
|
|
- set showAngles (value) {
|
|
|
- this._showAngles = value;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- get showCircle () {
|
|
|
- return this._showCircle;
|
|
|
- }
|
|
|
-
|
|
|
- set showCircle (value) {
|
|
|
- this._showCircle = value;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- get showAzimuth(){
|
|
|
- return this._showAzimuth;
|
|
|
- }
|
|
|
-
|
|
|
- set showAzimuth(value){
|
|
|
- this._showAzimuth = value;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- get showEdges () {
|
|
|
- return this._showEdges;
|
|
|
- }
|
|
|
-
|
|
|
- set showEdges (value) {
|
|
|
- this._showEdges = value;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- get showHeight () {
|
|
|
- return this._showHeight;
|
|
|
- }
|
|
|
-
|
|
|
- set showHeight (value) {
|
|
|
- this._showHeight = value;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- get showArea () {
|
|
|
- return this._showArea;
|
|
|
- }
|
|
|
-
|
|
|
- set showArea (value) {
|
|
|
- this._showArea = value;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- get closed () {
|
|
|
- return this._closed;
|
|
|
- }
|
|
|
-
|
|
|
- set closed (value) {
|
|
|
- this._closed = value;
|
|
|
- this.update();
|
|
|
- }
|
|
|
-
|
|
|
- get showDistances () {
|
|
|
- return this._showDistances;
|
|
|
- }
|
|
|
-
|
|
|
- set showDistances (value) {
|
|
|
- this._showDistances = value;
|
|
|
- this.update();
|
|
|
- } */
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
+function setLabelHightState(label, state){
|
|
|
+ if(state){
|
|
|
+ let color = new THREE.Color(Potree.config.measure.highlight.color)
|
|
|
+ //label.sprite.material.opacity = config.measure.highlight.opacity
|
|
|
+
|
|
|
+ //label.setBackgroundColor({r:255*color.r, g:255*color.g, b:255*color.b, a:config.measure.highlight.opacity})
|
|
|
+
|
|
|
+ label.sprite.material.useDepth = false;
|
|
|
+ //label.textColor = {r: this.color.r*255, g: this.color.g*255, b: this.color.b*255, a: 1}
|
|
|
+ }else{
|
|
|
+ //label.setBackgroundColor({r: this.color.r*255, g: this.color.g*255, b: this.color.b*255, a:config.measure.default.opacity})
|
|
|
+
|
|
|
+ label.sprite.material.useDepth = true
|
|
|
+ //label.sprite.material.opacity = 0.98
|
|
|
+ //label.textColor = {r: 255, g: 255, b: 255, a: 1}
|
|
|
+
|
|
|
+ }
|
|
|
+ label.updateTexture()
|
|
|
+}
|
|
|
|
|
|
-function setLabelHightState(label, state){
|
|
|
+/* function setLabelHightState(label, state){
|
|
|
if(state){
|
|
|
label.setBackgroundColor({r: highlightColor.r*255, g: highlightColor.g*255, b: highlightColor.b*255, a:config.measure.highlight.labelOpacity})
|
|
|
label.sprite.material.useDepth = false;
|
|
@@ -1045,6 +1094,11 @@ function setLabelHightState(label, state){
|
|
|
label.updateTexture()
|
|
|
//label.sprite.material.needsUpdate = true
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ */
|
|
|
+
|
|
|
+
|
|
|
|
|
|
|
|
|
|