@realsee/vreo 2.3.8 → 2.3.9-alpha.1
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 +10 -2
- package/lib/PlayController/index.js +66 -6
- package/lib/Player/App.js +26 -0
- package/lib/Player/Controller.js +77 -21
- package/lib/Player/custom/SpatialScenePanel/index.js +63 -42
- package/lib/Player/hooks.js +10 -0
- package/lib/Player/index.js +79 -19
- package/lib/Player/modules/Drawer/index.js +17 -0
- package/lib/Player/modules/PopUp/index.js +10 -0
- package/lib/Player/modules/ResizeObserver/index.js +8 -0
- package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +96 -8
- package/lib/Player/modules/VideoAgent/VideoAgentScene.js +17 -3
- package/lib/Player/modules/VideoAgent/index.js +17 -0
- package/lib/Player/modules/Wave/index.js +32 -11
- package/lib/Player/modules/keyframes/BgMusic/index.js +24 -4
- package/lib/Player/modules/keyframes/CameraMovement/index.js +26 -0
- package/lib/Player/modules/keyframes/InfoPanel/index.js +38 -8
- package/lib/Player/modules/keyframes/ModelVideo/index.js +28 -0
- package/lib/Player/modules/keyframes/PanoEffect/index.js +38 -15
- package/lib/Player/modules/keyframes/PanoEffect/lineAnime.js +7 -0
- package/lib/Player/modules/keyframes/PanoTag/index.js +22 -4
- package/lib/Player/modules/keyframes/PanoTextLabel/index.js +42 -22
- package/lib/Player/modules/keyframes/Prompter/index.js +27 -10
- package/lib/Player/modules/keyframes/UpdateVRPanorama/index.js +25 -18
- package/lib/Player/modules/keyframes/VideoEffect/index.js +42 -10
- package/lib/fivePlugins/CSS3DRenderPlugin/centerPoint.js +2 -0
- package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js +1 -0
- package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js +1 -0
- package/lib/fivePlugins/CSS3DRenderPlugin/index.js +60 -19
- package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js +5 -2
- package/lib/fivePlugins/CameraMovementPlugin/index.js +109 -50
- package/lib/fivePlugins/CameraMovementPlugin/typings.js +4 -0
- package/lib/fivePlugins/ModelTVVideoPlugin/index.js +54 -8
- package/lib/index.js +1 -0
- package/lib/react/index.js +30 -7
- package/lib/shared-utils/Audio.js +49 -8
- package/lib/shared-utils/AudioLike.js +28 -3
- package/lib/shared-utils/Preloader.js +7 -0
- package/lib/shared-utils/addResizeListener.js +5 -0
- package/lib/shared-utils/animationFrame/BetterTween.js +28 -0
- package/lib/shared-utils/animationFrame/index.js +10 -2
- package/lib/shared-utils/animationFrame/tween.js +11 -2
- package/lib/shared-utils/createTransMatrix.js +8 -0
- package/lib/shared-utils/getFileExpandedName.js +1 -0
- package/lib/shared-utils/getMediaInfo.js +9 -0
- package/lib/shared-utils/setElementDataset.js +2 -0
- package/lib/typings/VreoUnit.js +15 -0
- package/package.json +1 -1
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.PanoTag = PanoTag;
|
|
9
|
+
|
|
8
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
9
12
|
var _hooks = require("../../../hooks");
|
|
13
|
+
|
|
10
14
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
15
|
+
|
|
11
16
|
var _dnalogel = require("@realsee/dnalogel");
|
|
17
|
+
|
|
12
18
|
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
|
+
|
|
13
20
|
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
|
+
|
|
14
22
|
function PanoTag() {
|
|
15
23
|
var timeoutRef = React.useRef();
|
|
16
24
|
var controller = (0, _hooks.useController)();
|
|
@@ -32,19 +40,22 @@ function PanoTag() {
|
|
|
32
40
|
}));
|
|
33
41
|
React.useEffect(function () {
|
|
34
42
|
var _controller$configs;
|
|
43
|
+
|
|
35
44
|
if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.PanoTag) === false) {
|
|
36
45
|
return;
|
|
37
46
|
}
|
|
47
|
+
|
|
38
48
|
var callback = function callback(keyframe) {
|
|
39
49
|
if (!panoTagPlugin.current) return;
|
|
40
50
|
var start = keyframe.start,
|
|
41
|
-
|
|
42
|
-
|
|
51
|
+
end = keyframe.end,
|
|
52
|
+
data = keyframe.data;
|
|
43
53
|
var panoTagData = data;
|
|
44
54
|
var id = Date.now().toString();
|
|
45
55
|
var pointType = 'PointTag';
|
|
46
56
|
var dimensionType = '2D';
|
|
47
57
|
var position = [panoTagData.vertex.x, panoTagData.vertex.y, panoTagData.vertex.z];
|
|
58
|
+
|
|
48
59
|
var tag = function () {
|
|
49
60
|
if (panoTagData.imgUrl) {
|
|
50
61
|
return {
|
|
@@ -75,26 +86,31 @@ function PanoTag() {
|
|
|
75
86
|
}
|
|
76
87
|
};
|
|
77
88
|
}
|
|
78
|
-
}();
|
|
89
|
+
}(); // show
|
|
90
|
+
|
|
79
91
|
|
|
80
|
-
// show
|
|
81
92
|
panoTagPlugin.current.load({
|
|
82
93
|
tagList: [tag]
|
|
83
94
|
});
|
|
84
95
|
var tagInstance = panoTagPlugin.current.getTagById(id);
|
|
96
|
+
|
|
85
97
|
if (tagInstance) {
|
|
86
98
|
tagInstance.state.unfolded = true;
|
|
87
99
|
panoTagPlugin.current.updateRenderAllTags();
|
|
88
100
|
}
|
|
101
|
+
|
|
89
102
|
timeoutRef.current = setTimeout(function () {
|
|
90
103
|
var _tag$hooks;
|
|
104
|
+
|
|
91
105
|
// clear
|
|
92
106
|
var tag = panoTagPlugin.current.getTagById(id);
|
|
93
107
|
if (!tag) return;
|
|
108
|
+
|
|
94
109
|
if (tag.state) {
|
|
95
110
|
tag.state.unfolded = false;
|
|
96
111
|
panoTagPlugin.current.updateRenderAllTags();
|
|
97
112
|
}
|
|
113
|
+
|
|
98
114
|
(_tag$hooks = tag.hooks) === null || _tag$hooks === void 0 ? void 0 : _tag$hooks.on('folded', function () {
|
|
99
115
|
setTimeout(function () {
|
|
100
116
|
if (tag.state) {
|
|
@@ -105,9 +121,11 @@ function PanoTag() {
|
|
|
105
121
|
});
|
|
106
122
|
}, end - start);
|
|
107
123
|
};
|
|
124
|
+
|
|
108
125
|
controller.on(_VreoUnit.VreoKeyframeEnum.PanoTag, callback);
|
|
109
126
|
return function () {
|
|
110
127
|
controller.off(_VreoUnit.VreoKeyframeEnum.PanoTag, callback);
|
|
128
|
+
|
|
111
129
|
if (timeoutRef.current) {
|
|
112
130
|
clearTimeout(timeoutRef.current);
|
|
113
131
|
}
|
|
@@ -1,20 +1,32 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports.PanoTextLabel = PanoTextLabel;
|
|
11
|
+
|
|
9
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
|
|
10
14
|
var React = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
11
16
|
var THREE = _interopRequireWildcard(require("three"));
|
|
17
|
+
|
|
12
18
|
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
19
|
+
|
|
13
20
|
var _hooks = require("../../../hooks");
|
|
21
|
+
|
|
14
22
|
var _CSS3DRenderPlugin = require("../../../../fivePlugins/CSS3DRenderPlugin");
|
|
23
|
+
|
|
15
24
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
25
|
+
|
|
16
26
|
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); }
|
|
27
|
+
|
|
17
28
|
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; }
|
|
29
|
+
|
|
18
30
|
/**
|
|
19
31
|
* 通过传入中心点确定矩形框架容器的四个点:
|
|
20
32
|
* 1. 已知矩形长宽和中心点
|
|
@@ -26,11 +38,11 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
|
|
|
26
38
|
var length = wrapperLength / 375;
|
|
27
39
|
var width = wrapperWidth / 375;
|
|
28
40
|
var geometry = new THREE.PlaneGeometry(length, width);
|
|
41
|
+
|
|
29
42
|
if (normal) {
|
|
30
43
|
var lookPoint = new THREE.Vector3(normal.x + centerPoint.x, normal.y + centerPoint.y, normal.z + centerPoint.z);
|
|
31
44
|
geometry.lookAt(lookPoint);
|
|
32
|
-
}
|
|
33
|
-
// const pointgeometry = new THREE.Geometry()
|
|
45
|
+
} // const pointgeometry = new THREE.Geometry()
|
|
34
46
|
// pointgeometry.vertices.push(cameraPosition)
|
|
35
47
|
// const pointmaterial = new THREE.PointsMaterial({
|
|
36
48
|
// color: 0xffffff,
|
|
@@ -38,32 +50,33 @@ var calcPoints = function calcPoints(centerPoint, normal, wrapperLength, wrapper
|
|
|
38
50
|
// })
|
|
39
51
|
// _point = new THREE.Points(pointgeometry, pointmaterial)
|
|
40
52
|
|
|
53
|
+
|
|
41
54
|
var material = new THREE.MeshBasicMaterial({
|
|
42
55
|
color: 0xffff00,
|
|
43
56
|
side: THREE.DoubleSide
|
|
44
57
|
});
|
|
45
58
|
var plane = new THREE.Mesh(geometry, material);
|
|
46
59
|
var v0 = centerPoint.clone();
|
|
47
|
-
plane.position.copy(v0);
|
|
60
|
+
plane.position.copy(v0); // 计算传入的四个点的坐标
|
|
48
61
|
|
|
49
|
-
// 计算传入的四个点的坐标
|
|
50
62
|
var _plane$geometry$verti = (0, _slicedToArray2["default"])(plane.geometry.vertices, 4),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
63
|
+
v1 = _plane$geometry$verti[0],
|
|
64
|
+
v2 = _plane$geometry$verti[1],
|
|
65
|
+
v3 = _plane$geometry$verti[2],
|
|
66
|
+
v4 = _plane$geometry$verti[3];
|
|
67
|
+
|
|
55
68
|
var downLeft = v0.clone().add(v4);
|
|
56
69
|
var downRight = v0.clone().add(v3);
|
|
57
70
|
var upLeft = v0.clone().add(v2);
|
|
58
|
-
var upRight = v0.clone().add(v1);
|
|
71
|
+
var upRight = v0.clone().add(v1); // 插件使用要求:矩形四个点位数据,顺序为**必须**为左下、右下、右上、左上
|
|
59
72
|
|
|
60
|
-
// 插件使用要求:矩形四个点位数据,顺序为**必须**为左下、右下、右上、左上
|
|
61
73
|
return [downLeft, downRight, upRight, upLeft];
|
|
62
74
|
};
|
|
63
|
-
|
|
64
75
|
/**
|
|
65
76
|
* 空间文本标签。
|
|
66
77
|
*/
|
|
78
|
+
|
|
79
|
+
|
|
67
80
|
function PanoTextLabel() {
|
|
68
81
|
var timeoutRef = React.useRef();
|
|
69
82
|
var controller = (0, _hooks.useController)();
|
|
@@ -71,35 +84,39 @@ function PanoTextLabel() {
|
|
|
71
84
|
var ref = React.useRef();
|
|
72
85
|
React.useEffect(function () {
|
|
73
86
|
var _controller$configs;
|
|
87
|
+
|
|
74
88
|
if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.PanoTextLabel) === false) {
|
|
75
89
|
return;
|
|
76
90
|
}
|
|
91
|
+
|
|
77
92
|
var callback = function callback(keyframe) {
|
|
78
93
|
var _panoTextLabelData$no, _panoTextLabelData$no2, _panoTextLabelData$no3;
|
|
94
|
+
|
|
79
95
|
var start = keyframe.start,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
var panoTextLabelData = data;
|
|
83
|
-
|
|
96
|
+
end = keyframe.end,
|
|
97
|
+
data = keyframe.data;
|
|
98
|
+
var panoTextLabelData = data; // 增加无文本情况的判断
|
|
99
|
+
|
|
84
100
|
if (data.text === '') return;
|
|
85
101
|
var _panoTextLabelData$ve = panoTextLabelData.vertex,
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
102
|
+
x = _panoTextLabelData$ve.x,
|
|
103
|
+
y = _panoTextLabelData$ve.y,
|
|
104
|
+
z = _panoTextLabelData$ve.z;
|
|
89
105
|
var centerPoint = new THREE.Vector3(x, y, z);
|
|
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
|
-
|
|
106
|
+
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); // 生成传入的四个点,将文本框最大宽度定在200px,最高高度在30px
|
|
107
|
+
|
|
92
108
|
var wrapperLength = 200;
|
|
93
109
|
var wrapperWidth = 30;
|
|
94
110
|
var points = calcPoints(centerPoint, panoTextLabelData.normal && normal, wrapperLength, wrapperWidth);
|
|
95
111
|
if (!ref.current) ref.current = (0, _CSS3DRenderPlugin.CSS3DRenderPlugin)(five);
|
|
96
112
|
var container = ref.current.create3DDomContainer(points);
|
|
97
|
-
var css3DObject = container === null || container === void 0 ? void 0 : container.css3DObject;
|
|
98
|
-
|
|
113
|
+
var css3DObject = container === null || container === void 0 ? void 0 : container.css3DObject; // 将获取的mesh进行旋转操作,根据欧拉角去进行mesh的变换
|
|
114
|
+
|
|
99
115
|
if (data.quaternion) {
|
|
100
116
|
var quaternion = new THREE.Quaternion(data.quaternion.x, data.quaternion.y, data.quaternion.z, data.quaternion.w);
|
|
101
117
|
css3DObject === null || css3DObject === void 0 ? void 0 : css3DObject.quaternion.copy(quaternion);
|
|
102
118
|
}
|
|
119
|
+
|
|
103
120
|
if (container !== null && container !== void 0 && container.container) _reactDom["default"].render( /*#__PURE__*/React.createElement("div", {
|
|
104
121
|
className: "PanoTextLabel PanoTextLabel--notHidden"
|
|
105
122
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -112,12 +129,15 @@ function PanoTextLabel() {
|
|
|
112
129
|
}, data.text || ''))), container === null || container === void 0 ? void 0 : container.container);
|
|
113
130
|
timeoutRef.current = setTimeout(function () {
|
|
114
131
|
var _ref$current;
|
|
132
|
+
|
|
115
133
|
(_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.disposeAll();
|
|
116
134
|
}, end - start);
|
|
117
135
|
};
|
|
136
|
+
|
|
118
137
|
controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
|
|
119
138
|
return function () {
|
|
120
139
|
controller.off(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
|
|
140
|
+
|
|
121
141
|
if (timeoutRef.current) {
|
|
122
142
|
clearTimeout(timeoutRef.current);
|
|
123
143
|
}
|
|
@@ -1,54 +1,71 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports.Prompter = Prompter;
|
|
11
|
+
|
|
9
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
10
14
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
15
|
+
|
|
11
16
|
var React = _interopRequireWildcard(require("react"));
|
|
17
|
+
|
|
12
18
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
+
|
|
13
20
|
var _hooks = require("../../../hooks");
|
|
21
|
+
|
|
14
22
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
23
|
+
|
|
15
24
|
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
|
+
|
|
16
26
|
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
|
+
|
|
17
28
|
function Prompter() {
|
|
18
29
|
var _React$useState = React.useState(''),
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
30
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
31
|
+
text = _React$useState2[0],
|
|
32
|
+
setText = _React$useState2[1];
|
|
33
|
+
|
|
22
34
|
var _React$useState3 = React.useState(true),
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
35
|
+
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
|
|
36
|
+
hidden = _React$useState4[0],
|
|
37
|
+
setHidden = _React$useState4[1];
|
|
38
|
+
|
|
26
39
|
var ref = React.useRef(null);
|
|
27
40
|
var controller = (0, _hooks.useController)();
|
|
28
41
|
React.useEffect(function () {
|
|
29
42
|
var _controller$configs;
|
|
43
|
+
|
|
30
44
|
if (((_controller$configs = controller.configs) === null || _controller$configs === void 0 ? void 0 : _controller$configs.keyframeMap.Prompter) === false) {
|
|
31
45
|
return;
|
|
32
46
|
}
|
|
47
|
+
|
|
33
48
|
var callback = function callback(keyframe) {
|
|
34
49
|
var start = keyframe.start,
|
|
35
|
-
|
|
36
|
-
|
|
50
|
+
end = keyframe.end,
|
|
51
|
+
data = keyframe.data;
|
|
37
52
|
setText(data.text);
|
|
38
53
|
setHidden(false);
|
|
54
|
+
|
|
39
55
|
if (ref.current) {
|
|
40
56
|
clearTimeout(ref.current);
|
|
41
57
|
ref.current = null;
|
|
42
58
|
}
|
|
59
|
+
|
|
43
60
|
ref.current = setTimeout(function () {
|
|
44
61
|
setHidden(true);
|
|
45
|
-
setText('');
|
|
46
|
-
// setTimeout(() => setText(''), 500)
|
|
62
|
+
setText(''); // setTimeout(() => setText(''), 500)
|
|
47
63
|
|
|
48
64
|
if (ref.current) clearTimeout(ref.current);
|
|
49
65
|
ref.current = null;
|
|
50
66
|
}, end - start);
|
|
51
67
|
};
|
|
68
|
+
|
|
52
69
|
controller.on(_VreoUnit.VreoKeyframeEnum.Prompter, callback);
|
|
53
70
|
return function () {
|
|
54
71
|
controller.off(_VreoUnit.VreoKeyframeEnum.Prompter, callback);
|
|
@@ -1,33 +1,40 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.UpdateVRPanorama = UpdateVRPanorama;
|
|
9
|
+
|
|
8
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
9
12
|
var _five = require("@realsee/five");
|
|
13
|
+
|
|
10
14
|
var _hooks = require("../../../hooks");
|
|
15
|
+
|
|
11
16
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
17
|
+
|
|
12
18
|
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
|
+
|
|
13
20
|
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
|
+
|
|
14
22
|
function UpdateVRPanorama() {
|
|
15
23
|
var controller = (0, _hooks.useController)();
|
|
16
24
|
var five = (0, _hooks.useFiveInstance)();
|
|
17
25
|
var deafultWorkRef = React.useRef(null);
|
|
18
|
-
var updateWorkRef = React.useRef(null);
|
|
26
|
+
var updateWorkRef = React.useRef(null); // 恢复默认 VR
|
|
19
27
|
|
|
20
|
-
// 恢复默认 VR
|
|
21
28
|
var restoreCallback = React.useCallback(function () {
|
|
22
29
|
// 先清理掉 之前的 VR 数据备份
|
|
23
30
|
updateWorkRef.current = null;
|
|
31
|
+
|
|
24
32
|
if (deafultWorkRef.current) {
|
|
25
33
|
var work = (0, _five.parseWork)(deafultWorkRef.current);
|
|
26
34
|
five.load(work);
|
|
27
35
|
}
|
|
28
|
-
}, []);
|
|
36
|
+
}, []); // 暂停时: 恢复默认 VR
|
|
29
37
|
|
|
30
|
-
// 暂停时: 恢复默认 VR
|
|
31
38
|
var pausedCallback = React.useCallback(function () {
|
|
32
39
|
if (deafultWorkRef.current) {
|
|
33
40
|
var work = (0, _five.parseWork)(deafultWorkRef.current);
|
|
@@ -36,32 +43,33 @@ function UpdateVRPanorama() {
|
|
|
36
43
|
});
|
|
37
44
|
five.load(work);
|
|
38
45
|
}
|
|
39
|
-
}, []);
|
|
46
|
+
}, []); // 播放时:如果暂停前有更新 VR 需要还原
|
|
40
47
|
|
|
41
|
-
// 播放时:如果暂停前有更新 VR 需要还原
|
|
42
48
|
var playingCallback = React.useCallback(function () {
|
|
43
49
|
if (!updateWorkRef.current) {
|
|
44
50
|
return;
|
|
45
51
|
}
|
|
52
|
+
|
|
46
53
|
five.load(updateWorkRef.current);
|
|
47
54
|
}, []);
|
|
48
55
|
React.useEffect(function () {
|
|
49
56
|
var callback = function callback(keyframe) {
|
|
50
57
|
var _five$work;
|
|
58
|
+
|
|
51
59
|
if (!deafultWorkRef.current) {
|
|
52
60
|
deafultWorkRef.current = five.work.raw.works;
|
|
53
61
|
}
|
|
54
|
-
var data = keyframe.data;
|
|
55
62
|
|
|
56
|
-
// 如果数据中有新 work 数据,则直接载入
|
|
63
|
+
var data = keyframe.data; // 如果数据中有新 work 数据,则直接载入
|
|
64
|
+
|
|
57
65
|
if (data.work) {
|
|
58
66
|
updateWorkRef.current = (0, _five.parseWork)(data.work);
|
|
59
67
|
five.load(updateWorkRef.current);
|
|
60
68
|
return;
|
|
61
69
|
}
|
|
62
|
-
var lastRawWork = (_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.works[0];
|
|
63
70
|
|
|
64
|
-
// 动态场景:不提供完成的签名数据,需重新整理
|
|
71
|
+
var lastRawWork = (_five$work = five.work) === null || _five$work === void 0 ? void 0 : _five$work.raw.works[0]; // 动态场景:不提供完成的签名数据,需重新整理
|
|
72
|
+
|
|
65
73
|
if (data.dynamic_scene && !data.panorama) {
|
|
66
74
|
var lastWork = JSON.parse(lastRawWork);
|
|
67
75
|
var panorama = lastWork.panorama;
|
|
@@ -70,6 +78,7 @@ function UpdateVRPanorama() {
|
|
|
70
78
|
data.panorama = panorama;
|
|
71
79
|
delete data.dynamic_scene;
|
|
72
80
|
}
|
|
81
|
+
|
|
73
82
|
Object.assign(window, {
|
|
74
83
|
$work1: JSON.parse(lastRawWork),
|
|
75
84
|
$work2: data,
|
|
@@ -78,17 +87,15 @@ function UpdateVRPanorama() {
|
|
|
78
87
|
updateWorkRef.current = (0, _five.parseWork)([lastRawWork, data]);
|
|
79
88
|
five.load(updateWorkRef.current);
|
|
80
89
|
};
|
|
81
|
-
controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback);
|
|
82
90
|
|
|
83
|
-
// 离开 将之前的内容清空
|
|
84
|
-
|
|
91
|
+
controller.on(_VreoUnit.VreoKeyframeEnum.UpdateVRPanorama, callback); // 离开 将之前的内容清空
|
|
92
|
+
|
|
93
|
+
controller.on(_VreoUnit.VreoKeyframeEnum.Exit, restoreCallback); // 新载入数据 将之前的内容清空
|
|
94
|
+
|
|
95
|
+
controller.on('loaded', restoreCallback); // 暂停 回到默认状态
|
|
85
96
|
|
|
86
|
-
//
|
|
87
|
-
controller.on('loaded', restoreCallback);
|
|
97
|
+
controller.on('paused', pausedCallback); // 播放 回归暂停前状态
|
|
88
98
|
|
|
89
|
-
// 暂停 回到默认状态
|
|
90
|
-
controller.on('paused', pausedCallback);
|
|
91
|
-
// 播放 回归暂停前状态
|
|
92
99
|
controller.on('playing', playingCallback);
|
|
93
100
|
return function () {
|
|
94
101
|
// 清理事件监听
|
|
@@ -1,55 +1,75 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
4
5
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
8
10
|
exports.VideoEffect = VideoEffect;
|
|
11
|
+
|
|
9
12
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
13
|
+
|
|
10
14
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
15
|
+
|
|
11
16
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
+
|
|
12
18
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
+
|
|
13
20
|
var React = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
14
22
|
var _VreoUnit = require("../../../../typings/VreoUnit");
|
|
23
|
+
|
|
15
24
|
var _hooks = require("../../../hooks");
|
|
25
|
+
|
|
16
26
|
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); }
|
|
27
|
+
|
|
17
28
|
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; }
|
|
18
|
-
// import { Preloader } from '../../../../shared-utils/Preloader'
|
|
19
29
|
|
|
30
|
+
// import { Preloader } from '../../../../shared-utils/Preloader'
|
|
20
31
|
var inlinePlay = function inlinePlay(videoInstance) {
|
|
21
32
|
if (!videoInstance) return;
|
|
33
|
+
|
|
22
34
|
var canplaythrough = function canplaythrough() {
|
|
23
35
|
videoInstance.removeEventListener('canplaythrough', canplaythrough);
|
|
36
|
+
|
|
24
37
|
try {
|
|
25
38
|
videoInstance.play();
|
|
26
39
|
} catch (error) {}
|
|
27
40
|
};
|
|
41
|
+
|
|
28
42
|
videoInstance.addEventListener('canplaythrough', canplaythrough);
|
|
29
43
|
videoInstance.load();
|
|
30
|
-
};
|
|
44
|
+
}; // const emptyVideo = '//vrlab-static.ljcdn.com/release/web/leisure.69fd3522.mov'
|
|
45
|
+
|
|
31
46
|
|
|
32
|
-
// const emptyVideo = '//vrlab-static.ljcdn.com/release/web/leisure.69fd3522.mov'
|
|
33
47
|
var PI = Math.PI;
|
|
34
48
|
var PI_2 = PI * 2;
|
|
49
|
+
|
|
35
50
|
function VideoEffect() {
|
|
36
51
|
var ref = React.useRef(null);
|
|
37
52
|
var videoRef = React.useRef();
|
|
38
53
|
var controller = (0, _hooks.useController)();
|
|
39
54
|
var timeoutRef = React.useRef();
|
|
55
|
+
|
|
40
56
|
var _React$useState = React.useState(false),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
57
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
58
|
+
visible = _React$useState2[0],
|
|
59
|
+
setVisible = _React$useState2[1];
|
|
60
|
+
|
|
44
61
|
var five = (0, _hooks.useFiveInstance)();
|
|
62
|
+
|
|
45
63
|
var setBlobSrc = function setBlobSrc(blob) {
|
|
46
64
|
if (!videoRef.current) return;
|
|
47
65
|
videoRef.current.src = blob;
|
|
48
66
|
};
|
|
67
|
+
|
|
49
68
|
React.useEffect(function () {
|
|
50
69
|
var callback = /*#__PURE__*/function () {
|
|
51
70
|
var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(keyframe) {
|
|
52
71
|
var start, end, _ref2, videoSrc, fov, direction, panoIndex, vector, _ref3, _ref4, longitude, latitude;
|
|
72
|
+
|
|
53
73
|
return _regenerator["default"].wrap(function _callee$(_context) {
|
|
54
74
|
while (1) {
|
|
55
75
|
switch (_context.prev = _context.next) {
|
|
@@ -60,9 +80,11 @@ function VideoEffect() {
|
|
|
60
80
|
if (vector) {
|
|
61
81
|
return [vector.longitude, vector.latitude];
|
|
62
82
|
}
|
|
83
|
+
|
|
63
84
|
if (!direction) {
|
|
64
85
|
return [0, 0];
|
|
65
86
|
}
|
|
87
|
+
|
|
66
88
|
var longitude = -Math.atan2(direction.x, -direction.z);
|
|
67
89
|
longitude = (longitude % PI_2 + PI_2) % PI_2;
|
|
68
90
|
var latitude = -Math.asin(direction.y / 1);
|
|
@@ -79,10 +101,12 @@ function VideoEffect() {
|
|
|
79
101
|
setVisible(true);
|
|
80
102
|
timeoutRef.current = setTimeout(function () {
|
|
81
103
|
var _videoRef$current;
|
|
104
|
+
|
|
82
105
|
(_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.pause();
|
|
83
106
|
setVisible(false);
|
|
84
107
|
setBlobSrc('');
|
|
85
108
|
}, end - start);
|
|
109
|
+
|
|
86
110
|
case 8:
|
|
87
111
|
case "end":
|
|
88
112
|
return _context.stop();
|
|
@@ -90,20 +114,26 @@ function VideoEffect() {
|
|
|
90
114
|
}
|
|
91
115
|
}, _callee);
|
|
92
116
|
}));
|
|
117
|
+
|
|
93
118
|
return function callback(_x) {
|
|
94
119
|
return _ref.apply(this, arguments);
|
|
95
120
|
};
|
|
96
121
|
}();
|
|
122
|
+
|
|
97
123
|
controller.on(_VreoUnit.VreoKeyframeEnum.VideoEffect, callback);
|
|
124
|
+
|
|
98
125
|
var destroy = function destroy() {
|
|
99
126
|
var _videoRef$current2;
|
|
127
|
+
|
|
100
128
|
if (timeoutRef.current) {
|
|
101
129
|
clearTimeout(timeoutRef.current);
|
|
102
130
|
}
|
|
131
|
+
|
|
103
132
|
(_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause();
|
|
104
133
|
setVisible(false);
|
|
105
134
|
setBlobSrc('');
|
|
106
135
|
};
|
|
136
|
+
|
|
107
137
|
controller.on('paused', function () {
|
|
108
138
|
return destroy();
|
|
109
139
|
});
|
|
@@ -112,6 +142,7 @@ function VideoEffect() {
|
|
|
112
142
|
});
|
|
113
143
|
return function () {
|
|
114
144
|
controller.off(_VreoUnit.VreoKeyframeEnum.VideoEffect, callback);
|
|
145
|
+
|
|
115
146
|
if (timeoutRef.current) {
|
|
116
147
|
clearTimeout(timeoutRef.current);
|
|
117
148
|
}
|
|
@@ -119,9 +150,10 @@ function VideoEffect() {
|
|
|
119
150
|
}, [controller]);
|
|
120
151
|
React.useEffect(function () {
|
|
121
152
|
var _controller$configs, _controller$configs$v;
|
|
153
|
+
|
|
122
154
|
if (!ref.current) return;
|
|
123
|
-
var video = ((_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.videoEffect) || document.createElement('video');
|
|
124
|
-
|
|
155
|
+
var video = ((_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.videoEffect) || document.createElement('video'); // <video playsInline key="VideoEffect-video" className="VideoEffect-video" src={blobSrc} />
|
|
156
|
+
|
|
125
157
|
video.setAttribute('playsinline', 'true');
|
|
126
158
|
video.setAttribute('webkit-playsinline', 'true');
|
|
127
159
|
video.setAttribute('autoplay', 'true');
|
|
@@ -131,10 +163,10 @@ function VideoEffect() {
|
|
|
131
163
|
ref.current.append(videoRef.current);
|
|
132
164
|
document.addEventListener('WeixinJSBridgeReady', function () {
|
|
133
165
|
var _videoRef$current3;
|
|
166
|
+
|
|
134
167
|
(_videoRef$current3 = videoRef.current) === null || _videoRef$current3 === void 0 ? void 0 : _videoRef$current3.play();
|
|
135
168
|
}, false);
|
|
136
|
-
if (!ref.current) return;
|
|
137
|
-
// const asyncfunc = async () => {
|
|
169
|
+
if (!ref.current) return; // const asyncfunc = async () => {
|
|
138
170
|
// setBlobSrc(await URL.createObjectURL(await Preloader.blob(emptyVideo)))
|
|
139
171
|
// inlinePlay(videoRef.current)
|
|
140
172
|
// }
|
|
@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = centerPoint;
|
|
7
|
+
|
|
7
8
|
var _three = require("three");
|
|
9
|
+
|
|
8
10
|
function centerPoint(point1, point2) {
|
|
9
11
|
return new _three.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
|
|
10
12
|
}
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = evenNumber;
|
|
7
|
+
|
|
7
8
|
function evenNumber(num, config) {
|
|
8
9
|
var roundNum = Math.round(num);
|
|
9
10
|
return roundNum % 2 === 0 ? roundNum : roundNum + Number(config !== null && config !== void 0 && config.smaller ? -1 : 1);
|