@gamelearn/arcade-components 1.35.0 → 1.35.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/conversational-pro-component/components/ConversationalProComponent.js +8 -1
- package/dist/components/conversational-pro-component/components/scene/Panel.js +22 -7
- package/dist/components/dialog-component/components/DialogComponent.js +75 -35
- package/dist/helpers/index.js +64 -4
- package/dist/helpers/useEkho.js +1 -5
- package/package.json +1 -1
- package/dist/helpers/useMouthMixer.js +0 -109
package/dist/components/conversational-pro-component/components/ConversationalProComponent.js
CHANGED
|
@@ -355,7 +355,14 @@ var ConversationProViewer = function ConversationProViewer(_ref) {
|
|
|
355
355
|
handleClickNext();
|
|
356
356
|
}
|
|
357
357
|
}
|
|
358
|
-
});
|
|
358
|
+
});
|
|
359
|
+
(0, _react.useEffect)(function () {
|
|
360
|
+
var _currentMessage$emoti;
|
|
361
|
+
|
|
362
|
+
if ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' && !((_currentMessage$emoti = currentMessage.emotion) !== null && _currentMessage$emoti !== void 0 && _currentMessage$emoti.includes('think'))) {
|
|
363
|
+
setTTsStart(true);
|
|
364
|
+
}
|
|
365
|
+
}, [currentLineData, currentMessage.emotion]); // Autoplay logic
|
|
359
366
|
|
|
360
367
|
(0, _react.useEffect)(function () {
|
|
361
368
|
if (autoplayCond && ((currentLineData === null || currentLineData === void 0 ? void 0 : currentLineData.audioType) === 'none' || audioFailed)) {
|
|
@@ -23,8 +23,6 @@ var _LightSet = _interopRequireDefault(require("../../../../helpers/LightSet"));
|
|
|
23
23
|
|
|
24
24
|
var _deviceDetection = require("../../../../helpers/deviceDetection");
|
|
25
25
|
|
|
26
|
-
var _useMouthMixer = _interopRequireDefault(require("../../../../helpers/useMouthMixer"));
|
|
27
|
-
|
|
28
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
27
|
|
|
30
28
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -35,7 +33,7 @@ var isMobile = (0, _deviceDetection.DeviceDetection)();
|
|
|
35
33
|
var defaultCamPos = [0, 14.63, 16];
|
|
36
34
|
|
|
37
35
|
function Panel(_ref) {
|
|
38
|
-
var _character$resource4, _character$
|
|
36
|
+
var _character$resource4, _character$resource6, _character$resource6$, _character$resource6$2, _character$resource7;
|
|
39
37
|
|
|
40
38
|
var character = _ref.character,
|
|
41
39
|
ttsStarted = _ref.ttsStarted,
|
|
@@ -60,10 +58,27 @@ function Panel(_ref) {
|
|
|
60
58
|
|
|
61
59
|
return {};
|
|
62
60
|
}, [character.emotion, character === null || character === void 0 ? void 0 : (_character$resource4 = character.resource) === null || _character$resource4 === void 0 ? void 0 : _character$resource4.animations, isCharacter]);
|
|
63
|
-
var startMouthMixer = (0, _useMouthMixer.default)(model.current, character === null || character === void 0 ? void 0 : (_character$resource5 = character.resource) === null || _character$resource5 === void 0 ? void 0 : (_character$resource5$ = _character$resource5.animations) === null || _character$resource5$ === void 0 ? void 0 : (_character$resource5$2 = _character$resource5$.talking) === null || _character$resource5$2 === void 0 ? void 0 : _character$resource5$2.url, active);
|
|
64
61
|
(0, _react.useEffect)(function () {
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
if (model.current && active) {
|
|
63
|
+
if (ttsStarted) {
|
|
64
|
+
var _character$resource5, _character$resource5$, _character$resource5$2;
|
|
65
|
+
|
|
66
|
+
(0, _helpers.executeTalkingAnimation)(model.current, character === null || character === void 0 ? void 0 : (_character$resource5 = character.resource) === null || _character$resource5 === void 0 ? void 0 : (_character$resource5$ = _character$resource5.animations) === null || _character$resource5$ === void 0 ? void 0 : (_character$resource5$2 = _character$resource5$.talking) === null || _character$resource5$2 === void 0 ? void 0 : _character$resource5$2.url);
|
|
67
|
+
} else {
|
|
68
|
+
var _model$current$userDa = model.current.userData,
|
|
69
|
+
mixer = _model$current$userDa.mixer,
|
|
70
|
+
defaultAnim = _model$current$userDa.defaultAnim,
|
|
71
|
+
emotionClip = _model$current$userDa.emotionClip;
|
|
72
|
+
|
|
73
|
+
if (defaultAnim && emotionClip) {
|
|
74
|
+
var emotionAction = mixer.clipAction(emotionClip, model.current);
|
|
75
|
+
var defaultAction = mixer.clipAction(defaultAnim, model.current);
|
|
76
|
+
mixer.stopAllAction();
|
|
77
|
+
(0, _helpers.executeCrossFade)(emotionAction, defaultAction);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}, [character === null || character === void 0 ? void 0 : (_character$resource6 = character.resource) === null || _character$resource6 === void 0 ? void 0 : (_character$resource6$ = _character$resource6.animations) === null || _character$resource6$ === void 0 ? void 0 : (_character$resource6$2 = _character$resource6$.talking) === null || _character$resource6$2 === void 0 ? void 0 : _character$resource6$2.url, ttsStarted, active]);
|
|
67
82
|
var onLoadElement = (0, _react.useCallback)(function (object) {
|
|
68
83
|
if (cameraRef.current) {
|
|
69
84
|
var boundingBox = new _three.Box3();
|
|
@@ -123,7 +138,7 @@ function Panel(_ref) {
|
|
|
123
138
|
}, 100);
|
|
124
139
|
return character.type === 'image' ? null : /*#__PURE__*/_react.default.createElement("scene", {
|
|
125
140
|
ref: sceneRef
|
|
126
|
-
}, (_character$
|
|
141
|
+
}, (_character$resource7 = character.resource) !== null && _character$resource7 !== void 0 && _character$resource7.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
|
|
127
142
|
progressive: true
|
|
128
143
|
}, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.TriggerWrapper, {
|
|
129
144
|
name: "char_".concat(character.uid),
|
|
@@ -33,8 +33,6 @@ var _LangIsRtl = _interopRequireDefault(require("../../../helpers/LangIsRtl"));
|
|
|
33
33
|
|
|
34
34
|
var _BubbleWrapper = _interopRequireDefault(require("./BubbleWrapper"));
|
|
35
35
|
|
|
36
|
-
var _useMouthMixer = _interopRequireDefault(require("../../../helpers/useMouthMixer"));
|
|
37
|
-
|
|
38
36
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
39
37
|
|
|
40
38
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -81,7 +79,7 @@ var maxCharacterToSwitch = 70;
|
|
|
81
79
|
raycast.firstHitOnly = true;
|
|
82
80
|
|
|
83
81
|
var DialogComponent = function DialogComponent(_ref) {
|
|
84
|
-
var
|
|
82
|
+
var _currentLine$slots;
|
|
85
83
|
|
|
86
84
|
var emitEvent = _ref.emitEvent,
|
|
87
85
|
lines = _ref.lines,
|
|
@@ -101,25 +99,15 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
101
99
|
automatic = _useState4[0],
|
|
102
100
|
setAutomatic = _useState4[1];
|
|
103
101
|
|
|
104
|
-
var _useState5 = (0, _react.useState)(
|
|
105
|
-
text: '',
|
|
106
|
-
name: '',
|
|
107
|
-
left: false,
|
|
108
|
-
top: false,
|
|
109
|
-
inScene: false,
|
|
110
|
-
thinkful: false,
|
|
111
|
-
voiceOver: false,
|
|
112
|
-
avatar: '',
|
|
113
|
-
show: false
|
|
114
|
-
}),
|
|
102
|
+
var _useState5 = (0, _react.useState)(false),
|
|
115
103
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
116
|
-
|
|
117
|
-
|
|
104
|
+
mounted = _useState6[0],
|
|
105
|
+
setMounted = _useState6[1];
|
|
118
106
|
|
|
119
107
|
var _useState7 = (0, _react.useState)(false),
|
|
120
108
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
121
|
-
|
|
122
|
-
|
|
109
|
+
talking = _useState8[0],
|
|
110
|
+
startTalking = _useState8[1];
|
|
123
111
|
|
|
124
112
|
var _useState9 = (0, _react.useState)(false),
|
|
125
113
|
_useState10 = _slicedToArray(_useState9, 2),
|
|
@@ -167,9 +155,30 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
167
155
|
voiceOver = _ref2.voiceOver,
|
|
168
156
|
decision = _ref2.decision;
|
|
169
157
|
|
|
170
|
-
var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : currentLine.slots.find(function (slot) {
|
|
158
|
+
var talkingCharacter = currentLine === null || currentLine === void 0 ? void 0 : (_currentLine$slots = currentLine.slots) === null || _currentLine$slots === void 0 ? void 0 : _currentLine$slots.find(function (slot) {
|
|
171
159
|
return slot.talking;
|
|
172
160
|
});
|
|
161
|
+
var autoPlayCond = automatic && !(currentLine !== null && currentLine !== void 0 && currentLine.decision);
|
|
162
|
+
var audio = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio) || {}).length;
|
|
163
|
+
var voice = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice) || {}).length;
|
|
164
|
+
var isVoiceOver = voiceOver || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalNarration';
|
|
165
|
+
var isDecision = decision || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalDecision';
|
|
166
|
+
|
|
167
|
+
var _useState13 = (0, _react.useState)({
|
|
168
|
+
text: '',
|
|
169
|
+
name: '',
|
|
170
|
+
left: false,
|
|
171
|
+
top: false,
|
|
172
|
+
inScene: false,
|
|
173
|
+
thinkful: false,
|
|
174
|
+
voiceOver: false,
|
|
175
|
+
avatar: '',
|
|
176
|
+
show: false
|
|
177
|
+
}),
|
|
178
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
179
|
+
currentMessage = _useState14[0],
|
|
180
|
+
setCurrentMessage = _useState14[1];
|
|
181
|
+
|
|
173
182
|
var charactersInvolved = (0, _react.useMemo)(function () {
|
|
174
183
|
return lines.reduce(function (acc, current) {
|
|
175
184
|
if (current.slots) {
|
|
@@ -191,14 +200,13 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
191
200
|
});
|
|
192
201
|
}, [emitEvent]);
|
|
193
202
|
|
|
194
|
-
var
|
|
195
|
-
|
|
196
|
-
previousLineWasDecision =
|
|
197
|
-
setPreviousLineWasDecision =
|
|
203
|
+
var _useState15 = (0, _react.useState)(false),
|
|
204
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
205
|
+
previousLineWasDecision = _useState16[0],
|
|
206
|
+
setPreviousLineWasDecision = _useState16[1];
|
|
198
207
|
|
|
199
|
-
var isVoiceOver = voiceOver || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalNarration';
|
|
200
|
-
var isDecision = decision || (currentLine === null || currentLine === void 0 ? void 0 : currentLine.type) === 'conversationalDecision';
|
|
201
208
|
var getCurrentVisible = (0, _react.useCallback)(function (uid) {
|
|
209
|
+
if (!uid) return null;
|
|
202
210
|
var object;
|
|
203
211
|
scene.traverseVisible(function (node) {
|
|
204
212
|
if (node.uid === uid && !object) {
|
|
@@ -255,9 +263,8 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
255
263
|
mixer.stopAllAction();
|
|
256
264
|
defaultAction.play();
|
|
257
265
|
}
|
|
258
|
-
};
|
|
266
|
+
}; // Reset currentEmotion to defaultAnim
|
|
259
267
|
|
|
260
|
-
var startMixer = (0, _useMouthMixer.default)(getCurrentVisible(talkingCharacter.uid), talkingCharacter === null || talkingCharacter === void 0 ? void 0 : (_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : (_talkingCharacter$cha2 = _talkingCharacter$cha.resource) === null || _talkingCharacter$cha2 === void 0 ? void 0 : (_talkingCharacter$cha3 = _talkingCharacter$cha2.animations) === null || _talkingCharacter$cha3 === void 0 ? void 0 : (_talkingCharacter$cha4 = _talkingCharacter$cha3.talking) === null || _talkingCharacter$cha4 === void 0 ? void 0 : _talkingCharacter$cha4.url, true); // Reset currentEmotion to defaultAnim
|
|
261
268
|
|
|
262
269
|
var resetAnims = (0, _react.useCallback)(function () {
|
|
263
270
|
scene.traverseVisible(function (node) {
|
|
@@ -269,6 +276,38 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
269
276
|
messagePosition.current.parent = null;
|
|
270
277
|
if (zoomInActor) setAnimationRunning(true);
|
|
271
278
|
}, [zoomInActor]);
|
|
279
|
+
|
|
280
|
+
var restTalkingAnimation = function restTalkingAnimation() {
|
|
281
|
+
var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
|
|
282
|
+
if (!element) return;
|
|
283
|
+
var _element$userData = element.userData,
|
|
284
|
+
mixer = _element$userData.mixer,
|
|
285
|
+
defaultAnim = _element$userData.defaultAnim,
|
|
286
|
+
emotionClip = _element$userData.emotionClip;
|
|
287
|
+
|
|
288
|
+
if (defaultAnim && emotionClip) {
|
|
289
|
+
var emotionAction = mixer.clipAction(emotionClip, element);
|
|
290
|
+
var defaultAction = mixer.clipAction(defaultAnim, element);
|
|
291
|
+
mixer.stopAllAction();
|
|
292
|
+
(0, _helpers.executeCrossFade)(emotionAction, defaultAction, crossFadeDuration);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
startTalking(false);
|
|
296
|
+
};
|
|
297
|
+
|
|
298
|
+
(0, _react.useEffect)(function () {
|
|
299
|
+
var element = getCurrentVisible(talkingCharacter === null || talkingCharacter === void 0 ? void 0 : talkingCharacter.uid);
|
|
300
|
+
|
|
301
|
+
if (element) {
|
|
302
|
+
if (talking) {
|
|
303
|
+
var _talkingCharacter$cha, _talkingCharacter$cha2, _talkingCharacter$cha3, _talkingCharacter$cha4;
|
|
304
|
+
|
|
305
|
+
(0, _helpers.executeTalkingAnimation)(element, talkingCharacter === null || talkingCharacter === void 0 ? void 0 : (_talkingCharacter$cha = talkingCharacter.character) === null || _talkingCharacter$cha === void 0 ? void 0 : (_talkingCharacter$cha2 = _talkingCharacter$cha.resource) === null || _talkingCharacter$cha2 === void 0 ? void 0 : (_talkingCharacter$cha3 = _talkingCharacter$cha2.animations) === null || _talkingCharacter$cha3 === void 0 ? void 0 : (_talkingCharacter$cha4 = _talkingCharacter$cha3.talking) === null || _talkingCharacter$cha4 === void 0 ? void 0 : _talkingCharacter$cha4.url);
|
|
306
|
+
} else {
|
|
307
|
+
restTalkingAnimation();
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}, [talkingCharacter, talking]);
|
|
272
311
|
var finishConversation = (0, _react.useCallback)(function () {
|
|
273
312
|
lastSet.current = true;
|
|
274
313
|
changeLine(0);
|
|
@@ -332,7 +371,7 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
332
371
|
}
|
|
333
372
|
}, [currentLine === null || currentLine === void 0 ? void 0 : currentLine.id, edges, finishConversation, lines]);
|
|
334
373
|
var backLine = (0, _react.useCallback)(function () {
|
|
335
|
-
|
|
374
|
+
restTalkingAnimation();
|
|
336
375
|
setAudioFailed(false);
|
|
337
376
|
|
|
338
377
|
if (isBranched) {
|
|
@@ -345,7 +384,7 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
345
384
|
}
|
|
346
385
|
}, [handleBranchDirection, isBranched, lastLine, line]);
|
|
347
386
|
var nextLine = (0, _react.useCallback)(function (choice, reset) {
|
|
348
|
-
|
|
387
|
+
restTalkingAnimation();
|
|
349
388
|
setPreviousLineWasDecision(currentLine.decision);
|
|
350
389
|
setAudioFailed(false);
|
|
351
390
|
|
|
@@ -492,6 +531,10 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
492
531
|
element.userData.defaultAnim = action.getClip();
|
|
493
532
|
}
|
|
494
533
|
|
|
534
|
+
if ((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType) === 'none' && talkingCharacter.emotion !== 'thinkful') {
|
|
535
|
+
startTalking(true);
|
|
536
|
+
}
|
|
537
|
+
|
|
495
538
|
if (talkingCharacter.uid === element.uid) {
|
|
496
539
|
var showArrowTop = talkingCharacter.text.length > maxCharacterToSwitch;
|
|
497
540
|
moveBubble(element, showArrowTop);
|
|
@@ -541,10 +584,7 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
541
584
|
});
|
|
542
585
|
}
|
|
543
586
|
}
|
|
544
|
-
}, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]);
|
|
545
|
-
var autoPlayCond = automatic && !(currentLine !== null && currentLine !== void 0 && currentLine.decision);
|
|
546
|
-
var audio = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.audio) || {}).length;
|
|
547
|
-
var voice = Object.keys((currentLine === null || currentLine === void 0 ? void 0 : currentLine.voice) || {}).length; // Sound logic
|
|
587
|
+
}, [actors, camera, currentLine, zoomInActor, getCurrentVisible, translate, getAvatarURL, loadEmotion, resetCameraView, isDecision, isVoiceOver, charactersInvolved]); // Sound logic
|
|
548
588
|
|
|
549
589
|
var stopEkho = (0, _useEkho.default)({
|
|
550
590
|
audioType: currentLine === null || currentLine === void 0 ? void 0 : currentLine.audioType,
|
|
@@ -557,13 +597,13 @@ var DialogComponent = function DialogComponent(_ref) {
|
|
|
557
597
|
emitEvent: emitEvent,
|
|
558
598
|
onStart: function onStart() {
|
|
559
599
|
if (talkingCharacter.emotion.includes('think')) return;
|
|
560
|
-
|
|
600
|
+
startTalking(true);
|
|
561
601
|
},
|
|
562
602
|
onError: function onError() {
|
|
563
603
|
setAudioFailed(true);
|
|
564
604
|
},
|
|
565
605
|
onFinish: function onFinish() {
|
|
566
|
-
|
|
606
|
+
startTalking(false);
|
|
567
607
|
|
|
568
608
|
if (autoPlayCond) {
|
|
569
609
|
nextLine();
|
package/dist/helpers/index.js
CHANGED
|
@@ -3,18 +3,35 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.zAxis = exports.yAxis = exports.xAxis = exports.vectorTranslateZ = exports.vectorTranslateY = exports.vectorTranslateX = exports.vectorTranslateOnAxis = exports.vectorToScreen = exports.usePrevious = exports.screenToVector = exports.roundFloat = exports.getRandomIndex = exports.getObjectPosition = exports.formatMessage = exports.executeCrossFade = exports.cameraFitAnyObject = void 0;
|
|
6
|
+
exports.zAxis = exports.yAxis = exports.xAxis = exports.vectorTranslateZ = exports.vectorTranslateY = exports.vectorTranslateX = exports.vectorTranslateOnAxis = exports.vectorToScreen = exports.usePrevious = exports.screenToVector = exports.roundFloat = exports.getRandomIndex = exports.getObjectPosition = exports.formatMessage = exports.executeTalkingAnimation = exports.executeCrossFade = exports.cameraFitAnyObject = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
10
|
var _three = require("three");
|
|
11
11
|
|
|
12
|
+
var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
|
|
13
|
+
|
|
14
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
15
|
+
|
|
16
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
17
|
+
|
|
18
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
19
|
+
|
|
20
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
21
|
+
|
|
22
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
23
|
+
|
|
24
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
25
|
+
|
|
12
26
|
var xAxis = new _three.Vector3(1, 0, 0);
|
|
13
27
|
exports.xAxis = xAxis;
|
|
14
28
|
var yAxis = new _three.Vector3(0, 1, 0);
|
|
15
29
|
exports.yAxis = yAxis;
|
|
16
30
|
var zAxis = new _three.Vector3(0, 0, 1);
|
|
17
31
|
exports.zAxis = zAxis;
|
|
32
|
+
var crossFadeDuration = 0.2;
|
|
33
|
+
var bones = ['Jaw_M', 'Head_M', 'L_lip_jnt', 'R_lip_jnt', 'joint4', 'transform1', 'lowerTeeths', 'upperTeeths'];
|
|
34
|
+
var loader = new _GLTFLoader.GLTFLoader();
|
|
18
35
|
|
|
19
36
|
var formatMessage = function formatMessage(text) {
|
|
20
37
|
var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
@@ -162,7 +179,7 @@ var setWeight = function setWeight(action, weight) {
|
|
|
162
179
|
action.setEffectiveWeight(weight);
|
|
163
180
|
};
|
|
164
181
|
|
|
165
|
-
var executeCrossFade = function executeCrossFade(startAction, endAction
|
|
182
|
+
var executeCrossFade = function executeCrossFade(startAction, endAction) {
|
|
166
183
|
if (startAction === endAction) return;
|
|
167
184
|
if (!startAction || !endAction) return;
|
|
168
185
|
startAction.play();
|
|
@@ -170,8 +187,51 @@ var executeCrossFade = function executeCrossFade(startAction, endAction, duratio
|
|
|
170
187
|
endAction.reset();
|
|
171
188
|
endAction.time = 0;
|
|
172
189
|
setWeight(endAction, 1);
|
|
173
|
-
endAction.crossFadeFrom(startAction,
|
|
190
|
+
endAction.crossFadeFrom(startAction, crossFadeDuration, true);
|
|
174
191
|
endAction.play();
|
|
175
192
|
};
|
|
176
193
|
|
|
177
|
-
exports.executeCrossFade = executeCrossFade;
|
|
194
|
+
exports.executeCrossFade = executeCrossFade;
|
|
195
|
+
|
|
196
|
+
var executeTalkingAnimation = function executeTalkingAnimation(target, talkingURL) {
|
|
197
|
+
if (target) {
|
|
198
|
+
var tracks = [];
|
|
199
|
+
var _target$userData = target.userData,
|
|
200
|
+
mixer = _target$userData.mixer,
|
|
201
|
+
defaultAnim = _target$userData.defaultAnim;
|
|
202
|
+
var cloned = defaultAnim.clone();
|
|
203
|
+
|
|
204
|
+
var onLoad = function onLoad(anim) {
|
|
205
|
+
var _cloned$tracks;
|
|
206
|
+
|
|
207
|
+
if (anim) {
|
|
208
|
+
tracks.push.apply(tracks, _toConsumableArray(anim.animations[0].tracks.filter(function (track) {
|
|
209
|
+
return bones.find(function (bone) {
|
|
210
|
+
return track.name.includes(bone);
|
|
211
|
+
});
|
|
212
|
+
})));
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
cloned.tracks = cloned.tracks.filter(function (track) {
|
|
216
|
+
return !bones.find(function (bone) {
|
|
217
|
+
return track.name.includes(bone);
|
|
218
|
+
});
|
|
219
|
+
});
|
|
220
|
+
|
|
221
|
+
(_cloned$tracks = cloned.tracks).push.apply(_cloned$tracks, tracks);
|
|
222
|
+
|
|
223
|
+
target.userData.emotionClip = cloned;
|
|
224
|
+
var defaultAction = mixer.clipAction(defaultAnim, target);
|
|
225
|
+
var emotionAction = mixer.clipAction(cloned, target);
|
|
226
|
+
emotionAction.loop = _three.LoopPingPong;
|
|
227
|
+
mixer.stopAllAction();
|
|
228
|
+
executeCrossFade(defaultAction, emotionAction, crossFadeDuration);
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
loader.load(talkingURL, function (anim) {
|
|
232
|
+
onLoad(anim);
|
|
233
|
+
});
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
|
|
237
|
+
exports.executeTalkingAnimation = executeTalkingAnimation;
|
package/dist/helpers/useEkho.js
CHANGED
|
@@ -99,11 +99,7 @@ var useEkho = function useEkho(_ref) {
|
|
|
99
99
|
url: url,
|
|
100
100
|
cc: cc
|
|
101
101
|
};
|
|
102
|
-
onStart
|
|
103
|
-
url: url,
|
|
104
|
-
cc: cc
|
|
105
|
-
});
|
|
106
|
-
playSound(url, cc, loop, volume, onFinish);
|
|
102
|
+
playSound(url, cc, loop, volume, onFinish, onStart);
|
|
107
103
|
}, [onStart, playSound, loop, onFinish, volume]);
|
|
108
104
|
var playSpeech = (0, _react.useCallback)( /*#__PURE__*/function () {
|
|
109
105
|
var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(payload) {
|
package/package.json
CHANGED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
|
|
10
|
-
var _three = require("three");
|
|
11
|
-
|
|
12
|
-
var _GLTFLoader = require("three/examples/jsm/loaders/GLTFLoader");
|
|
13
|
-
|
|
14
|
-
var _ = require(".");
|
|
15
|
-
|
|
16
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
17
|
-
|
|
18
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
-
|
|
20
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
21
|
-
|
|
22
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
23
|
-
|
|
24
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
25
|
-
|
|
26
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
27
|
-
|
|
28
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
29
|
-
|
|
30
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
31
|
-
|
|
32
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
33
|
-
|
|
34
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
35
|
-
|
|
36
|
-
var crossFadeDuration = 0.2;
|
|
37
|
-
var bones = ['Jaw_M', 'Head_M', 'L_lip_jnt', 'R_lip_jnt', 'joint4', 'transform1', 'lowerTeeths', 'upperTeeths'];
|
|
38
|
-
|
|
39
|
-
var useMouthMixer = function useMouthMixer(target, talkingURL) {
|
|
40
|
-
var isActive = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
41
|
-
|
|
42
|
-
var _useState = (0, _react.useState)(false),
|
|
43
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
44
|
-
started = _useState2[0],
|
|
45
|
-
start = _useState2[1];
|
|
46
|
-
|
|
47
|
-
var loader = (0, _react.useMemo)(function () {
|
|
48
|
-
return new _GLTFLoader.GLTFLoader();
|
|
49
|
-
}, []);
|
|
50
|
-
var tracks = (0, _react.useRef)([]);
|
|
51
|
-
(0, _react.useEffect)(function () {
|
|
52
|
-
if (target && isActive) {
|
|
53
|
-
var _target$userData = target.userData,
|
|
54
|
-
mixer = _target$userData.mixer,
|
|
55
|
-
defaultAnim = _target$userData.defaultAnim,
|
|
56
|
-
emotionClip = _target$userData.emotionClip;
|
|
57
|
-
|
|
58
|
-
if (!started && emotionClip) {
|
|
59
|
-
var emotionAction = mixer.clipAction(emotionClip, target);
|
|
60
|
-
var defaultAction = mixer.clipAction(defaultAnim, target);
|
|
61
|
-
mixer.stopAllAction();
|
|
62
|
-
(0, _.executeCrossFade)(emotionAction, defaultAction, crossFadeDuration);
|
|
63
|
-
} else if (started && talkingURL) {
|
|
64
|
-
var cloned = defaultAnim.clone();
|
|
65
|
-
|
|
66
|
-
var onLoad = function onLoad(anim) {
|
|
67
|
-
var _cloned$tracks;
|
|
68
|
-
|
|
69
|
-
if (anim) {
|
|
70
|
-
var _tracks$current;
|
|
71
|
-
|
|
72
|
-
(_tracks$current = tracks.current).push.apply(_tracks$current, _toConsumableArray(anim.animations[0].tracks.filter(function (track) {
|
|
73
|
-
return bones.find(function (bone) {
|
|
74
|
-
return track.name.includes(bone);
|
|
75
|
-
});
|
|
76
|
-
})));
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
cloned.tracks = defaultAnim.tracks.filter(function (track) {
|
|
80
|
-
return !bones.find(function (bone) {
|
|
81
|
-
return track.name.includes(bone);
|
|
82
|
-
});
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
(_cloned$tracks = cloned.tracks).push.apply(_cloned$tracks, _toConsumableArray(tracks.current));
|
|
86
|
-
|
|
87
|
-
target.userData.emotionClip = cloned;
|
|
88
|
-
var defaultAction = mixer.clipAction(defaultAnim, target);
|
|
89
|
-
var emotionAction = mixer.clipAction(cloned, target);
|
|
90
|
-
emotionAction.loop = _three.LoopPingPong;
|
|
91
|
-
mixer.stopAllAction();
|
|
92
|
-
(0, _.executeCrossFade)(defaultAction, emotionAction, crossFadeDuration);
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
if (!tracks.current.length) {
|
|
96
|
-
loader.load(talkingURL, function (anim) {
|
|
97
|
-
onLoad(anim);
|
|
98
|
-
});
|
|
99
|
-
} else {
|
|
100
|
-
onLoad();
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}, [isActive, talkingURL, loader, started, target]);
|
|
105
|
-
return start;
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
var _default = useMouthMixer;
|
|
109
|
-
exports.default = _default;
|