|
@@ -10,7 +10,7 @@ import {ExtendView} from "../../../viewer/ExtendView.js";
|
|
|
import Viewport from "../../viewer/Viewport.js";
|
|
|
import {TextSprite} from "../../objects/TextSprite.js";
|
|
|
import {ExtendPointCloudMaterial} from "../../../materials/ExtendPointCloudMaterial.js";
|
|
|
-
|
|
|
+import AxisViewer from "../../objects/tool/AxisViewer.js";
|
|
|
|
|
|
|
|
|
|
|
@@ -98,7 +98,9 @@ var Clip = {
|
|
|
//viewer.setControls(viewer.orbitControls);
|
|
|
viewer.setLimitFar(false)
|
|
|
//viewer.setClipState(false) //暂时关闭旧的clipping
|
|
|
-
|
|
|
+ /* new AxisViewer(viewer.mainViewport, viewer.renderArea,{domStyle:{
|
|
|
+ bottom: '2px',right: '20px', width:'80px',height:'80px'}
|
|
|
+ }) */
|
|
|
|
|
|
{
|
|
|
this.box = new BoxVolume({
|
|
@@ -270,6 +272,8 @@ var Clip = {
|
|
|
viewer.controls.setTarget(null)
|
|
|
this.splitScreenTool.focusCenter = null
|
|
|
|
|
|
+ //viewer.mainViewport.axis.dispose()
|
|
|
+
|
|
|
cameraProps.forEach(e=>e.openCount = 0)
|
|
|
|
|
|
if(this.showMap){
|
|
@@ -536,7 +540,7 @@ var Clip = {
|
|
|
},
|
|
|
|
|
|
|
|
|
- screenshot: async ()=>{
|
|
|
+ screenshot: async ()=>{ //测绘图下载。顶视图|侧视图
|
|
|
return new Promise((resolve,reject)=>{
|
|
|
if(Clip.screenshoting )return reject()
|
|
|
|
|
@@ -544,7 +548,7 @@ var Clip = {
|
|
|
let camera = viewer.mainViewport.camera
|
|
|
//if(Clip.activeViewName == 'mainView')return reject()
|
|
|
|
|
|
- const maxWidth = 8192, minWidth = 1024
|
|
|
+ const maxWidth = 8192, minWidth = 1024 //图片尺寸最大最小值。
|
|
|
//Potree.settings.pointDensity = 'ultraHigh'
|
|
|
|
|
|
viewer.inputHandler.deselectAll()
|
|
@@ -571,16 +575,8 @@ var Clip = {
|
|
|
return mat
|
|
|
})
|
|
|
|
|
|
-
|
|
|
- let minZoom = Potree.browser.urlHasValue('clipZoom',true) || 80 //1px = 1个点 = 1cm , 如果一个点都是1cm的话
|
|
|
- //中间部分75-80为佳,文字100,边缘50. 最好支持调节 . 且当下载尺寸变大往往点云也多,可能冲破pointbudget限制
|
|
|
-
|
|
|
-
|
|
|
- /* let minPointSize = Infinity
|
|
|
- visiPointclouds.forEach(e=>minPointSize = Math.min(e.material.size,minPointSize))
|
|
|
|
|
|
- let minZoom = 2 / minPointSize //这是相信当前size是恰好的前提,每个点云1px时不会重叠也不会有缝隙
|
|
|
- */
|
|
|
+ //根据boundingBox尺寸来定图片尺寸
|
|
|
let boundingBox = Clip.box.boundingBox.clone().applyMatrix4(Clip.box.matrixWorld)
|
|
|
let points = []
|
|
|
var bound = new THREE.Box3()
|
|
@@ -591,10 +587,17 @@ var Clip = {
|
|
|
bound.expandByPoint(p1)
|
|
|
})
|
|
|
let boundSize = bound.getSize(new THREE.Vector3)
|
|
|
+ let minZoom = Potree.browser.urlHasValue('clipZoom',true) || 80 //1px = 1个点 = 1cm , 如果一个点都是1cm的话
|
|
|
+ //zoom不宜过大或过小,过小点云重叠、画面模糊;过大点云有间隙,纹理就看不清
|
|
|
+ //中间部分75-80为佳,文字100,边缘50. 最好支持调节 . 且当下载尺寸变大往往点云也多,可能冲破pointbudget限制
|
|
|
+ //let text = `1 : ${(1 / camera.zoom).toFixed(4)}(像素 : 米)`
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
let w = boundSize.x * minZoom
|
|
|
let h = boundSize.y * minZoom
|
|
|
|
|
|
- let max = Math.max(w,h)//, min = Math.min(w,h)
|
|
|
+ let max = Math.max(w,h)
|
|
|
let s = 1
|
|
|
if(max > maxWidth){
|
|
|
s = maxWidth/max
|
|
@@ -609,22 +612,26 @@ var Clip = {
|
|
|
//虽然size>1就是浪费像素,但是太小了视觉效果有点差……可能因为fov不真实。 点云大就像是老式电视机虽然显示像素量少但感觉不出画面模糊,且边缘锐利。
|
|
|
|
|
|
|
|
|
- w = Math.round(w)
|
|
|
+ w = Math.round(w)
|
|
|
h = Math.round(h)
|
|
|
|
|
|
let focusObjectInfo = [{boundingBox, points}, 'boundingBox', 0, { dontChangeCamDir:true, dontMoveMap:true, boundScale:1 }]
|
|
|
|
|
|
|
|
|
- //分块渲染
|
|
|
- let r = THREE.Math.clamp(Math.sqrt(3.5e7 / boundSize.z) * s, 1024, 4096); // 推理 wc*hc = w / r * h / r = zoom * w * s * zoom * h * s / r^2 = xyz / V(常数,每多少立方米会超出pointBudget)
|
|
|
+ //分块渲染截图,最后拼合图片。需要使每一块的点数不超过pointBudget, 且尺寸不超过4096(会崩溃),过小的话一般不会超过pointBudget,除非是深度较大后排点云多。
|
|
|
+ let r = THREE.Math.clamp(Math.sqrt(3.5e7 / boundSize.z) * s, 1024, 4096); //每多少米分一块。 推理 wc*hc = w / r * h / r = zoom * w * s * zoom * h * s / r^2 = xyz / V(常数,每多少立方米会超出pointBudget,就是括号里的数字,给大概值)
|
|
|
//let r = THREE.Math.clamp(1024 / boundSize.z, 256, 4096);
|
|
|
|
|
|
- let wc = w / r
|
|
|
- let hc = h / r
|
|
|
+ let wc = w / r //横向块数
|
|
|
+ let hc = h / r //纵向块数
|
|
|
let splitRenderInfo = (wc > 1 || hc > 1) && {wc: Math.ceil(wc), hc:Math.ceil(hc)} //因为结果需要化为整数所以可能不太理想, 分割数过多。 另外如果面积小但是因z过长而超出pointBudget没关系,因后排点云无需绘制
|
|
|
|
|
|
console.log({wc,hc,w,h})
|
|
|
|
|
|
+
|
|
|
+ let text = `1 : ${(boundSize.x / w).toFixed(4)}(像素 : 米)`
|
|
|
+
|
|
|
+
|
|
|
let {getImagePromise, finishPromise} = viewer.startScreenshot({ type: 'default', bgOpacity:0, focusObjectInfo, maxTimeForPointLoad : 3e5, pointDensity:'screenshot2', splitRenderInfo }, w, h, 1 )
|
|
|
finishPromise.done(({dataUrl}) => {
|
|
|
|
|
@@ -633,16 +640,29 @@ var Clip = {
|
|
|
|
|
|
let img = new Image
|
|
|
img.src = dataUrl
|
|
|
- img.onload = async ()=>{
|
|
|
+ img.onload = async ()=>{//加上标尺比例水印
|
|
|
+
|
|
|
+ //固定文字大小和边距像素 //如果有一边过小,可能超出画面外,暂时不管这种可能
|
|
|
+ const Margin = 30
|
|
|
+ let topRatioToImg = THREE.Math.clamp( Margin / h , 0.006,0.10) //clamp:当图片过大时,label间距像素放大一点,反之缩小一点
|
|
|
+ let leftRatioToImg = THREE.Math.clamp( Margin / w , 0.006,0.05)
|
|
|
+
|
|
|
let labelInfo = {
|
|
|
- bottomRatioToImg : 0.03, rightRatioToImg : 0.03, /* widthRatioToImg : 0.2, //不固定字大小 */
|
|
|
+ topRatioToImg, leftRatioToImg,
|
|
|
textColor: { r: 255, g: 255, b: 255, a: 1 },
|
|
|
textBorderColor : { r: 30, g: 30, b: 30, a: 1 },
|
|
|
textBorderThick : 1,
|
|
|
- fontsize: 24
|
|
|
+ fontsize: math.linearClamp(w, [100, 700, 4096, 8192], [12, 20, 30, 40])
|
|
|
}
|
|
|
|
|
|
- let text = `1 : ${(1 / camera.zoom).toFixed(4)}(像素 : 米)`
|
|
|
+ let m = leftRatioToImg * w
|
|
|
+ labelInfo.bgMargin = {left:m , top : topRatioToImg * h * 2 + labelInfo.fontsize, right: m, bottom:m }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ //console.log('topRatioToImg',topRatioToImg,'leftRatioToImg',leftRatioToImg,'fontsize', labelInfo.fontsize)
|
|
|
+
|
|
|
+
|
|
|
|
|
|
let finalDataUrl = await Potree.Utils.imgAddText(img, text , labelInfo )
|
|
|
|
|
@@ -662,9 +682,8 @@ var Clip = {
|
|
|
|
|
|
})
|
|
|
/*
|
|
|
- 隐患:无法获知最大可加在的点的数量,也未知需要加载的点的数量。所以会因pointBudget限制造成周围的点稀疏。
|
|
|
-
|
|
|
- 如果需要加载的点云还是超出,是否可以改为分批渲染,类似多viewport但共用一个camera,在beforeRender时分viewport
|
|
|
+ 隐患:无法获知最大可加载的点的数量,也未知需要加载的点的数量。需要掌控好分块数量,避免因pointBudget限制造成周围的点稀疏。
|
|
|
+ 加载点云时间过久
|
|
|
|
|
|
*/
|
|
|
return finishPromise
|
|
@@ -698,7 +717,24 @@ export {Clip}
|
|
|
viewer.modules.Clip.box.matrix
|
|
|
|
|
|
//恢复box
|
|
|
-let a = new THREE.Matrix4().fromArray([....])
|
|
|
+let a = new THREE.Matrix4().fromArray([
|
|
|
+ 14.189120116830964,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 9.924790069368392,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0.8751009568437951,
|
|
|
+ 0,
|
|
|
+ -7.433819981633984,
|
|
|
+ 1.528696446650445,
|
|
|
+ 2.9412375879215977,
|
|
|
+ 1
|
|
|
+])
|
|
|
a.decompose(viewer.modules.Clip.box.position,viewer.modules.Clip.box.quaternion,viewer.modules.Clip.box.scale)
|
|
|
|
|
|
viewer.modules.Clip.rotateSideCamera(-93)
|