centering changes

zndraw/static/World/World.js

@@ -14,6 +14,7 @@ import {
 import { Selection } from "./systems/select.js";
 
 import { Line3D, Canvas3D } from "./components/draw.js";
+import { centerCamera } from "./systems/events.js";
 
 // These variables are module-scoped: we cannot access them
 // from outside the module
@@ -232,6 +233,12 @@ class World {
    */
   start() {
     loop.start();
+    // center camera if there are particles
+    const particles = this.particles.cache.get(0);
+    if (particles === undefined || particles.length === 0) {
+    } else {
+      centerCamera(this.selection.controls, this.particles);
+    }
   }
 
   /**

zndraw/static/World/components/particles.js

@@ -252,6 +252,13 @@ class ParticlesGroup extends THREE.Group {
       }
     }
   }
+
+  get_center() {
+    const center = new THREE.Vector3();
+    this.particles_mesh.computeBoundingSphere();
+    center.copy(this.particles_mesh.boundingSphere.center);
+    return center;
+  }
 }
 
 class CellGroup extends THREE.Group {

zndraw/static/World/systems/events.js

@@ -0,0 +1,28 @@
+import * as THREE from "three";
+
+export function centerCamera(controls, particlesGroup) {
+  if (controls.enablePan) {
+    // get the first object that is selected
+    if (particlesGroup.selection.length > 0) {
+      const matrix = new THREE.Matrix4();
+      const dummy = new THREE.Object3D();
+      particlesGroup.particles_mesh.getMatrixAt(
+        particlesGroup.selection[0],
+        matrix,
+      );
+      matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
+      controls.target.copy(dummy.position);
+      // controls.enablePan = false;
+      // document.getElementById("alertBoxCamera").style.display = "block";
+    } else {
+      const dummy = new THREE.Vector3();
+      dummy.copy(controls.getCenter());
+      controls.target.copy(dummy);
+    }
+  } else {
+    // follow is currently not working due to instancing
+    // document.getElementById("alertBoxCamera").style.display = "none";
+    // controls.target = controls.target.clone();
+    // controls.enablePan = true;
+  }
+}

zndraw/static/World/systems/select.js

@@ -1,5 +1,6 @@
 import * as THREE from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
+import { centerCamera } from "./events.js";
 
 let scroll_timer = null;
 
@@ -228,26 +229,7 @@ class Selection {
       if (document.activeElement === document.body) {
         const particlesGroup = this.scene.getObjectByName("particlesGroup");
         if (event.key === "c") {
-          if (this.controls.enablePan) {
-            // get the first object that is selected
-            if (particlesGroup.selection.length > 0) {
-              const matrix = new THREE.Matrix4();
-              const dummy = new THREE.Object3D();
-              particlesGroup.particles_mesh.getMatrixAt(
-                particlesGroup.selection[0],
-                matrix,
-              );
-              matrix.decompose(dummy.position, dummy.quaternion, dummy.scale);
-              this.controls.target.copy(dummy.position);
-              // this.controls.enablePan = false;
-              // document.getElementById("alertBoxCamera").style.display = "block";
-            }
-          } else {
-            // follow is currently not working due to instancing
-            // document.getElementById("alertBoxCamera").style.display = "none";
-            // this.controls.target = this.controls.target.clone();
-            // this.controls.enablePan = true;
-          }
+          centerCamera(this.controls, particlesGroup);
         }
         if (event.key === "x") {
           if (this._drawing) {