Some bug fixes and improvements for FK (#476)

frontend/editor3d/app/pages/PageEnigma/Editor/KinHelpers/FKHelper.ts

@@ -48,7 +48,7 @@ export class FKHelper {
   // Set FK target
   setTarget(target: THREE.Object3D) {
     // TODO: Highlight all the necessary bones
-    this.targetBoneSpheres = [];
+    this.clear();
     target.traverse((child) => {
       if (child.type !== "Bone") {
         return;
@@ -59,7 +59,7 @@ export class FKHelper {
       const material = new THREE.MeshBasicMaterial({ color: 0xff0000, depthTest: false, transparent: true });
       const sphere = new THREE.Mesh(geometry, material);
       sphere.name = FKHelperSphereName;
-      const uniformScale = 2;
+      const uniformScale = 1.5;
       sphere.scale.set(uniformScale, uniformScale, uniformScale);
       child.add(sphere);
       this.targetBoneSpheres.push(sphere);
@@ -98,14 +98,13 @@ export class FKHelper {
 
     this.scene.add(this.transformControls);
     this.isControlInScene = true;
-    // this.transformControls.addEventListener("dragging-changed", (event: any) => {
-    //   // Disable the object transforms for bone transforms
-    //   event.target.setPointer(event.value);
-    // });
   }
 
   private highlightSphere(sphere: THREE.Object3D) {
-    this.resetHighlight();
+    this.targetBoneSpheres.forEach((s) => {
+      // @ts-expect-error Material on object3d, but it's fine since this is a mesh
+      s.material.opacity = 0.2
+    });
     // @ts-expect-error Material on object3d, but it's fine since this is a mesh
     sphere.material.opacity = 1;
   }
@@ -128,13 +127,15 @@ export class FKHelper {
 
   private removeSpheres() {
     this.targetBoneSpheres.forEach((sphere) => {
+      this.scene.remove(sphere);
       sphere.parent?.remove(sphere);
+      // @ts-expect-error Geometry on object3d, but it's fine since this is a mesh
+      sphere.geometry.dispose();
     });
     this.targetBoneSpheres = [];
   }
 
   clear() {
-    this.targetBoneSpheres = [];
     this.removeControls();
     this.removeSpheres();
 

frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts

@@ -960,6 +960,8 @@ class Editor {
   }
 
   deleteObject(uuid: string) {
+    this.mouse_controls?.clearFKVisuals();
+    this.mouse_controls?.removeTransformControls(true);
     this.utils.deleteObject(uuid);
     if (this.outliner_feature_flag) {
       const result = this.sceneManager?.render_outliner(
@@ -991,26 +993,26 @@ class Editor {
           this.render_camera_aspect_ratio === CameraAspectRatio.HORIZONTAL_16_9
             ? 1024
             : this.render_camera_aspect_ratio ===
-                CameraAspectRatio.VERTICAL_9_16
+              meraAspectRatio.VERTICAL_9_16
               ? 576
               : this.render_camera_aspect_ratio ===
-                  CameraAspectRatio.HORIZONTAL_3_2
+                meraAspectRatio.HORIZONTAL_3_2
                 ? 900
                 : this.render_camera_aspect_ratio ===
-                    CameraAspectRatio.VERTICAL_2_3
+                  meraAspectRatio.VERTICAL_2_3
                   ? 600
                   : 1000;
         const height =
           this.render_camera_aspect_ratio === CameraAspectRatio.HORIZONTAL_16_9
             ? 576
             : this.render_camera_aspect_ratio ===
-                CameraAspectRatio.VERTICAL_9_16
+              meraAspectRatio.VERTICAL_9_16
               ? 1024
               : this.render_camera_aspect_ratio ===
-                  CameraAspectRatio.HORIZONTAL_3_2
+                meraAspectRatio.HORIZONTAL_3_2
                 ? 600
                 : this.render_camera_aspect_ratio ===
-                    CameraAspectRatio.VERTICAL_2_3
+                  meraAspectRatio.VERTICAL_2_3
                   ? 900
                   : 1000;
 

frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts

@@ -124,6 +124,10 @@ export class MouseControls {
     this.isBoneDragged = dragging;
   }
 
+  clearFKVisuals() {
+    this.fkHelper.clear();
+  }
+
   focus() {
     if (this.lockControls && this.selected) {
       this.lockControls.camera.lookAt(this.selected[0].position);
@@ -146,9 +150,26 @@ export class MouseControls {
       this.selected = [];
       this.publishSelect();
     }
+    this.hideTransformControls();
+    if (remove_outline) this.outlinePass.selectedObjects = [];
+  }
+
+  hideTransformControls() {
+    if (this.control == undefined) {
+      return;
+    }
+
     this.control.detach();
     this.scene.remove(this.control);
-    if (remove_outline) this.outlinePass.selectedObjects = [];
+  }
+
+  reattachTransformControls() {
+    if (this.control == undefined || this.selected == undefined) {
+      return;
+    }
+
+    this.control.attach(this.selected[0]);
+    this.scene.add(this.control);
   }
 
   selectObject(currentObject: THREE.Object3D) {
@@ -197,6 +218,35 @@ export class MouseControls {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
 
+  toggleFKMode() {
+    if (this.kinMode == KinMode.FK) {
+      this.fkHelper.clear();
+      this.kinMode = KinMode.NONE;
+      this.reattachTransformControls();
+      console.log("FK mode off");
+      return;
+    }
+
+    // Make sure we have an intersection
+    if (!(this.selected && this.selected.length > 0)) {
+      return;
+    }
+
+    // Make sure FK is supported only on character type objects
+    const firstSelection = this.selected[0];
+    if (!firstSelection.userData.isCharacter) {
+      return;
+    }
+
+    // FK is good to go
+    // Disable main transform controls
+    this.hideTransformControls();
+    this.kinMode = KinMode.FK;
+    this.fkHelper.setTarget(this.selected[0]);
+    console.log("FK mode on");
+    return;
+  }
+
   async onkeydown(event: KeyboardEvent) {
     if (hotkeysStatus.value.disabled) {
       return;
@@ -228,29 +278,7 @@ export class MouseControls {
       this.control?.setMode("scale");
       return;
     } else if (event.key === "k") {
-      if (this.kinMode == KinMode.FK) {
-        this.fkHelper.clear();
-        this.kinMode = KinMode.NONE;
-        console.log("FK mode off");
-        return;
-      }
-
-      // Make sure we have an intersection
-      if (!(this.selected && this.selected.length > 0)) {
-        return;
-      }
-
-      // Make sure FK is supported only on character type objects
-      const firstSelection = this.selected[0];
-      if (!firstSelection.userData.isCharacter) {
-        return;
-      }
-
-      // FK test
-      this.kinMode = KinMode.FK;
-      this.fkHelper.setTarget(this.selected[0]);
-      console.log("FK mode on");
-      return;
+      this.toggleFKMode();
     }
 
     if ((event.ctrlKey || event.metaKey) && !this.isProcessing) {