Update EditorControls

[vincentfretin]

I'm opening this PR in draft while I'm looking into it.

The EditorControls.js file in this repo was added the day after this commit in three.js repo https://github.com/mrdoob/three.js/commit/12b89819d482fcebc014e6d59aad2ae1abdab9cd (that was included in three r100) Initial commit was https://github.com/aframevr/aframe-inspector/commit/aae61a3597c9206e89cab11fabddd06e4348fe36 comparing those two versions gave those differences:

--- old_EditorControls_from_threerepo.js    2023-04-17 17:16:52.851987686 +0200
+++ old_EditorControls.js   2023-04-17 17:14:54.659227028 +0200
@@ -1,3 +1,70 @@
+import debounce from 'lodash.debounce';
+
+THREE.Box3.prototype.expandByObject = (function () {
+  // Computes the world-axis-aligned bounding box of an object (including its children),
+  // accounting for both the object's, and children's, world transforms
+
+  var scope, i, l;
+
+  var v1 = new THREE.Vector3();
+
+  function traverse( node ) {
+
+    var geometry = node.geometry;
+
+    if ( geometry !== undefined ) {
+
+      if ( geometry.isGeometry ) {
+
+        var vertices = geometry.vertices;
+
+        for ( i = 0, l = vertices.length; i < l; i ++ ) {
+
+          v1.copy( vertices[ i ] );
+          v1.applyMatrix4( node.matrixWorld );
+
+          if (isNaN(v1.x) || isNaN(v1.y) || isNaN(v1.z)) { continue; }
+          scope.expandByPoint( v1 );
+
+        }
+
+      } else if ( geometry.isBufferGeometry ) {
+
+        var attribute = geometry.attributes.position;
+
+        if ( attribute !== undefined ) {
+
+          for ( i = 0, l = attribute.count; i < l; i ++ ) {
+
+            v1.fromBufferAttribute( attribute, i ).applyMatrix4( node.matrixWorld );
+
+            if (isNaN(v1.x) || isNaN(v1.y) || isNaN(v1.z)) { continue; }
+            scope.expandByPoint( v1 );
+
+          }
+
+        }
+
+      }
+
+    }
+
+  }
+
+  return function expandByObject( object ) {
+
+    scope = this;
+
+    object.updateMatrixWorld( true );
+
+    object.traverse( traverse );
+
+    return this;
+
+  };
+
+})();
+
 /**
  * @author qiao / https://github.com/qiao
  * @author mrdoob / http://mrdoob.com
@@ -38,13 +105,17 @@

    var changeEvent = { type: 'change' };

+  this.dispatchChange = debounce(() => {
+    scope.dispatchEvent(changeEvent);
+  }, 100);
+
    this.focus = function ( target ) {

        var distance;

        box.setFromObject( target );

-       if ( box.isEmpty() === false ) {
+       if ( box.isEmpty() === false && !isNaN(box.min.x) ) {

            box.getCenter( center );
            distance = box.getBoundingSphere( sphere ).radius;
@@ -60,7 +131,7 @@

        delta.set( 0, 0, 1 );
        delta.applyQuaternion( object.quaternion );
-       delta.multiplyScalar( distance * 4 );
+       delta.multiplyScalar( distance * 2 );

        object.position.copy( center ).add( delta );

@@ -78,7 +149,7 @@
        object.position.add( delta );
        center.add( delta );

-       scope.dispatchEvent( changeEvent );
+       scope.dispatchChange();

    };

@@ -94,7 +165,7 @@

        object.position.add( delta );

-       scope.dispatchEvent( changeEvent );
+       scope.dispatchChange();

    };

@@ -115,7 +186,7 @@

        object.lookAt( center );

-       scope.dispatchEvent( changeEvent );
+       scope.dispatchChange();

    };

further changes to it was around focus and ortho camera: https://github.com/aframevr/aframe-inspector/commit/f658d15beff7f76c7f2457b0f6288ddcaf18da79 https://github.com/aframevr/aframe-inspector/commit/26eb77f76b58fe9ae7a2e90cb2455161c57c181f#diff-d05c541b1811ac8b854c10217ee45ec94afc1f78c715842c7463c2fb9b05efa7 https://github.com/aframevr/aframe-inspector/commit/ee70fa1d1fa6ab223cdd51da46ab8d802957fd6d https://github.com/aframevr/aframe-inspector/commit/b371202e68dcad997e3f740996f912f79fe77526

Latest version in the three.js repo: is at https://github.com/mrdoob/three.js/commits/dev/editor/js/EditorControls.js

Some interesting updates around better touch support may be interesting to backport here: https://github.com/mrdoob/three.js/commit/1eccf74c8e326081616023cadad181eaefe81e4c https://github.com/mrdoob/three.js/commit/e55b718359414dd556e9b5c8f293a7df66f4f06a

[kfarr]

Thanks for digging through this @vincentfretin. I might be wrong but the only "new" feature I see in green above might be a bounding box around an entity and its children? I think currently selecting a parent entity with children in inspector will not result in a bounding box displayed unless it has a mesh attached to that exact node.

The touch updates appear to be using pointer instead of mouse events to support a wider range of devices but TBH I've tested this on ipad, touch screen displays, etc. and never had a problem before. There seems to be placeholder for custom touch behavior such as "// TODO touch" but nothing substantive.

[vincentfretin]

The part in green with expandByObject patch seems to be an old version of what is currently in threejs Box3 plus with some isNaN checks. I'm no sure in which case x y z on a vertex could be NaN here. See #686 for this specific part.