3dtiles-inspector 0.2.17 → 0.2.18

package/CHANGELOG.md

@@ -6,6 +6,15 @@ The format is based on Keep a Changelog and this project follows Semantic Versio
 
 ## [Unreleased]
 
+## [0.2.18] - 2026-07-16
+
+### Fixed
+
+- Fixed reversed-depth render ordering for transform controls, crop guides,
+  and crop-sphere wireframes with Three.js 0.185.x.
+- Fixed translate, rotate, and scale edits not updating already loaded tiles
+  with Three.js 0.185.x.
+
 ## [0.2.17] - 2026-07-16
 
 ### Changed

package/dist/inspector-assets/viewer/app.js

@@ -65710,6 +65710,15 @@ var init_TransformControls = __esm({
   }
 });
 
+// src/viewer/scene/renderOrder.js
+function getDepthAwareRenderOrder(renderOrder, reversedDepthBuffer) {
+  return reversedDepthBuffer ? -renderOrder : renderOrder;
+}
+var init_renderOrder = __esm({
+  "src/viewer/scene/renderOrder.js"() {
+  }
+});
+
 // src/viewer/scene/transformControls.js
 function forceOverlayMaterial(material) {
   if (!material) {
@@ -65723,10 +65732,14 @@ function forceOverlayMaterial(material) {
   material.depthWrite = false;
   material.needsUpdate = true;
 }
-function forceOverlayRendering(object) {
-  object.renderOrder = TRANSFORM_CONTROL_RENDER_ORDER;
+function forceOverlayRendering(object, reversedDepthBuffer) {
+  const renderOrder = getDepthAwareRenderOrder(
+    TRANSFORM_CONTROL_RENDER_ORDER,
+    reversedDepthBuffer
+  );
+  object.renderOrder = renderOrder;
   object.traverse((entry) => {
-    entry.renderOrder = TRANSFORM_CONTROL_RENDER_ORDER;
+    entry.renderOrder = renderOrder;
     forceOverlayMaterial(entry.material);
   });
 }
@@ -65736,13 +65749,14 @@ function createViewerTransformControls({
   domElement,
   scene,
   transformHandle,
+  reversedDepthBuffer,
   callbacks,
   getSyncingTransformHandle
 }) {
   const transformControls = new TransformControls(camera, domElement);
   const transformControlsHelper = typeof transformControls.getHelper === "function" ? transformControls.getHelper() : null;
   if (transformControlsHelper) {
-    forceOverlayRendering(transformControlsHelper);
+    forceOverlayRendering(transformControlsHelper, reversedDepthBuffer);
   }
   transformControls.setMode("translate");
   transformControls.setSpace("local");
@@ -65773,7 +65787,8 @@ var TRANSFORM_CONTROL_RENDER_ORDER;
 var init_transformControls = __esm({
   "src/viewer/scene/transformControls.js"() {
     init_TransformControls();
-    TRANSFORM_CONTROL_RENDER_ORDER = 1000002;
+    init_renderOrder();
+    TRANSFORM_CONTROL_RENDER_ORDER = 1000003;
   }
 });
 
@@ -67917,7 +67932,7 @@ function createFarHandleMaterial({ depthTest, opacity = 1 }) {
     transparent: opacity < 1
   });
 }
-function createScreenSelectionFarHandle(selection) {
+function createScreenSelectionFarHandle(selection, reversedDepthBuffer = false) {
   const handle = new Group();
   const solidMaterial = createFarHandleMaterial({
     depthTest: true
@@ -67939,18 +67954,25 @@ function createScreenSelectionFarHandle(selection) {
   const overlayGrid = new LineSegments(gridGeometry, overlayMaterial);
   const solidGuide = new LineSegments(guideGeometry, solidGuideMaterial);
   const overlayGuide = new LineSegments(guideGeometry, overlayGuideMaterial);
+  const solidRenderOrder = getDepthAwareRenderOrder(
+    SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER,
+    reversedDepthBuffer
+  );
+  const overlayRenderOrder = getDepthAwareRenderOrder(
+    SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER + 1,
+    reversedDepthBuffer
+  );
   handle.name = `Screen Selection ${selection.id} Far`;
-  handle.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER;
   handle.userData.screenSelectionFarHandle = true;
   handle.userData.screenSelectionId = selection.id;
   solidGrid.name = `${handle.name} Grid`;
-  solidGrid.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER;
+  solidGrid.renderOrder = solidRenderOrder;
   overlayGrid.name = `${handle.name} Grid Overlay`;
-  overlayGrid.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER + 1;
+  overlayGrid.renderOrder = overlayRenderOrder;
   solidGuide.name = `${handle.name} Guide`;
-  solidGuide.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER;
+  solidGuide.renderOrder = solidRenderOrder;
   overlayGuide.name = `${handle.name} Guide Overlay`;
-  overlayGuide.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER + 1;
+  overlayGuide.renderOrder = overlayRenderOrder;
   handle.add(solidGrid, solidGuide, overlayGrid, overlayGuide);
   selection.farHandle = handle;
   selection.farHandleGridGeometry = gridGeometry;
@@ -68033,6 +68055,7 @@ var init_farHandle = __esm({
     init_three_module();
     init_state();
     init_geometry();
+    init_renderOrder();
   }
 });
 
@@ -68836,6 +68859,7 @@ function createCropController({
   rectEl,
   scene,
   screenSelectionSplatEdit,
+  reversedDepthBuffer,
   setStatus,
   setTransformMode,
   syncTransformControlsState,
@@ -69028,11 +69052,18 @@ function createCropController({
     });
     const visibleWireframe = new LineSegments(geometry, visibleMaterial);
     const overlayWireframe = new LineSegments(geometry, overlayMaterial);
-    visibleWireframe.renderOrder = KEEP_SPHERE_WIREFRAME_RENDER_ORDER;
-    overlayWireframe.renderOrder = KEEP_SPHERE_WIREFRAME_RENDER_ORDER + 1;
+    const visibleRenderOrder = getDepthAwareRenderOrder(
+      KEEP_SPHERE_WIREFRAME_RENDER_ORDER,
+      reversedDepthBuffer
+    );
+    const overlayRenderOrder = getDepthAwareRenderOrder(
+      KEEP_SPHERE_WIREFRAME_RENDER_ORDER + 1,
+      reversedDepthBuffer
+    );
+    visibleWireframe.renderOrder = visibleRenderOrder;
+    overlayWireframe.renderOrder = overlayRenderOrder;
     group.add(visibleWireframe);
     group.add(overlayWireframe);
-    group.renderOrder = KEEP_SPHERE_WIREFRAME_RENDER_ORDER;
     group.userData.keepSphereHandle = true;
     group.userData.screenSelectionId = selection.id;
     selection.wireframe = group;
@@ -69255,7 +69286,9 @@ function createCropController({
     }
     entries.forEach(({ selection }) => {
       if (!selection.farHandle) {
-        scene.add(createScreenSelectionFarHandle(selection));
+        scene.add(
+          createScreenSelectionFarHandle(selection, reversedDepthBuffer)
+        );
       }
     });
     syncWorldState();
@@ -70137,6 +70170,7 @@ var init_cropController = __esm({
     init_editOverlay();
     init_cropUi();
     init_utils();
+    init_renderOrder();
     CAMERA_POSITION_EPSILON_SQ = 1e-12;
     CAMERA_QUATERNION_EPSILON = 1e-10;
     CAMERA_PROJECTION_EPSILON = 1e-10;
@@ -70204,7 +70238,7 @@ function refreshLoadedTileSceneMatrices(tilesRenderer) {
   }
   tilesRenderer.forEachLoadedModel((loadedScene) => {
     if (typeof loadedScene.updateWorldMatrix === "function") {
-      loadedScene.updateWorldMatrix(false, true);
+      loadedScene.updateWorldMatrix(false, true, true);
     } else {
       loadedScene.updateMatrixWorld(true);
     }
@@ -70842,6 +70876,7 @@ var require_app = __commonJS({
       domElement: renderer.domElement,
       scene,
       transformHandle,
+      reversedDepthBuffer: renderer.capabilities.reversedDepthBuffer,
       callbacks: {
         onObjectChange: (object) => cropController?.handleTransformControlObjectChange(object) ?? false,
         onRootObjectChange: (matrix) => {
@@ -70943,6 +70978,7 @@ var require_app = __commonJS({
       rectEl: screenSelectionRectEl,
       scene,
       screenSelectionSplatEdit,
+      reversedDepthBuffer: renderer.capabilities.reversedDepthBuffer,
       setStatus,
       setTransformMode: (mode) => transformModeController.setMode(mode),
       syncTransformControlsState: () => transformModeController.syncControls(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dtiles-inspector",
-  "version": "0.2.17",
+  "version": "0.2.18",
   "description": "Inspect, align, and save local 3D Tiles root transforms in an interactive browser session.",
   "author": "William Liu <lyz15972107087@gmail.com>",
   "license": "Apache-2.0",

package/src/viewer/app.js

@@ -230,6 +230,7 @@ const { transformControls, transformControlsHelper } =
     domElement: renderer.domElement,
     scene,
     transformHandle,
+    reversedDepthBuffer: renderer.capabilities.reversedDepthBuffer,
     callbacks: {
       onObjectChange: (object) =>
         cropController?.handleTransformControlObjectChange(object) ?? false,
@@ -344,6 +345,7 @@ cropController = createCropController({
   rectEl: screenSelectionRectEl,
   scene,
   screenSelectionSplatEdit,
+  reversedDepthBuffer: renderer.capabilities.reversedDepthBuffer,
   setStatus,
   setTransformMode: (mode) => transformModeController.setMode(mode),
   syncTransformControlsState: () => transformModeController.syncControls(),

package/src/viewer/scene/renderOrder.js

@@ -0,0 +1,5 @@
+export function getDepthAwareRenderOrder(renderOrder, reversedDepthBuffer) {
+  // Three.js reverses each completed render list in reversed-depth mode, so
+  // explicit renderOrder priorities must use the opposite numeric direction.
+  return reversedDepthBuffer ? -renderOrder : renderOrder;
+}

package/src/viewer/scene/transformControls.js

@@ -1,6 +1,7 @@
 import { TransformControls } from 'three/addons/controls/TransformControls.js';
+import { getDepthAwareRenderOrder } from './renderOrder.js';
 
-const TRANSFORM_CONTROL_RENDER_ORDER = 1000002;
+const TRANSFORM_CONTROL_RENDER_ORDER = 1000003;
 
 function forceOverlayMaterial(material) {
   if (!material) {
@@ -17,10 +18,14 @@ function forceOverlayMaterial(material) {
   material.needsUpdate = true;
 }
 
-function forceOverlayRendering(object) {
-  object.renderOrder = TRANSFORM_CONTROL_RENDER_ORDER;
+function forceOverlayRendering(object, reversedDepthBuffer) {
+  const renderOrder = getDepthAwareRenderOrder(
+    TRANSFORM_CONTROL_RENDER_ORDER,
+    reversedDepthBuffer,
+  );
+  object.renderOrder = renderOrder;
   object.traverse((entry) => {
-    entry.renderOrder = TRANSFORM_CONTROL_RENDER_ORDER;
+    entry.renderOrder = renderOrder;
     forceOverlayMaterial(entry.material);
   });
 }
@@ -31,6 +36,7 @@ export function createViewerTransformControls({
   domElement,
   scene,
   transformHandle,
+  reversedDepthBuffer,
   callbacks,
   getSyncingTransformHandle,
 }) {
@@ -41,7 +47,7 @@ export function createViewerTransformControls({
       : null;
 
   if (transformControlsHelper) {
-    forceOverlayRendering(transformControlsHelper);
+    forceOverlayRendering(transformControlsHelper, reversedDepthBuffer);
   }
   transformControls.setMode('translate');
   transformControls.setSpace('local');

package/src/viewer/screenSelection/cropController.js

@@ -48,6 +48,7 @@ import {
 } from './editOverlay.js';
 import { updateCropControls } from '../dom/cropUi.js';
 import { mouseToCoords, setRaycasterFromCamera } from '../utils.js';
+import { getDepthAwareRenderOrder } from '../scene/renderOrder.js';
 
 const CAMERA_POSITION_EPSILON_SQ = 1e-12;
 const CAMERA_QUATERNION_EPSILON = 1e-10;
@@ -180,6 +181,7 @@ export function createCropController({
   rectEl,
   scene,
   screenSelectionSplatEdit,
+  reversedDepthBuffer,
   setStatus,
   setTransformMode,
   syncTransformControlsState,
@@ -413,11 +415,20 @@ export function createCropController({
     });
     const visibleWireframe = new LineSegments(geometry, visibleMaterial);
     const overlayWireframe = new LineSegments(geometry, overlayMaterial);
-    visibleWireframe.renderOrder = KEEP_SPHERE_WIREFRAME_RENDER_ORDER;
-    overlayWireframe.renderOrder = KEEP_SPHERE_WIREFRAME_RENDER_ORDER + 1;
+    const visibleRenderOrder = getDepthAwareRenderOrder(
+      KEEP_SPHERE_WIREFRAME_RENDER_ORDER,
+      reversedDepthBuffer,
+    );
+    const overlayRenderOrder = getDepthAwareRenderOrder(
+      KEEP_SPHERE_WIREFRAME_RENDER_ORDER + 1,
+      reversedDepthBuffer,
+    );
+    visibleWireframe.renderOrder = visibleRenderOrder;
+    overlayWireframe.renderOrder = overlayRenderOrder;
+    // Group.renderOrder becomes groupOrder and sorts before child renderOrder.
+    // Leave the transform root at its default so controls can render last.
     group.add(visibleWireframe);
     group.add(overlayWireframe);
-    group.renderOrder = KEEP_SPHERE_WIREFRAME_RENDER_ORDER;
     group.userData.keepSphereHandle = true;
     group.userData.screenSelectionId = selection.id;
     selection.wireframe = group;
@@ -677,7 +688,9 @@ export function createCropController({
 
     entries.forEach(({ selection }) => {
       if (!selection.farHandle) {
-        scene.add(createScreenSelectionFarHandle(selection));
+        scene.add(
+          createScreenSelectionFarHandle(selection, reversedDepthBuffer),
+        );
       }
     });
     syncWorldState();

package/src/viewer/screenSelection/farHandle.js

@@ -25,6 +25,7 @@ import {
   getSelectionTransformDelta,
   normalizeFarPlaneAxes,
 } from './geometry.js';
+import { getDepthAwareRenderOrder } from '../scene/renderOrder.js';
 
 function pushFarHandleSegment(vertices, start, end) {
   vertices.push(start[0], start[1], start[2] || 0, end[0], end[1], end[2] || 0);
@@ -179,7 +180,10 @@ function createFarHandleMaterial({ depthTest, opacity = 1 }) {
   });
 }
 
-export function createScreenSelectionFarHandle(selection) {
+export function createScreenSelectionFarHandle(
+  selection,
+  reversedDepthBuffer = false,
+) {
   const handle = new Group();
   const solidMaterial = createFarHandleMaterial({
     depthTest: true,
@@ -201,19 +205,28 @@ export function createScreenSelectionFarHandle(selection) {
   const overlayGrid = new LineSegments(gridGeometry, overlayMaterial);
   const solidGuide = new LineSegments(guideGeometry, solidGuideMaterial);
   const overlayGuide = new LineSegments(guideGeometry, overlayGuideMaterial);
+  const solidRenderOrder = getDepthAwareRenderOrder(
+    SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER,
+    reversedDepthBuffer,
+  );
+  const overlayRenderOrder = getDepthAwareRenderOrder(
+    SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER + 1,
+    reversedDepthBuffer,
+  );
 
   handle.name = `Screen Selection ${selection.id} Far`;
-  handle.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER;
+  // Keep the Group at the default order so its groupOrder does not override
+  // the child material priorities below.
   handle.userData.screenSelectionFarHandle = true;
   handle.userData.screenSelectionId = selection.id;
   solidGrid.name = `${handle.name} Grid`;
-  solidGrid.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER;
+  solidGrid.renderOrder = solidRenderOrder;
   overlayGrid.name = `${handle.name} Grid Overlay`;
-  overlayGrid.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER + 1;
+  overlayGrid.renderOrder = overlayRenderOrder;
   solidGuide.name = `${handle.name} Guide`;
-  solidGuide.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER;
+  solidGuide.renderOrder = solidRenderOrder;
   overlayGuide.name = `${handle.name} Guide Overlay`;
-  overlayGuide.renderOrder = SCREEN_SELECTION_FAR_HANDLE_RENDER_ORDER + 1;
+  overlayGuide.renderOrder = overlayRenderOrder;
   handle.add(solidGrid, solidGuide, overlayGrid, overlayGuide);
   selection.farHandle = handle;
   selection.farHandleGridGeometry = gridGeometry;

package/src/viewer/transform/tilesetTransform.js

@@ -70,7 +70,8 @@ export function refreshLoadedTileSceneMatrices(tilesRenderer) {
 
   tilesRenderer.forEachLoadedModel((loadedScene) => {
     if (typeof loadedScene.updateWorldMatrix === 'function') {
-      loadedScene.updateWorldMatrix(false, true);
+      // Three.js r185 only recomputes clean, static matrices when forced.
+      loadedScene.updateWorldMatrix(false, true, true);
     } else {
       loadedScene.updateMatrixWorld(true);
     }