Skip to content

Potree dynamic unit measurements support #1795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pierotofy merged 3 commits into from
Nov 28, 2025
Merged

Potree dynamic unit measurements support #1795

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b73be69
Potree dynamic unit measurements support
pierotofy Nov 28, 2025
6d07334
Elevation profile display unit conversion
pierotofy Nov 28, 2025
1c6b623
Fix CSV/LAS height profile export units
pierotofy Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 66 additions & 32 deletions app/static/app/js/vendor/potree/build/potree/potree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54236,7 +54236,8 @@
{ // coordinate labels
let coordinateLabel = this.coordinateLabels[0];

let msg = position.toArray().map(p => Utils.addCommas(p.toFixed(2))).join(" / ");
let positions = position.toArray();
let msg = `${Utils.addCommas(positions[0].toFixed(3))} / ${Utils.addCommas(positions[1].toFixed(3))} / ${Utils.addCommas((positions[2] / window.viewer.lengthUnit.unitspermeter * window.viewer.lengthUnitDisplay.unitspermeter).toFixed(3))}`;
coordinateLabel.setText(msg);

coordinateLabel.visible = this.showCoordinates;
Expand Down Expand Up @@ -54405,8 +54406,8 @@
const N = AC.clone().cross(AB).normalize();

const center = Potree.Utils.computeCircleCenter(A, B, C);
const radius = center.distanceTo(A);

let radius = center.distanceTo(A);
if (isNaN(radius)) radius = 0;

const scale = radius / 20;
circleCenter.position.copy(center);
Expand All @@ -54429,11 +54430,16 @@
circleLine.position.copy(center);
circleLine.scale.set(radius, radius, radius);
circleLine.lookAt(target);

let suffix = "";
if(this.lengthUnit != null && this.lengthUnitDisplay != null){
radius = radius / this.lengthUnit.unitspermeter * this.lengthUnitDisplay.unitspermeter;
suffix = this.lengthUnitDisplay.code;
}

circleRadiusLabel.visible = true;
circleRadiusLabel.position.copy(center.clone().add(B).multiplyScalar(0.5));
circleRadiusLabel.setText(`${radius.toFixed(3)}`);

circleRadiusLabel.setText(`${radius.toFixed(3)} ${suffix}`);
}
}

Expand Down Expand Up @@ -72569,6 +72575,8 @@ void main() {
});

let headerValues = [];
const skipFields = ["intensity", "return number", "number of returns", "source id", "gpsTime"];

for (let attribute of attributes) {
let itemSize = points.data[attribute].length / points.numPoints;

Expand All @@ -72580,24 +72588,25 @@ void main() {
for (let i = 0; i < itemSize; i++) {
headerValues.push(`${attribute}_${i}`);
}
} else {
} else if (skipFields.indexOf(attribute) === -1){
headerValues.push(attribute);
}
}
string = headerValues.join(', ') + '\n';
string = headerValues.join(',') + '\n';

for (let i = 0; i < points.numPoints; i++) {
let values = [];

for (let attribute of attributes) {
if (skipFields.indexOf(attribute) !== -1) continue;
let itemSize = points.data[attribute].length / points.numPoints;
let value = points.data[attribute]
.subarray(itemSize * i, itemSize * i + itemSize)
.join(', ');
values.push(value);
}

string += values.join(', ') + '\n';
string += values.join(',') + '\n';
}

return string;
Expand Down Expand Up @@ -73116,24 +73125,20 @@ void main() {
transform = value => value / scale + offset;
}





