@gamelearn/arcade-components 0.24.7 → 0.24.8
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.
|
@@ -13,6 +13,8 @@ var _drei = require("@react-three/drei");
|
|
|
13
13
|
|
|
14
14
|
var _useGLB2 = _interopRequireDefault(require("../../../helpers/useGLB"));
|
|
15
15
|
|
|
16
|
+
var _BoundingBox = _interopRequireDefault(require("./BoundingBox"));
|
|
17
|
+
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
19
|
|
|
18
20
|
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
|
@@ -21,44 +23,82 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
|
|
|
21
23
|
|
|
22
24
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
25
|
|
|
26
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
27
|
+
|
|
28
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
29
|
+
|
|
30
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
31
|
+
|
|
24
32
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
25
33
|
|
|
26
34
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
27
35
|
|
|
28
|
-
var AnimateElement = function
|
|
36
|
+
var AnimateElement = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
29
37
|
var model = _ref.model,
|
|
30
38
|
position = _ref.position,
|
|
31
39
|
rotation = _ref.rotation,
|
|
32
40
|
animationUrl = _ref.animationUrl,
|
|
33
|
-
|
|
41
|
+
enableBounding = _ref.enableBounding,
|
|
42
|
+
layers = _ref.layers,
|
|
43
|
+
onClick = _ref.onClick,
|
|
44
|
+
onPointerOver = _ref.onPointerOver,
|
|
45
|
+
onPointerOut = _ref.onPointerOut,
|
|
46
|
+
props = _objectWithoutProperties(_ref, ["model", "position", "rotation", "animationUrl", "enableBounding", "layers", "onClick", "onPointerOver", "onPointerOut"]);
|
|
34
47
|
|
|
35
48
|
var _useGLB = (0, _useGLB2.default)(animationUrl),
|
|
36
49
|
animations = _useGLB.animations;
|
|
37
50
|
|
|
38
51
|
var _useAnimations = (0, _drei.useAnimations)(animations),
|
|
39
|
-
|
|
52
|
+
animationRef = _useAnimations.ref,
|
|
40
53
|
mixer = _useAnimations.mixer;
|
|
41
54
|
|
|
55
|
+
var mouseEvents = {
|
|
56
|
+
onClick: onClick,
|
|
57
|
+
onPointerOver: onPointerOver,
|
|
58
|
+
onPointerOut: onPointerOut
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var currentProps = _objectSpread(_objectSpread({}, enableBounding ? {} : mouseEvents), props);
|
|
62
|
+
|
|
63
|
+
var getRef = function getRef(node) {
|
|
64
|
+
if (ref) {
|
|
65
|
+
if (ref instanceof Function) {
|
|
66
|
+
ref(node);
|
|
67
|
+
} else {
|
|
68
|
+
ref.current = node;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
animationRef.current = node;
|
|
73
|
+
};
|
|
74
|
+
|
|
42
75
|
(0, _react.useEffect)(function () {
|
|
43
|
-
if (
|
|
76
|
+
if (animationRef.current) {
|
|
44
77
|
mixer.stopAllAction();
|
|
45
78
|
var clip = animations[0];
|
|
46
|
-
|
|
47
|
-
|
|
79
|
+
animationRef.current.userData.defaultAnim = clip;
|
|
80
|
+
animationRef.current.userData.mixer = mixer;
|
|
48
81
|
|
|
49
82
|
if (clip) {
|
|
50
|
-
var action = mixer.clipAction(clip,
|
|
83
|
+
var action = mixer.clipAction(clip, animationRef.current);
|
|
51
84
|
action.play();
|
|
52
85
|
}
|
|
53
86
|
}
|
|
54
|
-
}, [mixer,
|
|
55
|
-
return /*#__PURE__*/_react.default.createElement("
|
|
56
|
-
|
|
87
|
+
}, [mixer, animations, animationRef]);
|
|
88
|
+
return /*#__PURE__*/_react.default.createElement("group", {
|
|
89
|
+
visible: props.visible
|
|
90
|
+
}, enableBounding ? /*#__PURE__*/_react.default.createElement(_BoundingBox.default, _extends({
|
|
91
|
+
model: model,
|
|
92
|
+
position: position,
|
|
93
|
+
rotation: rotation,
|
|
94
|
+
layers: layers
|
|
95
|
+
}, mouseEvents)) : null, /*#__PURE__*/_react.default.createElement("primitive", _extends({
|
|
96
|
+
ref: getRef,
|
|
57
97
|
object: model,
|
|
58
98
|
position: position,
|
|
59
99
|
rotation: rotation
|
|
60
|
-
},
|
|
61
|
-
};
|
|
100
|
+
}, currentProps)));
|
|
101
|
+
});
|
|
62
102
|
|
|
63
103
|
var _default = AnimateElement;
|
|
64
104
|
exports.default = _default;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _three = require("three");
|
|
13
|
+
|
|
14
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
|
|
17
|
+
|
|
18
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
19
|
+
|
|
20
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
21
|
+
|
|
22
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
23
|
+
|
|
24
|
+
var BoundingBox = function BoundingBox(_ref) {
|
|
25
|
+
var model = _ref.model,
|
|
26
|
+
rotation = _ref.rotation,
|
|
27
|
+
position = _ref.position,
|
|
28
|
+
visible = _ref.visible,
|
|
29
|
+
props = _objectWithoutProperties(_ref, ["model", "rotation", "position", "visible"]);
|
|
30
|
+
|
|
31
|
+
var bounding = (0, _react.useRef)();
|
|
32
|
+
(0, _react.useEffect)(function () {
|
|
33
|
+
if (model && bounding.current) {
|
|
34
|
+
var box = new _three.Box3().setFromObject(model);
|
|
35
|
+
var size = box.getSize(new _three.Vector3());
|
|
36
|
+
bounding.current.scale.copy(size);
|
|
37
|
+
bounding.current.scale.x /= 2;
|
|
38
|
+
bounding.current.position.y = size.y / 2;
|
|
39
|
+
}
|
|
40
|
+
}, [model, position]);
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement("mesh", _extends({
|
|
42
|
+
ref: bounding,
|
|
43
|
+
position: position,
|
|
44
|
+
rotation: rotation
|
|
45
|
+
}, props), /*#__PURE__*/_react.default.createElement("boxGeometry", {
|
|
46
|
+
args: [1, 1, 1]
|
|
47
|
+
}), /*#__PURE__*/_react.default.createElement("meshBasicMaterial", {
|
|
48
|
+
color: "grey",
|
|
49
|
+
visible: false
|
|
50
|
+
}));
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
BoundingBox.defaultProps = {
|
|
54
|
+
rotation: [0, 0, 0],
|
|
55
|
+
position: [0, 0, 0],
|
|
56
|
+
visible: true
|
|
57
|
+
};
|
|
58
|
+
var _default = BoundingBox;
|
|
59
|
+
exports.default = _default;
|
|
@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _fiber = require("@react-three/fiber");
|
|
13
13
|
|
|
14
|
-
var _drei = require("@react-three/drei");
|
|
15
|
-
|
|
16
14
|
var _AnimateElement = _interopRequireDefault(require("./AnimateElement"));
|
|
17
15
|
|
|
18
16
|
var _SkeletonUtils = require("three/examples/jsm/utils/SkeletonUtils");
|
|
@@ -53,24 +51,20 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
53
51
|
|
|
54
52
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
55
53
|
|
|
56
|
-
var Element = function
|
|
54
|
+
var Element = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
57
55
|
var url = _ref.url,
|
|
58
56
|
animationUrl = _ref.animationUrl,
|
|
59
|
-
|
|
60
|
-
position = _ref$position === void 0 ? [0, 0, 0] : _ref$position,
|
|
57
|
+
position = _ref.position,
|
|
61
58
|
rotation = _ref.rotation,
|
|
62
|
-
|
|
63
|
-
scale = _ref$scale === void 0 ? [1, 1, 1] : _ref$scale,
|
|
59
|
+
scale = _ref.scale,
|
|
64
60
|
size = _ref.size,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
_ref$layers = _ref.layers,
|
|
68
|
-
layers = _ref$layers === void 0 ? 0 : _ref$layers,
|
|
61
|
+
material = _ref.material,
|
|
62
|
+
layers = _ref.layers,
|
|
69
63
|
type = _ref.type,
|
|
70
|
-
|
|
71
|
-
onLoad = _ref$onLoad === void 0 ? function () {} : _ref$onLoad,
|
|
64
|
+
onLoad = _ref.onLoad,
|
|
72
65
|
userData = _ref.userData,
|
|
73
|
-
|
|
66
|
+
enableBounding = _ref.enableBounding,
|
|
67
|
+
props = _objectWithoutProperties(_ref, ["url", "animationUrl", "position", "rotation", "scale", "size", "material", "layers", "type", "onLoad", "userData", "enableBounding"]);
|
|
74
68
|
|
|
75
69
|
var model = (0, _useGLB.default)(url);
|
|
76
70
|
var modelClone = (0, _react.useMemo)(function () {
|
|
@@ -79,6 +73,11 @@ var Element = function Element(_ref) {
|
|
|
79
73
|
var usingScale = size ? Object.values(size) : scale;
|
|
80
74
|
var isCharacter = type === 'character';
|
|
81
75
|
|
|
76
|
+
var _useState = (0, _react.useState)(false),
|
|
77
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
78
|
+
loaded = _useState2[0],
|
|
79
|
+
setLoaded = _useState2[1];
|
|
80
|
+
|
|
82
81
|
if (usingScale.length < 3) {
|
|
83
82
|
usingScale.push(1);
|
|
84
83
|
}
|
|
@@ -93,7 +92,7 @@ var Element = function Element(_ref) {
|
|
|
93
92
|
camera = _useThree2[1];
|
|
94
93
|
|
|
95
94
|
(0, _react.useEffect)(function () {
|
|
96
|
-
if (modelClone) {
|
|
95
|
+
if (modelClone && !loaded) {
|
|
97
96
|
modelClone.traverse(function (node) {
|
|
98
97
|
if (node.isMesh) {
|
|
99
98
|
node.receiveShadow = true;
|
|
@@ -127,28 +126,39 @@ var Element = function Element(_ref) {
|
|
|
127
126
|
}
|
|
128
127
|
});
|
|
129
128
|
onLoad(modelClone, currentScene, camera);
|
|
129
|
+
setLoaded(true);
|
|
130
130
|
}
|
|
131
|
-
}, [modelClone, material, onLoad, currentScene, camera, layers, isCharacter]);
|
|
131
|
+
}, [modelClone, material, loaded, onLoad, currentScene, camera, layers, isCharacter]);
|
|
132
132
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, animationUrl ? /*#__PURE__*/_react.default.createElement(_AnimateElement.default, _extends({
|
|
133
|
+
ref: ref,
|
|
133
134
|
animationUrl: animationUrl,
|
|
134
135
|
model: modelClone,
|
|
135
136
|
position: position,
|
|
136
137
|
rotation: rotation,
|
|
137
138
|
scale: usingScale,
|
|
138
|
-
|
|
139
|
+
enableBounding: enableBounding,
|
|
140
|
+
layers: layers
|
|
139
141
|
}, props)) : /*#__PURE__*/_react.default.createElement("primitive", _extends({
|
|
142
|
+
ref: ref,
|
|
140
143
|
object: modelClone,
|
|
141
144
|
position: position,
|
|
142
145
|
rotation: rotation,
|
|
143
|
-
scale: usingScale
|
|
144
|
-
|
|
145
|
-
}, props)), props.uid && /*#__PURE__*/_react.default.createElement(_Projection.default, {
|
|
146
|
+
scale: usingScale
|
|
147
|
+
}, props)), props.uid ? /*#__PURE__*/_react.default.createElement(_Projection.default, {
|
|
146
148
|
object: modelClone,
|
|
147
149
|
element: _objectSpread(_objectSpread({}, props), {}, {
|
|
148
150
|
type: type
|
|
149
151
|
})
|
|
150
|
-
}));
|
|
151
|
-
};
|
|
152
|
+
}) : null);
|
|
153
|
+
});
|
|
152
154
|
|
|
155
|
+
Element.defaultProps = {
|
|
156
|
+
position: [0, 0, 0],
|
|
157
|
+
scale: [1, 1, 1],
|
|
158
|
+
layers: 0,
|
|
159
|
+
material: {},
|
|
160
|
+
enableBounding: false,
|
|
161
|
+
onLoad: function onLoad() {}
|
|
162
|
+
};
|
|
153
163
|
var _default = Element;
|
|
154
164
|
exports.default = _default;
|