Disable colors + restore clipping

js/controllers/menu_controller.js

@@ -193,6 +193,7 @@ export default class extends Controller {
             <i class="bi bi-chevron-down me-1"></i>${node.id}
         `;
         // Add color "swatch" only for first level groups
+        /*
         if (node.depth === 2) {
             trigger.innerHTML += html`
                 <div class="d-inline-block border rounded ms-2"
@@ -200,6 +201,7 @@ export default class extends Controller {
                 </div>
             `;
         }
+        */
 
         const collapseDiv = document.createElement('div');
         collapseDiv.className = 'collapse';

js/scene.js

@@ -79,10 +79,12 @@ function loadNodes(nodes) {
         node.load(n.model);
         node.setRotation(...config.scene.initRotation);
 
+        /*
         node.setMaterial(new THREE.MeshPhongMaterial({
             transparent: false,
             color: n.color ?? '#fff',
         }));
+        */
 
         // Apply any transparency before attaching to scene
         if (n.opacity !== undefined && n.opacity !== null) {

js/utils/clipping.js

@@ -31,14 +31,12 @@ function createClippingPlaneMesh (boundingSphere) {
  * @param {String} axis 
  */
 function dragClipper (planeMesh, axis) {
-    const controls = new THREE.TransformControls(
+    const controls = new THREE.DragControls(
+        [planeMesh],
         ATON.Nav._camera,
         ATON._renderer.domElement,
     ); 
 
-    controls.attach(planeMesh);
-    controls.setMode('translate');
-
     const startPosition = new THREE.Vector3();
     // Only move along the selected axis (exlude the others)
     const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);