add custom OrthographicCamera

demo/demo.js

@@ -1,5 +1,7 @@
 import { WEAS, Atoms, Species, parseXYZ, parseCIF, parseCube } from "../src/index.js"; // Adjust the path as necessary
+import * as THREE from "three";
 
+window.THREE = THREE;
 window.WEAS = WEAS;
 window.Atoms = Atoms;
 window.Species = Species;

src/core/Camera.js

@@ -0,0 +1,39 @@
+import * as THREE from "three";
+
+export class OrthographicCamera extends THREE.OrthographicCamera {
+  constructor(left, right, top, bottom, near, far, tjs = null) {
+    super(left, right, top, bottom, near, far);
+    this.tjs = tjs;
+  }
+
+  // Custom method to update zoom
+  updateZoom(value) {
+    if (this.zoom !== value) {
+      this.zoom = value;
+      this.updateProjectionMatrix(); // Required to apply the zoom change
+      this.dispatchObjectEvent({
+        data: value,
+        action: "zoom",
+        catalog: "camera",
+      });
+    }
+  }
+
+  // Custom method to update position
+  updatePosition(x, y, z) {
+    const newPos = new THREE.Vector3(x, y, z);
+    if (!this.position.equals(newPos)) {
+      this.position.copy(newPos);
+      this.dispatchObjectEvent({
+        data: [x, y, z],
+        action: "position",
+        catalog: "camera",
+      });
+    }
+  }
+
+  dispatchObjectEvent(data) {
+    const event = new CustomEvent("weas", { detail: data });
+    this.tjs.containerElement.dispatchEvent(event);
+  }
+}

src/core/blendjs.js

@@ -3,6 +3,7 @@ import * as THREE from "three";
 import { OrbitControls } from "../three/OrbitControls.js";
 import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js";
 import { WeasScene } from "./SceneManager.js";
