@realsee/vreo 2.3.7 → 2.3.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.
- package/lib/PlayController/createHTMLAudioElement.js +7 -13
- package/lib/PlayController/index.js +27 -95
- package/lib/Player/App.js +2 -28
- package/lib/Player/Controller.js +48 -132
- package/lib/Player/custom/SpatialScenePanel/index.js +45 -76
- package/lib/Player/hooks.js +1 -11
- package/lib/Player/index.js +34 -101
- package/lib/Player/modules/Drawer/index.js +2 -19
- package/lib/Player/modules/PopUp/index.js +2 -12
- package/lib/Player/modules/ResizeObserver/index.js +1 -9
- package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +29 -123
- package/lib/Player/modules/VideoAgent/VideoAgentScene.js +15 -37
- package/lib/Player/modules/VideoAgent/index.js +2 -19
- package/lib/Player/modules/Wave/index.js +14 -43
- package/lib/Player/modules/keyframes/BgMusic/index.js +10 -28
- package/lib/Player/modules/keyframes/CameraMovement/index.js +6 -30
- package/lib/Player/modules/keyframes/InfoPanel/index.js +9 -39
- package/lib/Player/modules/keyframes/ModelVideo/index.js +6 -32
- package/lib/Player/modules/keyframes/PanoEffect/index.js +19 -52
- package/lib/Player/modules/keyframes/PanoEffect/lineAnime.js +1 -8
- package/lib/Player/modules/keyframes/PanoTag/index.js +5 -23
- package/lib/Player/modules/keyframes/PanoTextLabel/index.js +27 -57
- package/lib/Player/modules/keyframes/Prompter/index.js +15 -42
- package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js +19 -26
- package/lib/Player/modules/keyframes/VideoEffect/index.js +18 -59
- package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js +0 -2
- package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js +0 -1
- package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js +0 -1
- package/lib/fivePlugins/CSS3DRenderPlugin/index.js +21 -62
- package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js +2 -5
- package/lib/fivePlugins/CameraMovementPlugin/index.js +20 -74
- package/lib/fivePlugins/CameraMovementPlugin/typings.js +0 -4
- package/lib/fivePlugins/ModelTVVideoPlugin/index.js +15 -69
- package/lib/index.js +0 -1
- package/lib/react/index.js +10 -41
- package/lib/shared-utils/Audio.js +35 -96
- package/lib/shared-utils/AudioLike.js +20 -56
- package/lib/shared-utils/Preloader.js +0 -7
- package/lib/shared-utils/addResizeListener.js +0 -5
- package/lib/shared-utils/animationFrame/BetterTween.js +19 -58
- package/lib/shared-utils/animationFrame/index.js +2 -10
- package/lib/shared-utils/animationFrame/tween.js +2 -11
- package/lib/shared-utils/createTransMatrix.js +5 -26
- package/lib/shared-utils/getFileExpandedName.js +0 -1
- package/lib/shared-utils/getMediaInfo.js +1 -10
- package/lib/shared-utils/setElementDataset.js +0 -2
- package/lib/typings/VreoUnit.js +0 -15
- package/package.json +2 -1
|
@@ -1,32 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.ModelVideo = ModelVideo;
|
|
9
|
-
|
|
9
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
10
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
11
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
12
|
var THREE = _interopRequireWildcard(require("three"));
|
|
13
|
-
|
|
14
13
|
var _hooks = require("../../../hooks");
|
|
15
|
-
|
|
16
14
|
var _ModelTVVideoPlugin = require("../../../../fivePlugins/ModelTVVideoPlugin");
|
|
17
|
-
|
|
18
15
|
var _createTransMatrix = require("../../../../shared-utils/createTransMatrix");
|
|
19
|
-
|
|
20
16
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
21
|
-
|
|
22
17
|
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); }
|
|
23
|
-
|
|
24
18
|
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; }
|
|
25
|
-
|
|
26
|
-
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
27
|
-
|
|
28
|
-
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
29
|
-
|
|
30
19
|
function ModelVideo() {
|
|
31
20
|
var controller = (0, _hooks.useController)();
|
|
32
21
|
var five = (0, _hooks.useFiveInstance)();
|
|
@@ -34,38 +23,31 @@ function ModelVideo() {
|
|
|
34
23
|
var timeoutRef = React.useRef();
|
|
35
24
|
React.useEffect(function () {
|
|
36
25
|
var callback = /*#__PURE__*/function () {
|
|
37
|
-
var _ref =
|
|
26
|
+
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe) {
|
|
38
27
|
var _controller$configs, _controller$configs$v;
|
|
39
|
-
|
|
40
28
|
var start, end, _ref2, videoSrc, videoPosterSrc, vertexs, matrixWorld, position, points;
|
|
41
|
-
|
|
42
|
-
return regeneratorRuntime.wrap(function _callee$(_context) {
|
|
29
|
+
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
43
30
|
while (1) {
|
|
44
31
|
switch (_context.prev = _context.next) {
|
|
45
32
|
case 0:
|
|
46
33
|
if (!ref.current) {
|
|
47
34
|
ref.current = (0, _ModelTVVideoPlugin.ModelTVVideoPlugin)(five, {});
|
|
48
35
|
}
|
|
49
|
-
|
|
50
36
|
start = keyframe.start, end = keyframe.end;
|
|
51
37
|
_ref2 = keyframe.data, videoSrc = _ref2.videoSrc, videoPosterSrc = _ref2.videoPosterSrc, vertexs = _ref2.vertexs, matrixWorld = _ref2.matrixWorld;
|
|
52
|
-
|
|
53
38
|
position = function () {
|
|
54
39
|
if (vertexs.length < 4) {
|
|
55
40
|
throw new Error('ModelVideo: 顶点数据集合不够,无法组成矩形 ....');
|
|
56
41
|
}
|
|
57
|
-
|
|
58
42
|
if (vertexs.length === 4) {
|
|
59
43
|
return vertexs;
|
|
60
44
|
}
|
|
61
|
-
|
|
62
45
|
var box = new THREE.Box3();
|
|
63
46
|
vertexs.forEach(function (v) {
|
|
64
47
|
return box.expandByPoint(new THREE.Vector3(v.x, v.y, v.z));
|
|
65
48
|
});
|
|
66
49
|
return [new THREE.Vector3(box.min.x, box.max.y, box.max.z), new THREE.Vector3(box.min.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.min.y, box.max.z), new THREE.Vector3(box.max.x, box.max.y, box.max.z)];
|
|
67
50
|
}();
|
|
68
|
-
|
|
69
51
|
points = function () {
|
|
70
52
|
if (matrixWorld) {
|
|
71
53
|
var transMatrix = (0, _createTransMatrix.createTransMatrix)(matrixWorld);
|
|
@@ -78,10 +60,8 @@ function ModelVideo() {
|
|
|
78
60
|
};
|
|
79
61
|
})];
|
|
80
62
|
}
|
|
81
|
-
|
|
82
63
|
return [position];
|
|
83
64
|
}();
|
|
84
|
-
|
|
85
65
|
ref.current.disable();
|
|
86
66
|
_context.next = 8;
|
|
87
67
|
return ref.current.load({
|
|
@@ -89,15 +69,12 @@ function ModelVideo() {
|
|
|
89
69
|
video_poster_src: videoPosterSrc,
|
|
90
70
|
points: points
|
|
91
71
|
}, (_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : (_controller$configs$v = _controller$configs.videos) === null || _controller$configs$v === void 0 ? void 0 : _controller$configs$v.modelTVVideo);
|
|
92
|
-
|
|
93
72
|
case 8:
|
|
94
73
|
ref.current.enable();
|
|
95
74
|
timeoutRef.current = setTimeout(function () {
|
|
96
75
|
var _ref$current;
|
|
97
|
-
|
|
98
76
|
return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.disable();
|
|
99
77
|
}, end - start);
|
|
100
|
-
|
|
101
78
|
case 10:
|
|
102
79
|
case "end":
|
|
103
80
|
return _context.stop();
|
|
@@ -105,16 +82,13 @@ function ModelVideo() {
|
|
|
105
82
|
}
|
|
106
83
|
}, _callee);
|
|
107
84
|
}));
|
|
108
|
-
|
|
109
85
|
return function callback(_x) {
|
|
110
86
|
return _ref.apply(this, arguments);
|
|
111
87
|
};
|
|
112
88
|
}();
|
|
113
|
-
|
|
114
89
|
controller.on(_VreoUnit.VreoKeyframeEnum.ModelVideo, callback);
|
|
115
90
|
return function () {
|
|
116
91
|
controller.off(_VreoUnit.VreoKeyframeEnum.ModelVideo, callback);
|
|
117
|
-
|
|
118
92
|
if (timeoutRef.current) {
|
|
119
93
|
clearTimeout(timeoutRef.current);
|
|
120
94
|
}
|
|
@@ -1,77 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.PanoEffect = PanoEffect;
|
|
9
|
-
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
11
|
var _three = require("three");
|
|
13
|
-
|
|
14
12
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
-
|
|
16
13
|
var _lineAnime = _interopRequireDefault(require("./lineAnime"));
|
|
17
|
-
|
|
18
14
|
var _hooks = require("../../../hooks");
|
|
19
|
-
|
|
20
15
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
21
|
-
|
|
22
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
16
|
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); }
|
|
25
|
-
|
|
26
17
|
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; }
|
|
27
|
-
|
|
28
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
29
|
-
|
|
30
|
-
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."); }
|
|
31
|
-
|
|
32
|
-
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); }
|
|
33
|
-
|
|
34
|
-
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; }
|
|
35
|
-
|
|
36
|
-
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; }
|
|
37
|
-
|
|
38
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
39
|
-
|
|
40
18
|
function PanoEffect() {
|
|
41
19
|
var _React$useState = React.useState(null),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
20
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
21
|
+
state = _React$useState2[0],
|
|
22
|
+
setState = _React$useState2[1];
|
|
46
23
|
var five = (0, _hooks.useFiveInstance)();
|
|
47
24
|
var lineRef = React.useRef(null);
|
|
48
|
-
|
|
49
25
|
var _React$useState3 = React.useState(null),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
26
|
+
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
|
|
27
|
+
pos = _React$useState4[0],
|
|
28
|
+
setPos = _React$useState4[1];
|
|
54
29
|
var timeoutRef = React.useRef();
|
|
55
30
|
var controller = (0, _hooks.useController)();
|
|
56
31
|
var project2d = (0, _hooks.useFiveProject2d)();
|
|
57
|
-
|
|
58
32
|
var delLine = function delLine() {
|
|
59
33
|
if (lineRef.current) {
|
|
60
34
|
lineRef.current.dispose();
|
|
61
35
|
}
|
|
62
36
|
};
|
|
63
|
-
|
|
64
37
|
React.useEffect(function () {
|
|
65
38
|
var callback = function callback(keyframe) {
|
|
66
39
|
var start = keyframe.start,
|
|
67
|
-
|
|
68
|
-
|
|
40
|
+
end = keyframe.end,
|
|
41
|
+
data = keyframe.data;
|
|
69
42
|
var videoEffectData = data;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
v2 = _videoEffectData$twoV[1];
|
|
74
|
-
|
|
43
|
+
var _videoEffectData$twoV = (0, _slicedToArray2["default"])(videoEffectData.twoVertexs, 2),
|
|
44
|
+
v1 = _videoEffectData$twoV[0],
|
|
45
|
+
v2 = _videoEffectData$twoV[1];
|
|
75
46
|
var p1 = new _three.Vector3(v1.x, v1.y, v1.z);
|
|
76
47
|
var p2 = new _three.Vector3(v2.x, v2.y, v2.z);
|
|
77
48
|
lineRef.current = (0, _lineAnime["default"])(five, p1.clone(), p2.clone());
|
|
@@ -81,7 +52,7 @@ function PanoEffect() {
|
|
|
81
52
|
var p = project2d(center);
|
|
82
53
|
if (!p) return;
|
|
83
54
|
var left = p.x,
|
|
84
|
-
|
|
55
|
+
top = p.y;
|
|
85
56
|
setState({
|
|
86
57
|
center: center,
|
|
87
58
|
distance: distance
|
|
@@ -96,15 +67,12 @@ function PanoEffect() {
|
|
|
96
67
|
delLine();
|
|
97
68
|
}, end - start);
|
|
98
69
|
};
|
|
99
|
-
|
|
100
70
|
controller.on(_VreoUnit.VreoKeyframeEnum.PanoEffect, callback);
|
|
101
71
|
return function () {
|
|
102
72
|
controller.off(_VreoUnit.VreoKeyframeEnum.PanoEffect, callback);
|
|
103
|
-
|
|
104
73
|
if (timeoutRef.current) {
|
|
105
74
|
clearTimeout(timeoutRef.current);
|
|
106
75
|
}
|
|
107
|
-
|
|
108
76
|
delLine();
|
|
109
77
|
};
|
|
110
78
|
}, [controller]);
|
|
@@ -112,19 +80,18 @@ function PanoEffect() {
|
|
|
112
80
|
var callback = function callback() {
|
|
113
81
|
if (!(state !== null && state !== void 0 && state.center)) return;
|
|
114
82
|
var _state$center = state.center,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
83
|
+
x = _state$center.x,
|
|
84
|
+
y = _state$center.y,
|
|
85
|
+
z = _state$center.z;
|
|
118
86
|
var res = project2d(new _three.Vector3(x, y, z));
|
|
119
87
|
if (!res) return;
|
|
120
88
|
var left = res.x,
|
|
121
|
-
|
|
89
|
+
top = res.y;
|
|
122
90
|
setPos({
|
|
123
91
|
left: left,
|
|
124
92
|
top: top
|
|
125
93
|
});
|
|
126
94
|
};
|
|
127
|
-
|
|
128
95
|
five.on('currentStateChange', callback);
|
|
129
96
|
return function () {
|
|
130
97
|
five.off('currentStateChange', callback);
|
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports["default"] = lineAnime;
|
|
9
|
-
|
|
10
8
|
var THREE = _interopRequireWildcard(require("three"));
|
|
11
|
-
|
|
12
9
|
var _line = require("@realsee/five/line");
|
|
13
|
-
|
|
14
10
|
var _BetterTween = require("../../../../shared-utils/animationFrame/BetterTween");
|
|
15
|
-
|
|
16
11
|
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); }
|
|
17
|
-
|
|
18
12
|
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; }
|
|
19
|
-
|
|
20
13
|
function lineAnime(five, startPoint, endPoint) {
|
|
21
14
|
var pointImage = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg==';
|
|
22
15
|
var pointTexture = new THREE.TextureLoader().load(pointImage);
|
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.PanoTag = PanoTag;
|
|
9
|
-
|
|
10
8
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
9
|
var _hooks = require("../../../hooks");
|
|
13
|
-
|
|
14
10
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
15
|
-
|
|
16
11
|
var _dnalogel = require("@realsee/dnalogel");
|
|
17
|
-
|
|
18
12
|
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); }
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
function PanoTag() {
|
|
23
15
|
var timeoutRef = React.useRef();
|
|
24
16
|
var controller = (0, _hooks.useController)();
|
|
@@ -40,22 +32,19 @@ function PanoTag() {
|
|
|
40
32
|
}));
|
|
41
33
|
React.useEffect(function () {
|
|
42
34
|
var _controller$configs;
|
|
43
|
-
|
|
44
35
|
if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.PanoTag) === false) {
|
|
45
36
|
return;
|
|
46
37
|
}
|
|
47
|
-
|
|
48
38
|
var callback = function callback(keyframe) {
|
|
49
39
|
if (!panoTagPlugin.current) return;
|
|
50
40
|
var start = keyframe.start,
|
|
51
|
-
|
|
52
|
-
|
|
41
|
+
end = keyframe.end,
|
|
42
|
+
data = keyframe.data;
|
|
53
43
|
var panoTagData = data;
|
|
54
44
|
var id = Date.now().toString();
|
|
55
45
|
var pointType = 'PointTag';
|
|
56
46
|
var dimensionType = '2D';
|
|
57
47
|
var position = [panoTagData.vertex.x, panoTagData.vertex.y, panoTagData.vertex.z];
|
|
58
|
-
|
|
59
48
|
var tag = function () {
|
|
60
49
|
if (panoTagData.imgUrl) {
|
|
61
50
|
return {
|
|
@@ -86,31 +75,26 @@ function PanoTag() {
|
|
|
86
75
|
}
|
|
87
76
|
};
|
|
88
77
|
}
|
|
89
|
-
}();
|
|
90
|
-
|
|
78
|
+
}();
|
|
91
79
|
|
|
80
|
+
// show
|
|
92
81
|
panoTagPlugin.current.load({
|
|
93
82
|
tagList: [tag]
|
|
94
83
|
});
|
|
95
84
|
var tagInstance = panoTagPlugin.current.getTagById(id);
|
|
96
|
-
|
|
97
85
|
if (tagInstance) {
|
|
98
86
|
tagInstance.state.unfolded = true;
|
|
99
87
|
panoTagPlugin.current.updateRenderAllTags();
|
|
100
88
|
}
|
|
101
|
-
|
|
102
89
|
timeoutRef.current = setTimeout(function () {
|
|
103
90
|
var _tag$hooks;
|
|
104
|
-
|
|
105
91
|
// clear
|
|
106
92
|
var tag = panoTagPlugin.current.getTagById(id);
|
|
107
93
|
if (!tag) return;
|
|
108
|
-
|
|
109
94
|
if (tag.state) {
|
|
110
95
|
tag.state.unfolded = false;
|
|
111
96
|
panoTagPlugin.current.updateRenderAllTags();
|
|
112
97
|
}
|
|
113
|
-
|
|
114
98
|
(_tag$hooks = tag.hooks) === null || _tag$hooks === void 0 ? void 0 : _tag$hooks.on('folded', function () {
|
|
115
99
|
setTimeout(function () {
|
|
116
100
|
if (tag.state) {
|
|
@@ -121,11 +105,9 @@ function PanoTag() {
|
|
|
121
105
|
});
|
|
122
106
|
}, end - start);
|
|
123
107
|
};
|
|
124
|
-
|
|
125
108
|
controller.on(_VreoUnit.VreoKeyframeEnum.PanoTag, callback);
|
|
126
109
|
return function () {
|
|
127
110
|
controller.off(_VreoUnit.VreoKeyframeEnum.PanoTag, callback);
|
|
128
|
-
|
|
129
111
|
if (timeoutRef.current) {
|
|
130
112
|
clearTimeout(timeoutRef.current);
|
|
131
113
|
}
|
|
@@ -1,42 +1,20 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.PanoTextLabel = PanoTextLabel;
|
|
9
|
-
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
11
|
var THREE = _interopRequireWildcard(require("three"));
|
|
13
|
-
|
|
14
12
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
15
|
-
|
|
16
13
|
var _hooks = require("../../../hooks");
|
|
17
|
-
|
|
18
14
|
var _CSS3DRenderPlugin = require("../../../../fivePlugins/CSS3DRenderPlugin");
|
|
19
|
-
|
|
20
15
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
21
|
-
|
|
22
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
|
-
|
|
24
16
|
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); }
|
|
25
|
-
|
|
26
17
|
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; }
|
|
27
|
-
|
|
28
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
29
|
-
|
|
30
|
-
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."); }
|
|
31
|
-
|
|
32
|
-
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); }
|
|
33
|
-
|
|
34
|
-
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; }
|
|
35
|
-
|
|
36
|
-
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; }
|
|
37
|
-
|
|
38
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
39
|
-
|
|
40
18
|
/**
|
|
41
19
|
* 通过传入中心点确定矩形框架容器的四个点:
|
|
42
20
|
* 1. 已知矩形长宽和中心点
|
|
@@ -48,11 +26,11 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
|
|
|
48
26
|
var length = wrapperLength / 375;
|
|
49
27
|
var width = wrapperWidth / 375;
|
|
50
28
|
var geometry = new THREE.PlaneGeometry(length, width);
|
|
51
|
-
|
|
52
29
|
if (normal) {
|
|
53
30
|
var lookPoint = new THREE.Vector3(normal.x + centerPoint.x, normal.y + centerPoint.y, normal.z + centerPoint.z);
|
|
54
31
|
geometry.lookAt(lookPoint);
|
|
55
|
-
}
|
|
32
|
+
}
|
|
33
|
+
// const pointgeometry = new THREE.Geometry()
|
|
56
34
|
// pointgeometry.vertices.push(cameraPosition)
|
|
57
35
|
// const pointmaterial = new THREE.PointsMaterial({
|
|
58
36
|
// color: 0xffffff,
|
|
@@ -60,33 +38,32 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
|
|
|
60
38
|
// })
|
|
61
39
|
// _point = new THREE.Points(pointgeometry, pointmaterial)
|
|
62
40
|
|
|
63
|
-
|
|
64
41
|
var material = new THREE.MeshBasicMaterial({
|
|
65
42
|
color: 0xffff00,
|
|
66
43
|
side: THREE.DoubleSide
|
|
67
44
|
});
|
|
68
45
|
var plane = new THREE.Mesh(geometry, material);
|
|
69
46
|
var v0 = centerPoint.clone();
|
|
70
|
-
plane.position.copy(v0);
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
47
|
+
plane.position.copy(v0);
|
|
48
|
+
|
|
49
|
+
// 计算传入的四个点的坐标
|
|
50
|
+
var _plane$geometry$verti = (0, _slicedToArray2["default"])(plane.geometry.vertices, 4),
|
|
51
|
+
v1 = _plane$geometry$verti[0],
|
|
52
|
+
v2 = _plane$geometry$verti[1],
|
|
53
|
+
v3 = _plane$geometry$verti[2],
|
|
54
|
+
v4 = _plane$geometry$verti[3];
|
|
78
55
|
var downLeft = v0.clone().add(v4);
|
|
79
56
|
var downRight = v0.clone().add(v3);
|
|
80
57
|
var upLeft = v0.clone().add(v2);
|
|
81
|
-
var upRight = v0.clone().add(v1);
|
|
58
|
+
var upRight = v0.clone().add(v1);
|
|
82
59
|
|
|
60
|
+
// 插件使用要求:矩形四个点位数据,顺序为**必须**为左下、右下、右上、左上
|
|
83
61
|
return [downLeft, downRight, upRight, upLeft];
|
|
84
62
|
};
|
|
63
|
+
|
|
85
64
|
/**
|
|
86
65
|
* 空间文本标签。
|
|
87
66
|
*/
|
|
88
|
-
|
|
89
|
-
|
|
90
67
|
function PanoTextLabel() {
|
|
91
68
|
var timeoutRef = React.useRef();
|
|
92
69
|
var controller = (0, _hooks.useController)();
|
|
@@ -94,39 +71,35 @@ function PanoTextLabel() {
|
|
|
94
71
|
var ref = React.useRef();
|
|
95
72
|
React.useEffect(function () {
|
|
96
73
|
var _controller$configs;
|
|
97
|
-
|
|
98
74
|
if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.PanoTextLabel) === false) {
|
|
99
75
|
return;
|
|
100
76
|
}
|
|
101
|
-
|
|
102
77
|
var callback = function callback(keyframe) {
|
|
103
78
|
var _panoTextLabelData$no, _panoTextLabelData$no2, _panoTextLabelData$no3;
|
|
104
|
-
|
|
105
79
|
var start = keyframe.start,
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
var panoTextLabelData = data;
|
|
109
|
-
|
|
80
|
+
end = keyframe.end,
|
|
81
|
+
data = keyframe.data;
|
|
82
|
+
var panoTextLabelData = data;
|
|
83
|
+
// 增加无文本情况的判断
|
|
110
84
|
if (data.text === '') return;
|
|
111
85
|
var _panoTextLabelData$ve = panoTextLabelData.vertex,
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
86
|
+
x = _panoTextLabelData$ve.x,
|
|
87
|
+
y = _panoTextLabelData$ve.y,
|
|
88
|
+
z = _panoTextLabelData$ve.z;
|
|
115
89
|
var centerPoint = new THREE.Vector3(x, y, z);
|
|
116
|
-
var normal = new THREE.Vector3((_panoTextLabelData$no = panoTextLabelData.normal) === null || _panoTextLabelData$no === void 0 ? void 0 : _panoTextLabelData$no.x, (_panoTextLabelData$no2 = panoTextLabelData.normal) === null || _panoTextLabelData$no2 === void 0 ? void 0 : _panoTextLabelData$no2.y, (_panoTextLabelData$no3 = panoTextLabelData.normal) === null || _panoTextLabelData$no3 === void 0 ? void 0 : _panoTextLabelData$no3.z);
|
|
117
|
-
|
|
90
|
+
var normal = new THREE.Vector3((_panoTextLabelData$no = panoTextLabelData.normal) === null || _panoTextLabelData$no === void 0 ? void 0 : _panoTextLabelData$no.x, (_panoTextLabelData$no2 = panoTextLabelData.normal) === null || _panoTextLabelData$no2 === void 0 ? void 0 : _panoTextLabelData$no2.y, (_panoTextLabelData$no3 = panoTextLabelData.normal) === null || _panoTextLabelData$no3 === void 0 ? void 0 : _panoTextLabelData$no3.z);
|
|
91
|
+
// 生成传入的四个点,将文本框最大宽度定在200px,最高高度在30px
|
|
118
92
|
var wrapperLength = 200;
|
|
119
93
|
var wrapperWidth = 30;
|
|
120
94
|
var points = calcPoints(centerPoint, panoTextLabelData.normal && normal, wrapperLength, wrapperWidth);
|
|
121
95
|
if (!ref.current) ref.current = (0, _CSS3DRenderPlugin.CSS3DRenderPlugin)(five);
|
|
122
96
|
var container = ref.current.create3DDomContainer(points);
|
|
123
|
-
var css3DObject = container === null || container === void 0 ? void 0 : container.css3DObject;
|
|
124
|
-
|
|
97
|
+
var css3DObject = container === null || container === void 0 ? void 0 : container.css3DObject;
|
|
98
|
+
// 将获取的mesh进行旋转操作,根据欧拉角去进行mesh的变换
|
|
125
99
|
if (data.quaternion) {
|
|
126
100
|
var quaternion = new THREE.Quaternion(data.quaternion.x, data.quaternion.y, data.quaternion.z, data.quaternion.w);
|
|
127
101
|
css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.quaternion.copy(quaternion);
|
|
128
102
|
}
|
|
129
|
-
|
|
130
103
|
if (container !== null && container !== void 0 && container.container) _reactDom["default"].render( /*#__PURE__*/React.createElement("div", {
|
|
131
104
|
className: "PanoTextLabel PanoTextLabel--notHidden"
|
|
132
105
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -139,15 +112,12 @@ function PanoTextLabel() {
|
|
|
139
112
|
}, data.text || ''))), container === null || container === void 0 ? void 0 : container.container);
|
|
140
113
|
timeoutRef.current = setTimeout(function () {
|
|
141
114
|
var _ref$current;
|
|
142
|
-
|
|
143
115
|
(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.disposeAll();
|
|
144
116
|
}, end - start);
|
|
145
117
|
};
|
|
146
|
-
|
|
147
118
|
controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
|
|
148
119
|
return function () {
|
|
149
120
|
controller.off(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
|
|
150
|
-
|
|
151
121
|
if (timeoutRef.current) {
|
|
152
122
|
clearTimeout(timeoutRef.current);
|
|
153
123
|
}
|