if (attributeName === 'position') {
let values = [...position].map(v => Utils.addCommas(v.toFixed(3)));
let values = [...position];
html += `
<tr>
<td>x</td>
<td>${values[0]}</td>
<td>${Utils.addCommas(values[0].toFixed(3))}</td>
</tr>
<tr>
<td>y</td>
<td>${values[1]}</td>
<td>${Utils.addCommas(values[1].toFixed(3))}</td>
</tr>
<tr>
<td>z</td>
<td>${values[2]}</td>
<td>${Utils.addCommas((values[2] / this.viewer.lengthUnit.unitspermeter * this.viewer.lengthUnitDisplay.unitspermeter).toFixed(3))}</td>
</tr>`;
} else if (attributeName === 'rgba') {
html += `
Expand All @@ -73149,10 +73154,10 @@ void main() {
<td>${attributeName}</td>
<td>${value.toFixed(3)}</td>
</tr>`;
} else {
} else if (attributeName === "classification") {
html += `
<tr>
<td>${attributeName}</td>
<td style="padding-right: 4px">${attributeName}</td>
<td>${transform(value)}</td>
</tr>`;
}
Expand Down Expand Up @@ -73229,6 +73234,7 @@ void main() {
let trueElevationPosition = new Float32Array(originPos);
for(let i = 0; i < pointSet.numPoints; i++){
trueElevationPosition[3 * i + 2] += pointcloud.position.z;
trueElevationPosition[3 * i + 2] = trueElevationPosition[3 * i + 2] / this.viewer.lengthUnit.unitspermeter * this.viewer.lengthUnitDisplay.unitspermeter;
}

pointSet.data.position = trueElevationPosition;
Expand Down Expand Up @@ -73440,6 +73446,7 @@ void main() {
.innerTickSize(-width)
.outerTickSize(1)
.tickPadding(10)
.tickFormat(v => (v / this.viewer.lengthUnit.unitspermeter * this.viewer.lengthUnitDisplay.unitspermeter).toFixed(0))
.ticks(height / 20);

this.elXAxis = this.svg.append('g')
Expand Down Expand Up @@ -73566,7 +73573,7 @@ void main() {
.range([0, width]);
this.scaleY.domain([this.camera.bottom + this.camera.position.z, this.camera.top + this.camera.position.z])
.range([height, 0]);

let marginLeft = this.renderArea[0].offsetLeft;

this.xAxis.scale(this.scaleX)
Expand Down Expand Up @@ -74176,13 +74183,13 @@ ENDSEC
for (let point of points) {
let x = Utils.addCommas(point.x.toFixed(3));
let y = Utils.addCommas(point.y.toFixed(3));
let z = Utils.addCommas(point.z.toFixed(3));
let z = Utils.addCommas((point.z / this.viewer.lengthUnit.unitspermeter * this.viewer.lengthUnitDisplay.unitspermeter).toFixed(3));

let row = $(`
<tr>
<td><span>${x}</span></td>
<td><span>${y}</span></td>
<td><span>${z}</span></td>
<td><span data-dyn-value="${point.z}">${z}</span></td>
<td align="right" style="width: 25%">
<img name="copy" title="copy" class="button-icon" src="${copyIconPath}" style="width: 16px; height: 16px"/>
</td>
Expand Down Expand Up @@ -74411,7 +74418,10 @@ ENDSEC
elCoordiantesContainer.append(this.createCoordinatesTable(this.measurement.points.map(p => p.position)));

let elArea = this.elContent.find(`#measurement_area`);
elArea.html(this.measurement.getArea().toFixed(3));
let area = this.measurement.getArea();
elArea.html((area / (this.viewer.lengthUnit.unitspermeter * this.viewer.lengthUnit.unitspermeter) * (this.viewer.lengthUnitDisplay.unitspermeter * this.viewer.lengthUnitDisplay.unitspermeter)).toFixed(3));
elArea.attr('data-dyn-value', area);
elArea.attr('data-dyn-type', 'area');
}
};

Expand Down Expand Up @@ -74536,10 +74546,13 @@ ENDSEC
return Potree.Utils.addCommas(number.toFixed(3));
};

const convFactor = (1.0 / this.viewer.lengthUnit.unitspermeter) * this.viewer.lengthUnitDisplay.unitspermeter;


const txtCenter = `${format(center.x)} ${format(center.y)} ${format(center.z)}`;
const txtRadius = format(radius);
const txtCircumference = format(circumference);
const txtXYCenter = `${format(center.x)} ${format(center.y)}`;
const txtZCenter = format(center.z * convFactor);
const txtRadius = format(radius * convFactor);
const txtCircumference = format(circumference * convFactor);

const thStyle = `style="text-align: left"`;
const tdStyle = `style="width: 100%; padding: 5px;"`;
Expand All @@ -74551,16 +74564,16 @@ ENDSEC
</tr>
<tr>
<td ${tdStyle} colspan="2">
${txtCenter}
<span>${txtXYCenter}</span> <span data-dyn-value="${center.z}">${txtZCenter}</span>
</td>
</tr>
<tr>
<th ${thStyle}>Radius: </th>
<td ${tdStyle}>${txtRadius}</td>
<td ${tdStyle} data-dyn-value="${radius}">${txtRadius}</td>
</tr>
<tr>
<th ${thStyle}>Circumference: </th>
<td ${tdStyle}>${txtCircumference}</td>
<td ${tdStyle} data-dyn-value="${circumference}">${txtCircumference}</td>
</tr>
`);
}
Expand All @@ -74575,7 +74588,7 @@ ENDSEC
<div class="measurement_content selectable">
<span class="coordinates_table_container"></span>
<br>
<span id="height_label">Height: </span><br>
<b>Height:</b> <span id="height_label"></span><br>

<!-- ACTIONS -->
<div style="display: flex; margin-top: 12px">
Expand Down Expand Up @@ -74612,10 +74625,11 @@ ENDSEC
let min = lowPoint.z;
let max = highPoint.z;
let height = max - min;
height = height.toFixed(3);
let displayHeight = height / this.viewer.lengthUnit.unitspermeter * this.viewer.lengthUnitDisplay.unitspermeter;

this.elHeightLabel = this.elContent.find(`#height_label`);
this.elHeightLabel.html(`<b>Height:</b> ${height}`);
this.elHeightLabel.text(`${displayHeight.toFixed(3)}`);
this.elHeightLabel.attr('data-dyn-value', height);
}
}
};
Expand Down Expand Up @@ -75024,7 +75038,7 @@ ENDSEC

<br>

<input type="button" id="show_2d_profile" value="show 2d profile" style="width: 100%"/>
<input type="button" id="show_2d_profile" value="Show 2D Profile" style="width: 100%"/>

<!-- ACTIONS -->
<div style="display: flex; margin-top: 12px">
Expand Down Expand Up @@ -88731,6 +88745,26 @@ ENDSEC
}

this.dispatchEvent({ 'type': 'length_unit_changed', 'viewer': this, value: lengthUnitValue });

let self = this;
$('#potree_sidebar_container [data-dyn-value]').each(function(){
const $el = $(this);
const dynValue = parseFloat($el.attr('data-dyn-value'));
if (isNaN(dynValue)) return;

const dynType = $el.attr('data-dyn-type');

let lu = self.lengthUnit.unitspermeter;
let lud = self.lengthUnitDisplay.unitspermeter;

// Update the unit text based on the new display unit
if (dynType === 'area') {
lud *= lud;
lu *= lu;
}

$el.text((dynValue / lu * lud).toFixed(3));
});
};

zoomTo(node, factor, animationDuration = 0){
Expand Down