+import { OrthographicCamera } from "./Camera.js";
 
 class BlendJSObject {
   constructor(name, geometry, material) {
@@ -75,13 +76,14 @@ export class BlendJS {
     const frustumHalfHeight = frustumSize / 2;
     const frustumHalfWidth = frustumHalfHeight * aspect;
 
-    this.camera = new THREE.OrthographicCamera(
+    this.camera = new OrthographicCamera(
       -frustumHalfWidth, // left
       frustumHalfWidth, // right
       frustumHalfHeight, // top
       -frustumHalfHeight, // bottom
       1, // near clipping plane
       2000, // far clipping plane
+      this,
     );
     // Set initial camera position
     this.camera.position.set(0, -100, 0);
@@ -164,19 +166,20 @@ export class BlendJS {
     this.viewerRect = this.containerElement.getBoundingClientRect();
   }
   //
-  updateCameraAndControls({ center = null, direction = [0, 0, 1], distance = null, zoom = 1 }) {
+  updateCameraAndControls({ lookAt = null, direction = [0, 0, 1], distance = null, zoom = 1 }) {
     /*
     Calculate the camera parameters based on the bounding box of the scene and the camera direction
-    The camera to look at the center, and rotate around the center of the atoms
+    The camera to look at the lookAt, and rotate around the lookAt of the atoms.
+    Position of the camera is defined by the look_at, direction, and distance attributes.
     */
     // normalize the camera direction
     direction = new THREE.Vector3(...direction).normalize();
     const sceneBoundingBox = this.getSceneBoundingBox();
-    // center of the bounding box
-    if (center === null) {
-      center = sceneBoundingBox.getCenter(new THREE.Vector3());
+    // lookAt of the bounding box
+    if (lookAt === null) {
+      lookAt = sceneBoundingBox.getCenter(new THREE.Vector3());
     } else {
-      center = new THREE.Vector3(...center);
+      lookAt = new THREE.Vector3(...lookAt);
     }
 
     const size = calculateBoundingBox(sceneBoundingBox, direction);
@@ -199,18 +202,18 @@ export class BlendJS {
     this.camera.top = cameraHeight / 2;
     this.camera.bottom = -cameraHeight / 2;
 
-    // Adjust camera position based on the center of the bounding box and the camera direction
+    // Adjust camera position based on the lookAt of the bounding box and the camera direction
     if (distance === null) {
       distance = size.z + padding;
     }
-    let cameraPosition = center.clone().add(direction.multiplyScalar(distance));
-    this.camera.position.copy(cameraPosition);
+    let cameraPosition = lookAt.clone().add(direction.multiplyScalar(distance));
+    this.camera.updatePosition(cameraPosition.x, cameraPosition.y, cameraPosition.z);
 
-    this.camera.lookAt(center);
+    this.camera.lookAt(lookAt);
     this.camera.updateProjectionMatrix();
-    this.camera.zoom = zoom;
-    // Set the camera target to the center of the atoms
-    this.controls.target.set(center.x, center.y, center.z);
+    this.camera.updateZoom(zoom);
+    // Set the camera target to the lookAt of the atoms
+    this.controls.target.set(lookAt.x, lookAt.y, lookAt.z);
   }
 
   getSceneBoundingBox() {

src/tools/camera.js

@@ -2,17 +2,31 @@ export function setupCameraGUI(gui, camera) {
   // Create a folder for camera parameters
   const cameraFolder = gui.addFolder("Camera");
 
-  cameraFolder.add(camera.position, "x", -100, 100).name("X Position");
-  cameraFolder.add(camera.position, "y", -100, 100).name("Y Position");
-  cameraFolder.add(camera.position, "z", -100, 100).name("Z Position");
+  // Temp storage for position to use in onChange callbacks
+  const position = { x: camera.position.x, y: camera.position.y, z: camera.position.z };
 
-  cameraFolder.add(camera.rotation, "x", -Math.PI, Math.PI).name("X Rotation");
-  cameraFolder.add(camera.rotation, "y", -Math.PI, Math.PI).name("Y Rotation");
-  cameraFolder.add(camera.rotation, "z", -Math.PI, Math.PI).name("Z Rotation");
-
-  const cameraParams = {
-    fov: camera.fov,
-    near: camera.near,
-    far: camera.far,
-  };
+  cameraFolder
+    .add(position, "x", -100, 100)
+    .name("X Position")
+    .onChange((newValue) => {
+      camera.updatePosition(newValue, position.y, position.z);
+      // Update the temp storage to ensure consistency
+      position.x = newValue;
+    });
+  cameraFolder
+    .add(position, "y", -100, 100)
+    .name("Y Position")
+    .onChange((newValue) => {
+      camera.updatePosition(position.x, newValue, position.z);
+      // Update the temp storage to ensure consistency
+      position.y = newValue;
+    });
+  cameraFolder
+    .add(position, "z", -100, 100)
+    .name("Z Position")
+    .onChange((newValue) => {
+      camera.updatePosition(position.x, position.y, newValue);
+      // Update the temp storage to ensure consistency
+      position.z = newValue;
+    });
 }

src/tools/viewpoint.js

@@ -1,27 +1,27 @@
-export function createViewpointButtons(viewer, gui) {
+export function createViewpointButtons(weas, gui) {
   // Create a folder for the viewpoint buttons
-  console.log("viewer", viewer);
+  console.log("weas", weas);
   const viewpointFolder = gui.addFolder("Viewpoint");
 
   // Create buttons for different viewpoints
   const viewpoints = {
     Top: () => {
-      viewer.tjs.updateCameraAndControls(viewer.atoms.getCenterOfGeometry(), [0, 0, 100]);
+      weas.tjs.updateCameraAndControls({ direction: [0, 0, 100] });
     },
     Bottom: () => {
-      viewer.tjs.updateCameraAndControls(viewer.atoms.getCenterOfGeometry(), [0, 0, -100]);
+      weas.tjs.updateCameraAndControls({ direction: [0, 0, -100] });
     },
     Left: () => {
-      viewer.tjs.updateCameraAndControls(viewer.atoms.getCenterOfGeometry(), [-100, 0, 0]);
+      weas.tjs.updateCameraAndControls({ direction: [-100, 0, 0] });
     },
     Right: () => {
-      viewer.tjs.updateCameraAndControls(viewer.atoms.getCenterOfGeometry(), [100, 0, 0]);
+      weas.tjs.updateCameraAndControls({ direction: [100, 0, 0] });
     },
     Front: () => {
-      viewer.tjs.updateCameraAndControls(viewer.atoms.getCenterOfGeometry(), [0, -100, 0]);
+      weas.tjs.updateCameraAndControls({ direction: [0, -100, 0] });
     },
     Back: () => {
-      viewer.tjs.updateCameraAndControls(viewer.atoms.getCenterOfGeometry(), [0, 100, 0]);
+      weas.tjs.updateCameraAndControls({ direction: [0, 100, 0] });
     },
   };