@gamelearn/arcade-components 2.2.3 → 2.2.7

package/dist/components/conversational-pro-component/components/scene/Panel.js

@@ -29,17 +29,38 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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); }
+
+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; }
+
+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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 var isMobile = (0, _deviceDetection.DeviceDetection)();
 var defaultCamPos = [0, 14.63, 16];
 
 function Panel(_ref) {
-  var _character$resource4, _character$resource5;
+  var _character$resource4, _character$resource6, _character$resource6$, _character$resource6$2, _character$resource7;
 
   var character = _ref.character,
+      ttsStarted = _ref.ttsStarted,
       active = _ref.active;
   var cameraRef = (0, _react.useRef)(null);
   var sceneRef = (0, _react.useRef)(null);
   var isCharacter = character.type === 'character';
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      talking = _useState2[0],
+      setTalking = _useState2[1];
+
+  var model = (0, _react.useRef)();
+  var defaultClip = (0, _react.useRef)();
   var emotion = (0, _react.useMemo)(function () {
     if (isCharacter) {
       var _character$resource, _character$resource$a, _character$resource$a2, _character$resource3, _character$resource3$;
@@ -55,26 +76,66 @@ function Panel(_ref) {
 
     return {};
   }, [character.emotion, character === null || character === void 0 ? void 0 : (_character$resource4 = character.resource) === null || _character$resource4 === void 0 ? void 0 : _character$resource4.animations, isCharacter]);
-  var onLoadElement = (0, _react.useCallback)(function (model) {
+  var resetAnimation = (0, _react.useCallback)(function () {
+    var _model$current$userDa = model.current.userData,
+        mixer = _model$current$userDa.mixer,
+        defaultAnim = _model$current$userDa.defaultAnim,
+        emotionClip = _model$current$userDa.emotionClip;
+
+    if (defaultAnim && emotionClip) {
+      var emotionAction = mixer.clipAction(emotionClip, model.current);
+      var defaultAction = mixer.clipAction(defaultAnim, model.current);
+      mixer.stopAllAction();
+      (0, _helpers.executeCrossFade)(emotionAction, defaultAction);
+      setTalking(false);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (model.current) {
+      if (active) {
+        if (ttsStarted) {
+          var _character$resource5, _character$resource5$, _character$resource5$2;
+
+          (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);
+          setTalking(true);
+        } else {
+          resetAnimation();
+        }
+      } else if (talking) {
+        resetAnimation();
+      }
+    }
+  }, [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, resetAnimation, talking]);
+  var onLoadElement = (0, _react.useCallback)(function (object) {
     if (cameraRef.current) {
       var boundingBox = new _three.Box3();
-      boundingBox.setFromObject(model);
+      boundingBox.setFromObject(object);
       var size = boundingBox.getSize(new _three.Vector3());
       cameraRef.current.position.fromArray(defaultCamPos);
       cameraRef.current.rotation.set(0, 0, 0);
       cameraRef.current.updateProjectionMatrix();
 
       if (character.type === 'character') {
-        cameraRef.current.position.setY(size.y - 1.5 * 1.3);
+        var defaultAnim = object.userData.defaultAnim;
+        model.current = object;
+        defaultClip.current = defaultAnim.clone();
+        cameraRef.current.position.setY(size.y - 1.5 * 1.3); // Retro compatible with resources without eye bone
+
+        object.traverse(function (obj) {
+          if (obj.type === 'Bone' && (obj.name.toLowerCase() === 'l_eye' || obj.name.toLowerCase() === 'eye_l')) {
+            var leftEyeVector = new _three.Vector3().setFromMatrixPosition(obj.matrixWorld);
+            cameraRef.current.position.setY(leftEyeVector.y - 0.5);
+          }
+        });
         cameraRef.current.zoom = 1.85;
       } else if (character.type === 'object') {
-        (0, _helpers.cameraFitAnyObject)(model, cameraRef.current);
+        (0, _helpers.cameraFitAnyObject)(object, cameraRef.current);
         cameraRef.current.zoom = 1;
       }
 
       cameraRef.current.updateProjectionMatrix();
     }
-  }, [character]);
+  }, [character.type]);
   (0, _fiber.useFrame)(function (_ref2) {
     var gl = _ref2.gl;
 
@@ -104,9 +165,8 @@ function Panel(_ref) {
   }, 100);
   return character.type === 'image' ? null : /*#__PURE__*/_react.default.createElement("scene", {
     ref: sceneRef
-  }, (_character$resource5 = character.resource) !== null && _character$resource5 !== void 0 && _character$resource5.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
-    progressive: true,
-    individualProgress: true
+  }, (_character$resource7 = character.resource) !== null && _character$resource7 !== void 0 && _character$resource7.url ? /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.LodWrapper, {
+    progressive: true
   }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.TriggerWrapper, {
     name: "char_".concat(character.uid),
     url: character.resource.url,
@@ -119,7 +179,9 @@ function Panel(_ref) {
     fov: 35,
     focus: 10,
     ref: cameraRef,
-    position: defaultCamPos
+    position: defaultCamPos,
+    makeDefault: true,
+    defaultCamera: true
   }), /*#__PURE__*/_react.default.createElement(_LightSet.default, null));
 }
 

package/dist/components/conversational-pro-component/components/scene/Panels.js

@@ -20,6 +20,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Panels = function Panels(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
+      ttsStarted = _ref.ttsStarted,
       activeIndex = _ref.activeIndex,
       flex = _ref.flex,
       lodSettings = _ref.lodSettings;
@@ -37,7 +38,8 @@ var Panels = function Panels(_ref) {
         key: "".concat("".concat(currentCharacter.uid, "_").concat(slotPosition), "_", characterPos),
         character: currentCharacter,
         active: activeIndex === currentPosition,
-        lodSettings: lodSettings
+        lodSettings: lodSettings,
+        ttsStarted: ttsStarted
       });
     }
 

package/dist/components/conversational-pro-component/components/scene/index.js

@@ -36,6 +36,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PanelsWrapper = function PanelsWrapper(_ref) {
   var characters = _ref.characters,
       slots = _ref.slots,
+      ttsStarted = _ref.ttsStarted,
       slotRefs = _ref.slotRefs,
       flex = _ref.flex,
       currentMessage = _ref.currentMessage;
@@ -56,6 +57,7 @@ var PanelsWrapper = function PanelsWrapper(_ref) {
     finishBuild(true);
   }, []);
   return built ? /*#__PURE__*/_react.default.createElement(_Panels.default, {
+    ttsStarted: ttsStarted,
     characters: characters,
     slots: slots,
     slotRefs: slotRefs,
@@ -77,8 +79,13 @@ var Scene = function Scene(props) {
       var gl = _ref3.gl;
       gl.setClearColor('white', 0);
       gl.physicallyCorrectLights = true;
+    },
+    frameloop: "demand"
+  }, /*#__PURE__*/_react.default.createElement(_arcadeThreeCore.SettingsController, {
+    current: {
+      animate: props.pause
     }
-  }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+  }), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(PanelsWrapper, props)));
 };