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

package/lib/fivePlugins/CSS3DRenderPlugin/createResizeObserver.js

@@ -1,25 +0,0 @@
-/**
- * @description: 简陋的 ResizeObserver polyfill
- */
-export default function createResizeObserver(func, element) {
-  if (!element || typeof ResizeObserver === 'undefined') {
-    return {
-      observe: function observe() {
-        return window.addEventListener('resize', func);
-      },
-      unobserve: function unobserve() {
-        return window.removeEventListener('resize', func);
-      }
-    };
-  } else {
-    var observer = new ResizeObserver(func);
-    return {
-      observe: function observe() {
-        return observer.observe(element);
-      },
-      unobserve: function unobserve() {
-        return observer.unobserve(element);
-      }
-    };
-  }
-}

package/lib/fivePlugins/CSS3DRenderPlugin/evenNumber.js

@@ -1,4 +0,0 @@
-export default function evenNumber(num, config) {
-  var roundNum = Math.round(num);
-  return roundNum % 2 === 0 ? roundNum : roundNum + Number(config !== null && config !== void 0 && config.smaller ? -1 : 1);
-}

package/lib/fivePlugins/CSS3DRenderPlugin/index.js

@@ -1,226 +0,0 @@
-import * as THREE from 'three';
-import { Scene, Vector3 } from 'three';
-import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
-import evenNumber from "./evenNumber.js";
-import centerPoint from "./centerPoint.js";
-import transformPositionToVector3 from "./transformPositionToVector3.js";
-import createResizeObserver from "./createResizeObserver.js";
-/**
- * 三维向量
- */
-/**
- * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
- * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
- *
- * @returns
- */
-export var CSS3DRenderPlugin = function CSS3DRenderPlugin(five) {
-  var state = {
-    disposeCallbacks: []
-  };
-  var create3DDomContainer = function create3DDomContainer() {
-    var _five$model, _five$model2, _config$autoRender;
-    for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
-      params[_key] = arguments[_key];
-    }
-    var points = params[0].map(function (point) {
-      return point instanceof Vector3 ? point : transformPositionToVector3(point);
-    });
-    var config = params[1];
-    if ((points === null || points === void 0 ? void 0 : points.length) < 4) return console.error('points must be equal or greater than than 4');
-    if (!(five !== null && five !== void 0 && (_five$model = five.model) !== null && _five$model !== void 0 && _five$model.loaded)) return console.error('five.model.loaded is: ', five === null || five === void 0 ? void 0 : (_five$model2 = five.model) === null || _five$model2 === void 0 ? void 0 : _five$model2.loaded);
-    var fiveElement = five.getElement();
-    if (!fiveElement) return console.error('five.getElement() is ' + fiveElement);
-    var disposers = [];
-    var ratio = (config === null || config === void 0 ? void 0 : config.ratio) || 0.00216;
-    if (ratio <= 0.00215) console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
-    var dpr = (config === null || config === void 0 ? void 0 : config.dpr) || 1;
-    var mode = (config === null || config === void 0 ? void 0 : config.mode) || 'front';
-    var autoRender = (_config$autoRender = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _config$autoRender !== void 0 ? _config$autoRender : true;
-    var behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
-    var container = (config === null || config === void 0 ? void 0 : config.container) || document.createElement('div');
-    container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
-
-    // 获取css3DObject, 如果mode为behind的话，一起获取mesh
-    var _createObject = createObject(points, {
-        ratio: ratio,
-        dpr: dpr,
-        container: container,
-        mode: mode
-      }),
-      css3DObject = _createObject.css3DObject,
-      mesh = _createObject.mesh;
-
-    // ======= INIT START =======
-    var resizeObserver;
-    var frontModeUnInited = mode === 'front' && !state.frontMode;
-    var behindModeUnInited = mode === 'behind' && !state.behindMode;
-    var inited = !(frontModeUnInited || behindModeUnInited);
-    var stopRenderFlag = false;
-    var requestAnimationFrameId = null;
-    if (behindModeUnInited) {
-      state.behindMode = {
-        scene: new Scene(),
-        css3DRenderer: new CSS3DRenderer()
-      };
-    }
-    if (frontModeUnInited) {
-      state.frontMode = {
-        scene: new Scene(),
-        css3DRenderer: new CSS3DRenderer()
-      };
-    }
-    var _ref = mode === 'behind' ? state.behindMode : state.frontMode,
-      scene = _ref.scene,
-      css3DRenderer = _ref.css3DRenderer;
-    var render = function () {
-      if (!inited) {
-        var css3DRendererSetSize = function css3DRendererSetSize() {
-          // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
-          // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
-          var rendererWidth = evenNumber(fiveElement.clientWidth, {
-            smaller: true
-          });
-          var rendererHeight = evenNumber(fiveElement.clientHeight, {
-            smaller: true
-          });
-          css3DRenderer.setSize(rendererWidth, rendererHeight);
-        };
-        css3DRendererSetSize();
-        resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
-        css3DRenderer.domElement.style.position = 'absolute';
-        css3DRenderer.domElement.style.top = '0';
-        css3DRenderer.domElement.style.userSelect = 'none';
-        css3DRenderer.domElement.style.pointerEvents = 'none';
-        var renderEveryFrame = function renderEveryFrame() {
-          if (stopRenderFlag) return;
-          requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
-          css3DRenderer.render(scene, five.camera);
-        };
-        return function () {
-          var _resizeObserver, _resizeObserver$obser;
-          scene.add(css3DObject);
-          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 ? void 0 : (_resizeObserver$obser = _resizeObserver.observe) === null || _resizeObserver$obser === void 0 ? void 0 : _resizeObserver$obser.call(_resizeObserver);
-          renderEveryFrame();
-          if (mode === 'behind' && mesh) {
-            five.scene.add(mesh);
-            disposers.push(function () {
-              return mesh && five.scene.remove(mesh);
-            });
-          }
-        };
-      } else {
-        return function () {
-          scene.add(css3DObject);
-        };
-      }
-    }();
-    if (frontModeUnInited) {
-      var wrapper = fiveElement.parentElement || document.body;
-      wrapper.appendChild(css3DRenderer.domElement);
-    }
-    if (behindModeUnInited) {
-      var _wrapper = behindFiveContainer;
-      _wrapper.appendChild(css3DRenderer.domElement);
-    }
-    // ======= INIT END =======
-
-    var dispose = function dispose() {
-      stopRenderFlag = true;
-      disposers.forEach(function (d) {
-        return d === null || d === void 0 ? void 0 : d();
-      });
-      scene.remove(css3DObject);
-      if (typeof requestAnimationFrameId === 'number') cancelAnimationFrame(requestAnimationFrameId);
-      if (scene.children.length === 0) {
-        css3DRenderer.domElement.remove();
-        if (mode === 'front') state.frontMode = undefined;
-        if (mode === 'behind') state.behindMode = undefined;
-        if (!state.behindMode && !state.frontMode) {
-          var _resizeObserver2, _resizeObserver2$unob;
-          (_resizeObserver2 = resizeObserver) === null || _resizeObserver2 === void 0 ? void 0 : (_resizeObserver2$unob = _resizeObserver2.unobserve) === null || _resizeObserver2$unob === void 0 ? void 0 : _resizeObserver2$unob.call(_resizeObserver2);
-        }
-      }
-      return true;
-    };
-    var idx = state.disposeCallbacks.findIndex(function (item) {
-      return item === dispose;
-    });
-    if (idx !== -1) {
-      state.disposeCallbacks.splice(idx, 1);
-    } else {
-      state.disposeCallbacks.push(dispose);
-    }
-    if (autoRender) render();
-    return {
-      container: container,
-      dispose: dispose,
-      css3DObject: css3DObject,
-      render: autoRender ? undefined : render
-    };
-  };
-  var createObject = function createObject(points, config) {
-    var ratio = config.ratio,
-      dpr = config.dpr,
-      element = config.container,
-      mode = config.mode;
-    var planeWidth = points[0].distanceTo(points[1]);
-    var planeHeight = points[1].distanceTo(points[2]);
-    var domWidthPx = evenNumber(planeWidth / ratio * dpr);
-    var domHeightPx = evenNumber(planeHeight / ratio * dpr);
-    var css3DObject = new CSS3DObject(element);
-    css3DObject.scale.set(ratio, ratio, ratio);
-    element.style.width = domWidthPx + 'px';
-    element.style.height = domHeightPx + 'px';
-    element.style.pointerEvents = 'none';
-    var centerPosition = centerPoint(points[0], points[2]);
-    var vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
-    var vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
-
-    // 旋转
-    var rotateXAngle = new Vector3(0, 1, 0).angleTo(new Vector3(0, vector12.y, vector12.z));
-    var rotateYAngle = new Vector3(1, 0, 0).angleTo(new Vector3(vector01.x, 0, vector01.z));
-    var rotateZAngle = vector01.angleTo(new Vector3(vector01.x, 0, vector01.z));
-    /**
-     * [0,1,0] => [0,0,1]  为rolate Worldx正方向
-     * [0,0,1] => [0,1,0]  为rolate Worldy正方向
-     * [0,1,1] => [-1,0,0] 为rolate Worldz正方向
-     */
-    var rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
-    var rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
-    var rotateZ = (vector01.x > 0 && vector01.y < 0 || vector01.x < 0 && vector01.y > 0 ? -1 : 1) * rotateZAngle;
-    css3DObject.rotateOnWorldAxis(new Vector3(1, 0, 0), rotateX); // x
-    css3DObject.rotateOnWorldAxis(new Vector3(0, 1, 0), rotateY); // y
-    css3DObject.rotateOnWorldAxis(new Vector3(0, 0, 1), rotateZ); // z
-
-    css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
-    var mesh;
-    if (mode === 'behind') {
-      var material = new THREE.MeshBasicMaterial({
-        opacity: 0,
-        transparent: false,
-        side: THREE.DoubleSide
-      });
-      var geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
-      mesh = new THREE.Mesh(geometry, material);
-      mesh.name = 'CSS3DRenderPlugin-mesh';
-      mesh.position.copy(css3DObject.position);
-      mesh.rotation.copy(css3DObject.rotation);
-      mesh.scale.copy(css3DObject.scale);
-    }
-    return {
-      css3DObject: css3DObject,
-      mesh: mesh
-    };
-  };
-  return {
-    create3DDomContainer: create3DDomContainer,
-    disposeAll: function disposeAll() {
-      state.disposeCallbacks.forEach(function (d) {
-        return d === null || d === void 0 ? void 0 : d();
-      });
-      state.disposeCallbacks = [];
-    }
-  };
-};
-export default CSS3DRenderPlugin;

