@realsee/vreo 2.6.4-alpha.5 → 3.0.0-webgpu-react18.8

package/lib/Player/custom/SpatialScenePanel/index.js

@@ -1,263 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import * as React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Raycaster, Vector3 } from 'three';
-import { tweenProgress } from "../../../shared-utils/animationFrame/BetterTween.js";
-import { CSS3DRenderPlugin } from "../../../fivePlugins/CSS3DRenderPlugin/index.js";
-import { VreoKeyframeEnum } from "../../../typings/VreoUnit.js"; // __debug__
-// const mockData: SpatialScenePanelData = {
-//   customType: 'SpatialScenePanel',
-//   "stateList": [
-//     {
-//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___fc42f951076607a22fd5c54f005ba553.png",
-//       "text": "窗帘关闭"
-//     },
-//     {
-//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___b331e7ad732debc07250a169a3393b13.png",
-//       "text": "摄像头休眠"
-//     },
-//     {
-//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___2e425a81ac0ad88232d50d4e52a9abfa.png",
-//       "text": "氛围音乐"
-//     },
-//     {
-//       "icon": "http://vrlab-public.ljcdn.com/release/seesay/tools/___bff48bb81cde37aa6a319d6f5d56e3a4.png",
-//       "text": "空调打开"
-//     }
-//   ],
-//   "temperature": "27",
-//   "title": "沉浸式回家"
-// }
-// const getSphere = (position: Vector3, color = 0xffff00) => {
-//   const geometry = new SphereGeometry(0.05, 32, 16)
-//   const material = new MeshBasicMaterial({ color })
-//   const sphere = new Mesh(geometry, material)
-//   sphere.position.copy(position)
-//   return sphere
-// }
-
-var searchV1 = function searchV1(_ref) {
-  var five = _ref.five,
-    dom = _ref.dom;
-  var cameraDirection = new Vector3();
-  five.camera.getWorldDirection(cameraDirection);
-  var cameraPosition = five.camera.position;
-  var _five$model$intersect = five.model.intersectRaycaster(new Raycaster(cameraPosition, cameraDirection)),
-    _five$model$intersect2 = _slicedToArray(_five$model$intersect, 1),
-    intersect = _five$model$intersect2[0];
-  var point = five.project2d(intersect.point);
-  var widescreen = window.innerWidth > 560 ? true : false;
-  // const width = dom!.clientWidth
-  var height = dom.clientHeight;
-  dom.style.left = point.x + 'px';
-  dom.style.top = point.y - height / 2 + 'px';
-  var rect = dom.getBoundingClientRect();
-  var left = rect.left,
-    top = rect.top,
-    bottom = rect.bottom,
-    right = rect.right;
-  var leftBottom = new Vector3(left, bottom);
-  var leftTop = new Vector3(left, top);
-  var rightTop = new Vector3(right, top);
-  var rightBottom = new Vector3(right, bottom);
-  var points = [leftBottom, rightBottom, rightTop, leftTop].map(function (point) {
-    point.setX(point.x / window.innerWidth * 2 - (widescreen ? 1.25 : 1.75));
-    point.setY(-(point.y / window.innerHeight) * 2 + (widescreen ? 1.35 : 1.125));
-    point.setZ(0.5);
-    return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2);
-  });
-
-  // __debug__
-  // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
-  // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
-
-  // 判断是手机 150
-  var ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120);
-  return {
-    points: points,
-    ratio: ratio
-  };
-};
-
-/**
- * 空间场景面板
- * @returns
- */
-export function SpatialScenePanel(props) {
-  var timeoutRef = React.useRef(null);
-  var ref = React.useRef(null);
-  var panelRef = React.useRef(null);
-  var rendererRef = React.useRef(CSS3DRenderPlugin(props.five));
-  React.useEffect(function () {
-    if (!ref.current) {
-      return;
-    }
-    var callback = function callback(keyframe) {
-      if (keyframe.data.customType !== 'SpatialScenePanel') {
-        return;
-      }
-      var data = keyframe.data;
-
-      // const data = mockData
-      var _searchV = searchV1({
-          five: props.five,
-          dom: ref.current
-        }),
-        points = _searchV.points,
-        ratio = _searchV.ratio;
-      var _ref2 = rendererRef.current.create3DDomContainer(points, {
-          ratio: ratio,
-          autoRender: false
-        }) || {},
-        container = _ref2.container,
-        dispose = _ref2.dispose,
-        css3DObject = _ref2.css3DObject,
-        render = _ref2.render;
-      Object.assign(window, {
-        $css3DObject: css3DObject
-      });
-      if (!container) return;
-      var root = createRoot(container);
-      root.render(/*#__PURE__*/React.createElement(Panel, {
-        ref: function ref(_ref3) {
-          return panelRef.current = _ref3;
-        },
-        data: data
-      }));
-      var startRotateY = -(Math.PI * 2) / 9;
-      var lastRotateY = 0;
-      tweenProgress(1000).onUpdate(function (_ref4) {
-        var progress = _ref4.progress;
-        var needRotateY = Math.PI / 90 * 11 * progress;
-        var rotateY = needRotateY - lastRotateY;
-        css3DObject === null || css3DObject === void 0 || css3DObject.rotateY(rotateY);
-        // css3DObject?.rotateZ
-        lastRotateY = needRotateY;
-      }).onStart(function () {
-        css3DObject === null || css3DObject === void 0 || css3DObject.rotateY(startRotateY);
-        render();
-      }).onDispose(function () {
-        var _panelRef$current;
-        (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 || _panelRef$current.classList.add('show');
-      }).play();
-
-      // Object.assign(window, {  $dispose: () => {
-      //   panelRef.current?.classList.add('hide')
-      //   setTimeout(() => dispose?.(), 1500)
-      // } })
-
-      var start = keyframe.start,
-        end = keyframe.end;
-      timeoutRef.current = setTimeout(function () {
-        var _panelRef$current2;
-        (_panelRef$current2 = panelRef.current) === null || _panelRef$current2 === void 0 || _panelRef$current2.classList.add('hide');
-        timeoutRef.current = setTimeout(function () {
-          dispose === null || dispose === void 0 || dispose();
-          timeoutRef.current = null;
-        }, 1500);
-      }, end - start);
-    };
-    Object.assign(window, {
-      $callback: callback
-    });
-
-    // setTimeout(() => {callback()}, 8000)
-    props.subscribe.on(VreoKeyframeEnum.Custom, callback);
-    return function () {
-      props.subscribe.off(VreoKeyframeEnum.Custom, callback);
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "vreo-SpatialScenePanel",
-    ref: ref
-  });
-}
-
-/** 背景动画：控制延迟 */
-function SpatialScenePanelBg() {
-  var ref = React.useRef(null);
-  var timeoutRef = React.useRef(null);
-  React.useEffect(function () {
-    if (!ref.current) return;
-    var listener = function listener() {
-      var _ref$current;
-      (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.setAttribute('class', 'SpatialScenePanel-bg');
-      timeoutRef.current = setTimeout(function () {
-        var _ref$current2;
-        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation');
-        timeoutRef.current = null;
-      }, 3000);
-    };
-    ref.current.addEventListener('animationend', listener);
-    return function () {
-      if (ref.current) ref.current.removeEventListener('animationend', listener);
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: "SpatialScenePanel-bg SpatialScenePanel-bg--animation"
-  });
-}
-var Panel = /*#__PURE__*/React.forwardRef(function (props, myRef) {
-  var _props$data, _props$data2, _props$data3;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel",
-    ref: myRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-show-area"
-  }, /*#__PURE__*/React.createElement(SpatialScenePanelBg, null), /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-header"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-title"
-  }, (_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.title), /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-temperature"
-  }, (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.temperature, "\u2103")), /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-body"
-  }, (_props$data3 = props.data) === null || _props$data3 === void 0 || (_props$data3 = _props$data3.stateList) === null || _props$data3 === void 0 ? void 0 : _props$data3.map(function (state, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: "scene-".concat(state.text),
-      className: "SpatialScenePanel-item index_".concat(index)
-    }, /*#__PURE__*/React.createElement("img", {
-      className: "SpatialScenePanel-icon",
-      src: state.icon,
-      alt: "".concat(state.text)
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "SpatialScenePanel-text"
-    }, state.text), /*#__PURE__*/React.createElement("div", {
-      className: "SpatialScenePanel-dot"
-    }));
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "SpatialScenePanel-disappear-area"
-  }));
-});
-
-// export function SpatialScenePanel() {
-//   // const data = mockData
-
-//   return (
-//     <div className="SpatialScenePanel" >
-//     <div className="SpatialScenePanel-show-area">
-//       <SpatialScenePanelBg />
-//       <div className="SpatialScenePanel-header">
-//         <div className="SpatialScenePanel-title">{data?.title}</div>
-//         <div className="SpatialScenePanel-temperature">{data?.temperature}℃</div>
-//       </div>
-//       <div className="SpatialScenePanel-body">
-//         {data?.stateList?.map((state, index) => (
-//           <div key={`scene-${state.text}`} className={`SpatialScenePanel-item index_${index}`}>
-//             <img className="SpatialScenePanel-icon" src={state.icon}></img>
-//             <div className="SpatialScenePanel-text">{state.text}</div>
-//             <div className="SpatialScenePanel-dot"></div>
-//           </div>
-//         ))}
-//       </div>
-//     </div>
-
-//     <div className="SpatialScenePanel-disappear-area"></div>
-//   </div>
-//   )
-// }

