disable mouse look on checkbox selected

M3-org · Oct 17, 2023 · 5283c74 · 5283c74
1 parent aeb65c2
commit 5283c74
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
@@ -115,7 +115,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
         </div>
       </div>
       <Selector confirmDialog = {confirmDialog} animationManager={animationManager} templateInfo={templateInfo} blinkManager = {blinkManager} lookatManager = {lookatManager} effectManager = {effectManager}/>
-      <TraitInformation currentVRM={currentVRM} animationManager={animationManager}/>
+      <TraitInformation currentVRM={currentVRM} animationManager={animationManager} lookatManager={lookatManager}/>
     </Fragment>
   )
 }
diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
@@ -5,7 +5,7 @@ import { SceneContext } from "../context/SceneContext";
 import Slider from "./Slider";
 import { cullHiddenMeshes } from "../library/utils";
 
-export default function TraitInformation({currentVRM, animationManager}){
+export default function TraitInformation({currentVRM, animationManager, lookatManager}){
     const {
         displayTraitOption,
         avatar
@@ -15,6 +15,7 @@ export default function TraitInformation({currentVRM, animationManager}){
     const [cullInDistance, setCullInDistance] = useState(0);
     const [cullLayer, setCullLayer] = useState(0);
     const [animationName, setAnimationName] = useState(animationManager.getCurrentAnimationName());
+    const [hasMouseLook, setHasMouseLook] = useState(lookatManager.enabled);
 
     useEffect(() => {
         if (currentVRM != null){
@@ -47,6 +48,7 @@ export default function TraitInformation({currentVRM, animationManager}){
     };
 
     const handleCullLayerChange = (event) => {
+        console.log(lookatManager.enabled);
         if (currentVRM?.data){
             setCullLayer(event.target.value);
             currentVRM.data.cullingLayer = event.target.value;
@@ -62,6 +64,11 @@ export default function TraitInformation({currentVRM, animationManager}){
         await animationManager.loadPreviousAnimation();
         setAnimationName(animationManager.getCurrentAnimationName());
     }
+    const handleMouseLookEnable = (event) => {
+        setHasMouseLook(event.target.checked);
+        lookatManager.setActive(event.target.checked);
+        // Perform any additional actions or logic based on the checkbox state change
+    };
 
     return (
         displayTraitOption != null ? (
@@ -134,10 +141,15 @@ export default function TraitInformation({currentVRM, animationManager}){
                         <div className={styles["traitInfoText"]}>
                             <div className={styles["checkboxHolder"]}>
                                 <div>
+
                                 Mouse Follow
                                 </div>
                                 <label className={styles["custom-checkbox"]}>
-                                    <input type="checkbox" />
+                                    <input 
+                                        type="checkbox" 
+                                        checked={hasMouseLook}
+                                        onChange={handleMouseLookEnable}
+                                    />
                                     <div className={styles["checkbox-container"]}></div>
                                 </label>
                             </div>

diff --git a/src/library/lookatManager.js b/src/library/lookatManager.js
@@ -9,6 +9,7 @@ export class LookAtManager {
     this.leftEyeBones = []
     this.rightEyesBones = []
     this.curMousePos = new THREE.Vector2()
+    this.enabled = true;
 
     this.hotzoneSection  = getHotzoneSection()
     this.enabled = true
@@ -56,6 +57,9 @@ export class LookAtManager {
     //   this.update();
     // }, 1000/60);
   }
+  setActive(active){
+    this.enabled = active;
+  }
   setCamera(camera){
     this.camera = camera
   }
@@ -127,7 +131,7 @@ export class LookAtManager {
     const cameraRotationThreshold = localVector.z > 0.; // if camera rotation is not larger than 90
     if (this.curMousePos.x > this.hotzoneSection.xStart && this.curMousePos.x < this.hotzoneSection.xEnd &&
       this.curMousePos.y > this.hotzoneSection.yStart && this.curMousePos.y < this.hotzoneSection.yEnd &&
-      cameraRotationThreshold) {
+      cameraRotationThreshold && this.enabled) {
       this.neckBones.forEach(neck => {
         this._moveJoint(neck, this.maxLookPercent.neck)
       })