@@ -12,6 +12,27 @@ import LAppDefine from './LAppDefine.js';
12
12
import MatrixStack from './utils/MatrixStack.js' ;
13
13
import LAppLive2DManager from './LAppLive2DManager.js' ;
14
14
import logger from '../logger.js' ;
15
+ function normalizePoint ( x , y , x0 , y0 , w , h ) {
16
+ const dx = x - x0 ;
17
+ const dy = y - y0 ;
18
+ let targetX = 0 , targetY = 0 ;
19
+ if ( dx >= 0 ) {
20
+ targetX = dx / ( w - x0 ) ;
21
+ }
22
+ else {
23
+ targetX = dx / x0 ;
24
+ }
25
+ if ( dy >= 0 ) {
26
+ targetY = dy / ( h - y0 ) ;
27
+ }
28
+ else {
29
+ targetY = dy / y0 ;
30
+ }
31
+ return {
32
+ vx : targetX ,
33
+ vy : - targetY
34
+ } ;
35
+ }
15
36
class Cubism2Model {
16
37
constructor ( ) {
17
38
this . live2DMgr = new LAppLive2DManager ( ) ;
@@ -22,10 +43,7 @@ class Cubism2Model {
22
43
this . viewMatrix = null ;
23
44
this . projMatrix = null ;
24
45
this . deviceToScreen = null ;
25
- this . drag = false ;
26
46
this . oldLen = 0 ;
27
- this . lastMouseX = 0 ;
28
- this . lastMouseY = 0 ;
29
47
this . _boundMouseEvent = this . mouseEvent . bind ( this ) ;
30
48
this . _boundTouchEvent = this . touchEvent . bind ( this ) ;
31
49
}
@@ -34,10 +52,8 @@ class Cubism2Model {
34
52
if ( this . canvas . addEventListener ) {
35
53
this . canvas . addEventListener ( 'mousewheel' , this . _boundMouseEvent , false ) ;
36
54
this . canvas . addEventListener ( 'click' , this . _boundMouseEvent , false ) ;
37
- this . canvas . addEventListener ( 'mousedown' , this . _boundMouseEvent , false ) ;
38
- this . canvas . addEventListener ( 'mousemove' , this . _boundMouseEvent , false ) ;
39
- this . canvas . addEventListener ( 'mouseup' , this . _boundMouseEvent , false ) ;
40
- this . canvas . addEventListener ( 'mouseout' , this . _boundMouseEvent , false ) ;
55
+ document . addEventListener ( 'mousemove' , this . _boundMouseEvent , false ) ;
56
+ document . addEventListener ( 'mouseout' , this . _boundMouseEvent , false ) ;
41
57
this . canvas . addEventListener ( 'contextmenu' , this . _boundMouseEvent , false ) ;
42
58
this . canvas . addEventListener ( 'touchstart' , this . _boundTouchEvent , false ) ;
43
59
this . canvas . addEventListener ( 'touchend' , this . _boundTouchEvent , false ) ;
@@ -80,10 +96,8 @@ class Cubism2Model {
80
96
if ( this . canvas ) {
81
97
this . canvas . removeEventListener ( 'mousewheel' , this . _boundMouseEvent , false ) ;
82
98
this . canvas . removeEventListener ( 'click' , this . _boundMouseEvent , false ) ;
83
- this . canvas . removeEventListener ( 'mousedown' , this . _boundMouseEvent , false ) ;
84
- this . canvas . removeEventListener ( 'mousemove' , this . _boundMouseEvent , false ) ;
85
- this . canvas . removeEventListener ( 'mouseup' , this . _boundMouseEvent , false ) ;
86
- this . canvas . removeEventListener ( 'mouseout' , this . _boundMouseEvent , false ) ;
99
+ document . removeEventListener ( 'mousemove' , this . _boundMouseEvent , false ) ;
100
+ document . removeEventListener ( 'mouseout' , this . _boundMouseEvent , false ) ;
87
101
this . canvas . removeEventListener ( 'contextmenu' , this . _boundMouseEvent , false ) ;
88
102
this . canvas . removeEventListener ( 'touchstart' , this . _boundTouchEvent , false ) ;
89
103
this . canvas . removeEventListener ( 'touchend' , this . _boundTouchEvent , false ) ;
@@ -160,12 +174,9 @@ class Cubism2Model {
160
174
}
161
175
}
162
176
modelTurnHead ( event ) {
163
- this . drag = true ;
164
- const rect = event . target . getBoundingClientRect ( ) ;
165
- const sx = this . transformScreenX ( event . clientX - rect . left ) ;
166
- const sy = this . transformScreenY ( event . clientY - rect . top ) ;
167
- const vx = this . transformViewX ( event . clientX - rect . left ) ;
168
- const vy = this . transformViewY ( event . clientY - rect . top ) ;
177
+ var _b ;
178
+ const rect = this . canvas . getBoundingClientRect ( ) ;
179
+ const { vx, vy } = normalizePoint ( event . clientX , event . clientY , rect . left + rect . width / 2 , rect . top + rect . height / 2 , window . innerWidth , window . innerHeight ) ;
169
180
logger . trace ( 'onMouseDown device( x:' +
170
181
event . clientX +
171
182
' y:' +
@@ -175,17 +186,16 @@ class Cubism2Model {
175
186
' y:' +
176
187
vy +
177
188
')' ) ;
178
- this . lastMouseX = sx ;
179
- this . lastMouseY = sy ;
180
189
this . dragMgr . setPoint ( vx , vy ) ;
181
190
this . live2DMgr . tapEvent ( vx , vy ) ;
191
+ if ( ( _b = this . live2DMgr ) === null || _b === void 0 ? void 0 : _b . model . hitTest ( LAppDefine . HIT_AREA_BODY , vx , vy ) ) {
192
+ window . dispatchEvent ( new Event ( 'live2d:tapbody' ) ) ;
193
+ }
182
194
}
183
195
followPointer ( event ) {
196
+ var _b ;
184
197
const rect = event . target . getBoundingClientRect ( ) ;
185
- const sx = this . transformScreenX ( event . clientX - rect . left ) ;
186
- const sy = this . transformScreenY ( event . clientY - rect . top ) ;
187
- const vx = this . transformViewX ( event . clientX - rect . left ) ;
188
- const vy = this . transformViewY ( event . clientY - rect . top ) ;
198
+ const { vx, vy } = normalizePoint ( event . clientX , event . clientY , rect . left + rect . width / 2 , rect . top + rect . height / 2 , window . innerWidth , window . innerHeight ) ;
189
199
logger . trace ( 'onMouseMove device( x:' +
190
200
event . clientX +
191
201
' y:' +
@@ -195,45 +205,28 @@ class Cubism2Model {
195
205
' y:' +
196
206
vy +
197
207
')' ) ;
198
- if ( this . drag ) {
199
- this . lastMouseX = sx ;
200
- this . lastMouseY = sy ;
201
- this . dragMgr . setPoint ( vx , vy ) ;
208
+ this . dragMgr . setPoint ( vx , vy ) ;
209
+ if ( ( _b = this . live2DMgr ) === null || _b === void 0 ? void 0 : _b . model . hitTest ( LAppDefine . HIT_AREA_BODY , vx , vy ) ) {
210
+ window . dispatchEvent ( new Event ( 'live2d:hoverbody' ) ) ;
202
211
}
203
212
}
204
213
lookFront ( ) {
205
- if ( this . drag ) {
206
- this . drag = false ;
207
- }
208
214
this . dragMgr . setPoint ( 0 , 0 ) ;
209
215
}
210
216
mouseEvent ( e ) {
211
217
e . preventDefault ( ) ;
212
218
if ( e . type == 'mousewheel' ) {
213
- if ( e . clientX < 0 ||
214
- this . canvas . clientWidth < e . clientX ||
215
- e . clientY < 0 ||
216
- this . canvas . clientHeight < e . clientY ) {
217
- return ;
218
- }
219
219
if ( e . wheelDelta > 0 )
220
220
this . modelScaling ( 1.1 ) ;
221
221
else
222
- this . modelScaling ( 0.9 ) ;
222
+ this . modelScaling ( 1 ) ;
223
223
}
224
- else if ( e . type == 'mousedown' ) {
225
- if ( 'button' in e && e . button != 0 )
226
- return ;
224
+ else if ( e . type == 'click' || e . type == 'contextmenu' ) {
227
225
this . modelTurnHead ( e ) ;
228
226
}
229
227
else if ( e . type == 'mousemove' ) {
230
228
this . followPointer ( e ) ;
231
229
}
232
- else if ( e . type == 'mouseup' ) {
233
- if ( 'button' in e && e . button != 0 )
234
- return ;
235
- this . lookFront ( ) ;
236
- }
237
230
else if ( e . type == 'mouseout' ) {
238
231
this . lookFront ( ) ;
239
232
}
0 commit comments