diff --git a/frontend/editor3d/app/pages/PageEnigma/Editor/KinHelpers/FKHelper.ts b/frontend/editor3d/app/pages/PageEnigma/Editor/KinHelpers/FKHelper.ts index c1f49f3a89..a534624255 100644 --- a/frontend/editor3d/app/pages/PageEnigma/Editor/KinHelpers/FKHelper.ts +++ b/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(); diff --git a/frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts b/frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts index 8b61f623ad..255420ce14 100644 --- a/frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts +++ b/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; diff --git a/frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts b/frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts index a0b62b53a3..4bf090f58b 100644 --- a/frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts +++ b/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) {