@realsee/vreo 0.2.0-alpha.2 → 0.2.0-alpha.5

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

@@ -39,8 +39,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var searchV1 = function searchV1(_ref) {
   var five = _ref.five,
-      position = _ref.position,
-      rotation = _ref.rotation,
       dom = _ref.dom;
   var cameraDirection = new _three.Vector3();
   five.camera.getWorldDirection(cameraDirection);
@@ -65,14 +63,14 @@ var searchV1 = function searchV1(_ref) {
   var rightTop = new _three.Vector3(right, top);
   var rightBottom = new _three.Vector3(right, bottom);
   var points = [leftBottom, rightBottom, rightTop, leftTop].map(function (point) {
-    point.setX(point.x / window.innerWidth * 2 - 1);
+    point.setX(point.x / window.innerWidth * 2 - 2);
     point.setY(-(point.y / window.innerHeight) * 2 + 1);
     point.setZ(0.5);
     return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2);
   }); // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
   // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
 
-  var ratio = leftBottom.distanceTo(rightBottom) / 160;
+  var ratio = leftBottom.distanceTo(rightBottom) / 120;
   return {
     points: points,
     ratio: ratio
@@ -98,19 +96,15 @@ function SpatialScenePanel(props) {
         return;
       }
 
-      var data = keyframe.data; // const data = mockData as SpatialScenePanelData
+      var data = keyframe.data;
 
       var _searchV = searchV1({
         five: props.five,
-        position: new _three.Vector3(data.position.x, data.position.y, data.position.z),
-        quaternion: data.quaternion,
         dom: ref.current
       }),
           points = _searchV.points,
           ratio = _searchV.ratio;
 
-      console.log(points, ratio);
-
       var _ref2 = rendererRef.current.create3DDomContainer(points, {
         ratio: ratio,
         autoRender: false
@@ -157,9 +151,6 @@ function SpatialScenePanel(props) {
       }, end - start);
     };
 
-    Object.assign(window, {
-      $SpatialScenePanelCallback: callback
-    });
     props.subscribe.on(_VreoUnit.VreoKeyframeEnum.Custom, callback);
     return function () {
       props.subscribe.off(_VreoUnit.VreoKeyframeEnum.Custom, callback);

package/lib/Player/modules/keyframes/PanoTextLabel/index.js

@@ -63,12 +63,8 @@ function PanoTextLabel() {
       var res = project2d(new _three.Vector3(x, y, z));
       if (!res) return;
       var left = res.x,
-          top = res.y;
-      Object.assign(window, {
-        $PanoTextLabel: {
-          setState: setState
-        }
-      });
+          top = res.y; // Object.assign(window, { $PanoTextLabel: { setState } })
+
       setState({
         left: left,
         top: top,
@@ -80,12 +76,8 @@ function PanoTextLabel() {
       }, end - start);
     };
 
-    controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
-    Object.assign(window, {
-      $panoTextLabel: {
-        setState: setState
-      }
-    });
+    controller.on(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback); // Object.assign(window, { $panoTextLabel: { setState } })
+
     return function () {
       controller.off(_VreoUnit.VreoKeyframeEnum.PanoTextLabel, callback);
 

package/lib/fivePlugins/CameraMovementPlugin/index.js

@@ -128,7 +128,7 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                 var panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
 
                 if (panoIndex !== undefined) {
-                  five.moveToPano(panoIndex, Object.assign({
+                  var movePanoOptions = {
                     duration: duration,
                     // 移动耗时
                     moveEndCallback: function moveEndCallback() {
@@ -137,9 +137,11 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                     // 移动结束
                     moveCancelCallback: function moveCancelCallback() {
                       return reject(false);
-                    } // 移动开始
-
-                  }, args));
+                    },
+                    // 移动开始
+                    effect: 'fade'
+                  };
+                  five.moveToPano(panoIndex, Object.assign(movePanoOptions, args));
                 } else {
                   reject(false);
                 }
@@ -239,8 +241,9 @@ var CameraMovementPlugin = function CameraMovementPlugin(five) {
                   // 移动结束
                   moveCancelCallback: function moveCancelCallback() {
                     return reject(false);
-                  } // 移动开始
-
+                  },
+                  // 移动开始
+                  effect: 'fade'
                 });
               });
 

package/lib/fivePlugins/CameraMovementPlugin/typings.d.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose } from '@realsee/five';
+import { Mode, MovePanoOptions, Pose } from '@realsee/five';
 export interface CameraMovementPluginParameterType {
 }
 export interface CameraMovementPluginExportType {
@@ -33,7 +33,7 @@ export interface CameraMovementOptsCallback {
 export declare type MoveArgs = {
     mode: Mode;
     panoIndex: number;
-} & Pose;
+} & Pose & Pick<MovePanoOptions, 'effect'>;
 export declare type MoveOpts = {
     preload?: boolean;
 } & CameraMovementOptsCallback;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.5",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",

package/resources/Player/custom/SpatialScenePanel/index.tsx

@@ -22,13 +22,13 @@ export interface SpatialScenePanelData {
 
 interface SearchParams {
   five: Five
-  position: Vector3
-  rotation?: Vector3
-  quaternion: [number, number, number, number]
+  // position: Vector3
+  // rotation?: Vector3
+  // quaternion: [number, number, number, number]
   dom: HTMLDivElement 
 }
 
-const searchV1 = ({ five, position, rotation, dom }: SearchParams) => {
+const searchV1 = ({ five, dom }: SearchParams) => {
   const cameraDirection = new Vector3()
   five.camera.getWorldDirection(cameraDirection)
   const cameraPosition = five.camera.position
@@ -48,7 +48,7 @@ const searchV1 = ({ five, position, rotation, dom }: SearchParams) => {
   const rightBottom = new Vector3(right, bottom)
 
   const points = [leftBottom, rightBottom, rightTop, leftTop].map((point) => {
-    point.setX((point.x / window.innerWidth) * 2 - 1)
+    point.setX((point.x / window.innerWidth) * 2 - 2)
     point.setY(-(point.y / window.innerHeight) * 2 + 1)
     point.setZ(0.5)
     return point.unproject(five.camera).addScaledVector(cameraDirection, 0.2)
@@ -57,7 +57,7 @@ const searchV1 = ({ five, position, rotation, dom }: SearchParams) => {
   // const colors = [0xdc143c, 0xffff00, 0x0000ff, 0x008000]
   // points.forEach((p, index) => five.scene.add(getSphere(p, colors[index])))
 
-  const ratio = leftBottom.distanceTo(rightBottom) / 160
+  const ratio = leftBottom.distanceTo(rightBottom) / 120
   return { points, ratio }
 }
 
@@ -82,17 +82,12 @@ export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
       }
 
       const data = keyframe.data as SpatialScenePanelData
-      // const data = mockData as SpatialScenePanelData
 
       const { points, ratio } = searchV1({
         five: props.five,
-        position: new Vector3(data.position.x, data.position.y, data.position.z),
-        quaternion: data.quaternion,
         dom: ref.current!
       })
 
-      console.log(points, ratio)
-
       const { container, dispose, css3DObject, render } =
         rendererRef.current.create3DDomContainer(points, { ratio, autoRender: false }) || {}
 
@@ -124,7 +119,6 @@ export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
         }, end - start)
     }
 
-    Object.assign(window, {$SpatialScenePanelCallback: callback})
     props.subscribe.on(VreoKeyframeEnum.Custom, callback)
 
     return () => {

package/resources/Player/modules/keyframes/PanoTextLabel/index.tsx

@@ -30,13 +30,13 @@ export function PanoTextLabel() {
       if (!res) return
       const { x: left, y: top } = res
 
-      Object.assign(window, { $PanoTextLabel: { setState } })
+      // Object.assign(window, { $PanoTextLabel: { setState } })
       setState({ left, top, text: data.text || '', fontSize: data.fontSize || 16 })
       timeoutRef.current = setTimeout(() => setState(null), end - start)
     }
     controller.on(VreoKeyframeEnum.PanoTextLabel, callback)
 
-    Object.assign(window, { $panoTextLabel: { setState } })
+    // Object.assign(window, { $panoTextLabel: { setState } })
     return () => {
       controller.off(VreoKeyframeEnum.PanoTextLabel, callback)
       if (timeoutRef.current) {

package/resources/fivePlugins/CameraMovementPlugin/index.ts

@@ -1,4 +1,4 @@
-import { Five } from '@realsee/five'
+import { Five, MovePanoOptions } from '@realsee/five'
 import type { FivePlugin } from '@realsee/five'
 import * as TWEEN from '@tweenjs/tween.js'
 
@@ -97,14 +97,16 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
     return await new Promise<boolean>((resolve, reject) => {
       const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex
       if (panoIndex !== undefined) {
+        const movePanoOptions: MovePanoOptions = {
+          duration, // 移动耗时
+          moveEndCallback: () => resolve(true), // 移动结束
+          moveCancelCallback: () => reject(false), // 移动开始
+          effect: 'fade',
+        }
         five.moveToPano(
           panoIndex,
           Object.assign(
-            {
-              duration, // 移动耗时
-              moveEndCallback: () => resolve(true), // 移动结束
-              moveCancelCallback: () => reject(false), // 移动开始
-            },
+            movePanoOptions,
             args,
           ),
         )
@@ -154,6 +156,7 @@ export const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType,
         five.moveToPano(args.panoIndex, {
           moveEndCallback: () => resolve(true), // 移动结束
           moveCancelCallback: () => reject(false), // 移动开始
+          effect: 'fade',
         })
       })
     }

package/resources/fivePlugins/CameraMovementPlugin/typings.ts

@@ -1,5 +1,5 @@
 /* eslint-disable prettier/prettier */
-import { Mode, Pose } from '@realsee/five'
+import { Mode, MovePanoOptions, Pose } from '@realsee/five'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface CameraMovementPluginParameterType { }
@@ -39,7 +39,7 @@ export interface CameraMovementOptsCallback {
 export type MoveArgs = {
   mode: Mode
   panoIndex: number
-} & Pose
+} & Pose & Pick<MovePanoOptions, 'effect'>
 
 export type MoveOpts = {
   preload?: boolean