package/lib/Player/hooks.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { ControllerContext } from "./Controller.js";
-export function useController() {
-  var controller = React.useContext(ControllerContext);
-  if (!controller) {
-    throw new Error('没有找到 "ControllerContext"');
-  }
-  return controller;
-}
-export function useFiveInstance() {
-  var controller = useController();
-  if (!controller.five) {
-    throw new Error('没有找到 "five" 实例');
-  }
-  return controller.five;
-}
-export function useFiveProject2d() {
-  var five = useFiveInstance();
-  return function (vector) {
-    return five.project2d(vector, false);
-  };
-}

package/lib/Player/modules/Drawer/index.js

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { observer } from 'mobx-react';
-import { useController } from "../../hooks.js";
-var DrawerView = observer(function (_ref) {
-  var _controller$drawerCon2;
-  var controller = _ref.controller;
-  var maxHeight = '400px';
-  var height = function (_controller$drawerCon) {
-    var height = (_controller$drawerCon = controller.drawerConfig) === null || _controller$drawerCon === void 0 ? void 0 : _controller$drawerCon.height;
-    if (!height) {
-      return 'max-content';
-    }
-    if (typeof height === 'number') {
-      return height + 'px';
-    }
-    return height;
-  }();
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('vreo-drawer', {
-      'vreo-drawer-visible': controller.drawerConfig && controller.drawerConfig.content
-    }),
-    onClick: function onClick() {
-      return controller.openDrawer(false);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vreo-drawer-inner",
-    style: {
-      height: height,
-      maxHeight: maxHeight
-    }
-  }, ((_controller$drawerCon2 = controller.drawerConfig) === null || _controller$drawerCon2 === void 0 ? void 0 : _controller$drawerCon2.content) || ''));
-});
-export function Drawer() {
-  var controller = useController();
-  return /*#__PURE__*/React.createElement(DrawerView, {
-    controller: controller
-  });
-}