package/lib/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.js

@@ -1,8 +0,0 @@
-import { Vector3 } from 'three';
-var transformPositionToVector3 = function transformPositionToVector3(_ref) {
-  var x = _ref.x,
-    y = _ref.y,
-    z = _ref.z;
-  return new Vector3(x, y, z);
-};
-export default transformPositionToVector3;

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -1,245 +0,0 @@
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { Five } from '@realsee/five';
-import { Rotation } from "./typings.js";
-var PI = Math.PI;
-var PI_2 = PI * 2;
-var moving = false; // five 6 神秘bug， move 的时候不能 setState
-
-function progressNumber(from, to, pst) {
-  if (from === to) return from;
-  return from + (to - from) * pst;
-}
-function progressLongitude(fromLongitude, toLongitude, rotation, progress) {
-  var clockwise = rotation === Rotation.Clockwise;
-  var delta = clockwise ? fromLongitude - toLongitude : toLongitude - fromLongitude;
-  var deltaMod = delta % PI_2;
-  var deltaMod2 = deltaMod < 0 ? deltaMod + PI_2 : deltaMod;
-  var deltaMod3 = clockwise ? -deltaMod2 : deltaMod2;
-  var progressLongitude = fromLongitude + deltaMod3 * progress;
-  return progressLongitude % PI_2;
-}
-
-/**
- * **运镜插件** 模拟类似于电影运镜效果。
- */
-export var CameraMovementPlugin = function CameraMovementPlugin(five) {
-  var move = function move(args, duration) {
-    var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
-      preload: true
-    };
-    return new Promise( /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve, reject) {
-        var _opts$asyncEndCallbac;
-        var panoIndex, start, movePanoOptions;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                moving = true;
-                if (opts.asyncStartCallback) {
-                  opts.asyncStartCallback();
-                }
-                if (!(five.panoIndex === undefined)) {
-                  _context.next = 4;
-                  break;
-                }
-                return _context.abrupt("return", reject(false));
-              case 4:
-                if (!(args.mode && args.mode !== five.currentMode)) {
-                  _context.next = 8;
-                  break;
-                }
-                _context.next = 7;
-                return five.changeMode(args.mode, args, duration);
-              case 7:
-                return _context.abrupt("return", resolve(true));
-              case 8:
-                if (!(args.mode === Five.Mode.Floorplan)) {
-                  _context.next = 10;
-                  break;
-                }
-                return _context.abrupt("return", resolve(true));
-              case 10:
-                if (!(opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
-                  _context.next = 13;
-                  break;
-                }
-                _context.next = 13;
-                return five.preloadPano(args.panoIndex);
-              case 13:
-                (_opts$asyncEndCallbac = opts.asyncEndCallback) === null || _opts$asyncEndCallbac === void 0 ? void 0 : _opts$asyncEndCallbac.call(opts);
-                if (!(args.panoIndex === undefined && args.fov === undefined && args.latitude === undefined && args.longitude === undefined)) {
-                  _context.next = 16;
-                  break;
-                }
-                return _context.abrupt("return", resolve(true));
-              case 16:
-                panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
-                if (!(panoIndex !== undefined)) {
-                  _context.next = 26;
-                  break;
-                }
-                start = performance.now();
-                _context.next = 21;
-                return five.ready();
-              case 21:
-                movePanoOptions = Object.assign({}, args, {
-                  duration: duration - (performance.now() - start),
-                  // 移动耗时
-                  moveEndCallback: function moveEndCallback() {
-                    return resolve(true);
-                  },
-                  // 移动结束
-                  moveCancelCallback: function moveCancelCallback() {
-                    resolve(true);
-                  },
-                  // 移动开始
-                  effect: args.transEffect || 'fly'
-                });
-                _context.next = 24;
-                return five.moveToPano(panoIndex, movePanoOptions);
-              case 24:
-                _context.next = 27;
-                break;
-              case 26:
-                reject(false);
-              case 27:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-      return function (_x, _x2) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-  };
-  var rotate = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(args, duration) {
-      var _opts$asyncStartCallb, _opts$asyncEndCallbac2;
-      var opts,
-        from,
-        to,
-        timeEnd,
-        start,
-        animeDuration,
-        onFiveRenderFrame,
-        _args2 = arguments;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              opts = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : {};
-              moving = false;
-              (_opts$asyncStartCallb = opts.asyncStartCallback) === null || _opts$asyncStartCallb === void 0 ? void 0 : _opts$asyncStartCallb.call(opts);
-
-              // 先切换模型再出旋转效果
-              if (!(args.mode && five.currentMode !== args.mode)) {
-                _context2.next = 6;
-                break;
-              }
-              _context2.next = 6;
-              return five.changeMode(args.mode, args.mode === Five.Mode.Panorama ? {
-                latitude: 0
-              } : undefined);
-            case 6:
-              if (!(args.mode === Five.Mode.Panorama && five.currentMode === Five.Mode.Panorama && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex)) {
-                _context2.next = 12;
-                break;
-              }
-              if (!opts.preload) {
-                _context2.next = 10;
-                break;
-              }
-              _context2.next = 10;
-              return five.preloadPano(args.panoIndex);
-            case 10:
-              _context2.next = 12;
-              return new Promise(function (resolve, reject) {
-                five.moveToPano(args.panoIndex, {
-                  moveEndCallback: function moveEndCallback() {
-                    return resolve(true);
-                  },
-                  // 移动结束
-                  moveCancelCallback: function moveCancelCallback() {
-                    return reject(false);
-                  },
-                  // 移动开始
-                  effect: 'fade'
-                });
-              });
-            case 12:
-              _context2.next = 14;
-              return five.ready();
-            case 14:
-              (_opts$asyncEndCallbac2 = opts.asyncEndCallback) === null || _opts$asyncEndCallbac2 === void 0 ? void 0 : _opts$asyncEndCallbac2.call(opts);
-
-              // 计算to
-              from = five.getCurrentState();
-              to = function () {
-                return args;
-              }();
-              timeEnd = false; // 开始时间
-              start = performance.now();
-              animeDuration = duration;
-              if (args.rotation === Rotation.Loop) {
-                animeDuration = args.rotateSpeed ? Math.ceil(Math.abs(to.longitude - from.longitude) / args.rotateSpeed * 1000) : duration;
-                animeDuration = Math.min(duration, animeDuration);
-              }
-              onFiveRenderFrame = function onFiveRenderFrame() {
-                if (timeEnd || moving) {
-                  five.off('renderFrame', onFiveRenderFrame);
-                  return;
-                }
-                var targetState = {};
-                if (args.rotation !== Rotation.Loop) {
-                  var progress = (performance.now() - start) / duration;
-                  targetState = {
-                    fov: progressNumber(from.fov, to.fov, progress),
-                    latitude: progressNumber(from.latitude, to.latitude, progress),
-                    longitude: progressLongitude(from.longitude, to.longitude, args.rotation, progress)
-                  };
-                } else {
-                  var _progress = (performance.now() - start) / animeDuration; // 可能大于1
-                  var times = Math.floor(_progress);
-                  var progress2 = _progress - times; // 一定小于1
-                  var isNegative = times % 2 === 1; // 是否为反向旋转, 0: 正, 1: 反, 2: 正, 3: 反 以此类推
-                  var resultProgress = isNegative ? 1 - progress2 : progress2;
-                  targetState = {
-                    fov: progressNumber(from.fov, to.fov, resultProgress),
-                    latitude: progressNumber(from.latitude, to.latitude, resultProgress),
-                    longitude: progressNumber(from.longitude, to.longitude, resultProgress)
-                  };
-                }
-                five.setState(targetState, true);
-              };
-              five.on('renderFrame', onFiveRenderFrame);
-              _context2.next = 25;
-              return new Promise(function (resolve) {
-                setTimeout(function () {
-                  timeEnd = true;
-                  five.off('renderFrame', onFiveRenderFrame);
-                  // 总时间到了之后强制结束，同时也是 Loop 模式的结束方式
-                  resolve(true);
-                }, duration);
-              });
-            case 25:
-              return _context2.abrupt("return", _context2.sent);
-            case 26:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-    return function rotate(_x3, _x4) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  return {
-    move: move,
-    rotate: rotate
-  };
-};

package/lib/fivePlugins/CameraMovementPlugin/typings.js

@@ -1,15 +0,0 @@
-/* eslint-disable prettier/prettier */
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-
-export var CameraMovementEffect;
-(function (CameraMovementEffect) {
-  CameraMovementEffect["Move"] = "Move";
-  CameraMovementEffect["Rotate"] = "Rotate";
-})(CameraMovementEffect || (CameraMovementEffect = {}));
-export var Rotation;
-(function (Rotation) {
-  Rotation["Clockwise"] = "Clockwise";
-  Rotation["Anticlockwise"] = "Anticlockwise";
-  Rotation["Loop"] = "Loop";
-})(Rotation || (Rotation = {}));