Optimize modelTurnHead

Author: stevenjoezhang

src/cubism2/index.js

@@ -5,6 +5,28 @@ import MatrixStack from './utils/MatrixStack.js';
 import LAppLive2DManager from './LAppLive2DManager.js';
 import logger from '../logger.js';
 
+function normalizePoint(x, y, x0, y0, w, h) {
+  const dx = x - x0;
+  const dy = y - y0;
+
+  let targetX = 0, targetY = 0;
+
+  if (dx >= 0) {
+    targetX = dx / (w - x0);
+  } else {
+    targetX = dx / x0;
+  }
+  if (dy >= 0) {
+    targetY = dy / (h - y0);
+  } else {
+    targetY = dy / y0;
+  }
+  return {
+    x: targetX,
+    y: -targetY
+  };
+}
+
 class Cubism2Model {
   constructor() {
     this.live2DMgr = new LAppLive2DManager();
@@ -22,9 +44,6 @@ class Cubism2Model {
     this.drag = false;
     this.oldLen = 0;
 
-    this.lastMouseX = 0;
-    this.lastMouseY = 0;
-
     this._boundMouseEvent = this.mouseEvent.bind(this);
     this._boundTouchEvent = this.touchEvent.bind(this);
   }
@@ -37,10 +56,10 @@ class Cubism2Model {
       this.canvas.addEventListener('click', this._boundMouseEvent, false);
 
       this.canvas.addEventListener('mousedown', this._boundMouseEvent, false);
-      this.canvas.addEventListener('mousemove', this._boundMouseEvent, false);
+      document.addEventListener('mousemove', this._boundMouseEvent, false);
 
       this.canvas.addEventListener('mouseup', this._boundMouseEvent, false);
-      this.canvas.addEventListener('mouseout', this._boundMouseEvent, false);
+      document.addEventListener('mouseout', this._boundMouseEvent, false);
       this.canvas.addEventListener('contextmenu', this._boundMouseEvent, false);
 
       this.canvas.addEventListener('touchstart', this._boundTouchEvent, false);
@@ -210,12 +229,11 @@ class Cubism2Model {
   modelTurnHead(event) {
     this.drag = true;
 
-    const rect = event.target.getBoundingClientRect();
+    const rect = this.canvas.getBoundingClientRect();
 
-    const sx = this.transformScreenX(event.clientX - rect.left);
-    const sy = this.transformScreenY(event.clientY - rect.top);
-    const vx = this.transformViewX(event.clientX - rect.left);
-    const vy = this.transformViewY(event.clientY - rect.top);
+    const target = normalizePoint(event.clientX, event.clientY, rect.left + rect.width / 2, rect.top + rect.height / 2, window.innerWidth, window.innerHeight);
+    const vx = target.x;
+    const vy = target.y;
 
     logger.trace(
       'onMouseDown device( x:' +
@@ -229,19 +247,13 @@ class Cubism2Model {
       ')',
     );
 
-    this.lastMouseX = sx;
-    this.lastMouseY = sy;
-
     this.dragMgr.setPoint(vx, vy);
-
     this.live2DMgr.tapEvent(vx, vy);
   }
 
   followPointer(event) {
     const rect = event.target.getBoundingClientRect();
 
-    const sx = this.transformScreenX(event.clientX - rect.left);
-    const sy = this.transformScreenY(event.clientY - rect.top);
     const vx = this.transformViewX(event.clientX - rect.left);
     const vy = this.transformViewY(event.clientY - rect.top);
 
@@ -258,9 +270,6 @@ class Cubism2Model {
     );
 
     if (this.drag) {
-      this.lastMouseX = sx;
-      this.lastMouseY = sy;
-
       this.dragMgr.setPoint(vx, vy);
     }
   }
@@ -288,16 +297,8 @@ class Cubism2Model {
 
       if (e.wheelDelta > 0) this.modelScaling(1.1);
       else this.modelScaling(0.9);
-    } else if (e.type == 'mousedown') {
-      if ('button' in e && e.button != 0) return;
-
-      this.modelTurnHead(e);
     } else if (e.type == 'mousemove') {
-      this.followPointer(e);
-    } else if (e.type == 'mouseup') {
-      if ('button' in e && e.button != 0) return;
-
-      this.lookFront();
+      this.modelTurnHead(e);
     } else if (e.type == 'mouseout') {
       this.lookFront();
     }