package/lib/Player/modules/PopUp/index.js

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import { observer } from 'mobx-react';
-import { useController } from "../../hooks.js";
-var PopUpView = observer(function (_ref) {
-  var controller = _ref.controller;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames('vreo-PopUp', {
-      'vreo-PopUp-visible': controller.popUp
-    }),
-    onClick: function onClick() {
-      return controller.openPopUp(false);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vreo-PopUp-inner"
-  }, controller.popUp || ''));
-});
-export function PopUp() {
-  var controller = useController();
-  return /*#__PURE__*/React.createElement(PopUpView, {
-    controller: controller
-  });
-}

package/lib/Player/modules/ResizeObserver/index.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { addResizeListener, hasResizeListener } from "../../../shared-utils/addResizeListener.js";
-import { useController } from "../../hooks.js";
-export function ResizeObserver() {
-  var ref = React.useRef(null);
-  var controller = useController();
-  React.useEffect(function () {
-    if (!ref.current) return;
-    var resizeElement = controller.container.parentElement;
-    if (hasResizeListener(resizeElement)) return;
-    var dispose = addResizeListener(resizeElement, function (width, height) {
-      controller.setContainerSize(width, height);
-    });
-    return function () {
-      dispose();
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "resizeObserver-element",
-    ref: ref
-  });
-}