@realsee/vreo 0.2.0-alpha.4 → 0.2.0-alpha.7

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

@@ -75,49 +75,87 @@ function InfoPanel() {
           data = keyframe.data;
       var infoPanelData = data;
       var title = infoPanelData.title,
-          subTitle = infoPanelData.subTitle;
-
-      if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
-        controller.openDrawer({
-          content: /*#__PURE__*/React.createElement(InfoPanelImg, {
-            url: infoPanelData.url
-          }, /*#__PURE__*/React.createElement(Title, {
-            title: title,
-            subTitle: subTitle
-          })),
-          height: '60vh'
-        });
-      } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
-        controller.openDrawer({
-          content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
-            url: infoPanelData.url
-          }, /*#__PURE__*/React.createElement(Title, {
-            title: title,
-            subTitle: subTitle
-          })),
-          height: '60vh'
-        });
-      }
+          subTitle = infoPanelData.subTitle,
+          style = infoPanelData.style;
+
+      do {
+        if (style === _VreoUnit.InfoPanelStyleEnum.PopUp) {
+          if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
+            controller.openPopUp( /*#__PURE__*/React.createElement(InfoPanelImg, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })));
+          } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
+            controller.openPopUp( /*#__PURE__*/React.createElement(InfoPanelVideo, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })));
+          }
+
+          break;
+        }
+
+        if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Image) {
+          controller.openDrawer({
+            content: /*#__PURE__*/React.createElement(InfoPanelImg, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })),
+            height: '60vh'
+          });
+        } else if (infoPanelData.type === _VreoUnit.InfoPanelTypeEnum.Video) {
+          controller.openDrawer({
+            content: /*#__PURE__*/React.createElement(InfoPanelVideo, {
+              url: infoPanelData.url
+            }, /*#__PURE__*/React.createElement(Title, {
+              title: title,
+              subTitle: subTitle
+            })),
+            height: '60vh'
+          });
+        }
+      } while (false);
 
       timeoutRef.current = setTimeout(function () {
-        return controller.openDrawer(false);
+        controller.openDrawer(false);
+        controller.openPopUp(false);
       }, end - start);
     };
 
     controller.on(_VreoUnit.VreoKeyframeEnum.InfoPanel, callback); // Object.assign(window, {
     //   $setInfoPanel: () => {
-    //     controller.openDrawer({
-    //       content: (
-    //         // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif'>
-    //         // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
-    //         //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //         // </InfoPanelImg>
-    //         <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //     controller.openPopUp(
+    //       // <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
     //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
-    //       </InfoPanelVideo>
-    //       ),
-    //       height: '60vh',
-    //     })
+    //       </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
+    //   },
+    //   $setInfoPanel2: () => {
+    //     controller.openPopUp(
+    //       <InfoPanelImg url='//vrlab-static.ljcdn.com/release/web/psq/a.8e868cb2.gif' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/b.f9a1ed52.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/web/psq/c.4f88c112.png' />
+    //       // <InfoPanelImg url='//vrlab-public.ljcdn.com/release/seesay/tools/cat_music___f68fb9bbe1f7cd6d00a16456dd0b09ad.gif' />
+    //       // <InfoPanelImg url="http://vrlab-public.ljcdn.com/common/images/web/d94e1bd7-0311-4b20-9c41-a1294fe43554.png">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelImg>
+    //       // <InfoPanelVideo url="//vrlab-public.ljcdn.com/release/seesay/tools/2022011713142___b320f74a5e1b5ad4bb46b4dc69d73ecc.mp4">
+    //       //   <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       // </InfoPanelVideo>
+    //     )
     //   },
     // })
 

package/lib/typings/VreoUnit.d.ts

@@ -210,11 +210,16 @@ export declare enum InfoPanelTypeEnum {
     Image = "Image",
     Video = "Video"
 }
+export declare enum InfoPanelStyleEnum {
+    Drawer = "Drawer",
+    PopUp = "PopUp"
+}
 /**
  * 信息面板
  */
 export declare type InfoPanelData = {
     type: InfoPanelTypeEnum;
+    style?: InfoPanelStyleEnum;
     url: string;
     title?: string;
     subTitle?: string;

package/lib/typings/VreoUnit.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = void 0;
+exports.VreoKeyframeEnum = exports.PanoTagEnum = exports.PanoEffectEnum = exports.InfoPanelTypeEnum = exports.InfoPanelStyleEnum = void 0;
 var VreoKeyframeEnum;
 /**
  * 支持自定义剧本关键帧配置项
@@ -55,13 +55,21 @@ exports.PanoEffectEnum = PanoEffectEnum;
  * 信息面板类型枚举
  */
 var InfoPanelTypeEnum;
-/**
- * 信息面板
- */
-
 exports.InfoPanelTypeEnum = InfoPanelTypeEnum;
 
 (function (InfoPanelTypeEnum) {
   InfoPanelTypeEnum["Image"] = "Image";
   InfoPanelTypeEnum["Video"] = "Video";
-})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
+})(InfoPanelTypeEnum || (exports.InfoPanelTypeEnum = InfoPanelTypeEnum = {}));
+
+var InfoPanelStyleEnum;
+/**
+ * 信息面板
+ */
+
+exports.InfoPanelStyleEnum = InfoPanelStyleEnum;
+
+(function (InfoPanelStyleEnum) {
+  InfoPanelStyleEnum["Drawer"] = "Drawer";
+  InfoPanelStyleEnum["PopUp"] = "PopUp";
+})(InfoPanelStyleEnum || (exports.InfoPanelStyleEnum = InfoPanelStyleEnum = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.4",
+  "version": "0.2.0-alpha.7",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -18,7 +18,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "dev": "vite --port=3088",
+    "dev": "vite --port=3088 --host 0.0.0.0",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "docs": "npx typedoc",

package/resources/Player/Controller.ts

@@ -24,6 +24,16 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
     return !this.videoAgentScene?.videoAgentMesh.videoUrl?.endsWith('.mp4')
   }
 
+  popUp: string | JSX.Element | null = null
+
+  openPopUp(popUp: string | JSX.Element | false) {
+    if (!popUp) {
+      this.popUp = null
+      return
+    }
+    this.popUp = popUp
+  }
+
   drawerConfig: {
     content: string | JSX.Element
     height?: number | string
@@ -57,6 +67,8 @@ export class Controller extends Subscribe<VreoKeyframeEvent> {
       setVisible: action,
       playing: observable,
       setPlaying: action,
+      popUp: observable.ref,
+      openPopUp: action,
       drawerConfig: observable.ref,
       openDrawer: action,
     })

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

@@ -1,13 +1,38 @@
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { Five } from '@realsee/five'
-import { Raycaster, Vector3 } from 'three'
+import * as THREE from 'three'
+import { Object3D, Raycaster, Vector3 } from 'three'
 import { tweenProgress } from '@realsee/dnalogel/shared-utils/animationFrame/BetterTween'
 import { CSS3DRenderPlugin, CSS3DRenderPluginExportType } from '@realsee/dnalogel/plugins/CSS3DRenderPlugin'
 
 import { VreoKeyframe, VreoKeyframeEnum } from '../../../typings/VreoUnit'
 import { CustomVreoKeyframeProps } from '../../typings'
 
+// __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": "沉浸式回家"
+// }
 export interface SpatialScenePanelData {
   customType: 'SpatialScenePanel'
   title: string
@@ -16,8 +41,8 @@ export interface SpatialScenePanelData {
     text: string
     icon: string
   }[]
-  position: { x: number; y: number; z: number }
-  quaternion: [number, number, number, number]
+  position?: { x: number; y: number; z: number }
+  quaternion?: [number, number, number, number]
 }
 
 interface SearchParams {
@@ -25,9 +50,17 @@ interface SearchParams {
   // position: Vector3
   // rotation?: Vector3
   // quaternion: [number, number, number, number]
-  dom: HTMLDivElement 
+  dom: HTMLDivElement
 }
 
+// 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
+// }
+
 const searchV1 = ({ five, dom }: SearchParams) => {
   const cameraDirection = new Vector3()
   five.camera.getWorldDirection(cameraDirection)
@@ -35,6 +68,7 @@ const searchV1 = ({ five, dom }: SearchParams) => {
   const [intersect] = five.model.intersectRaycaster(new Raycaster(cameraPosition, cameraDirection))
   const point = five.project2d(intersect.point)
 
+  const widescreen = window.innerWidth > 560 ? true : false
   // const width = dom!.clientWidth
   const height = dom!.clientHeight
   dom!.style.left = point!.x + 'px'
@@ -48,16 +82,18 @@ const searchV1 = ({ five, 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.setY(-(point.y / window.innerHeight) * 2 + 1)
+    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])))
 
-  const ratio = leftBottom.distanceTo(rightBottom) / 160
+  // 判断是手机 150
+  const ratio = leftBottom.distanceTo(rightBottom) / (widescreen ? 150 : 120)
   return { points, ratio }
 }
 
@@ -66,12 +102,12 @@ const searchV1 = ({ five, dom }: SearchParams) => {
  * @returns
  */
 export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
   const ref = React.useRef<HTMLDivElement>(null)
   const panelRef = React.useRef<HTMLDivElement | null>(null)
   const rendererRef = React.useRef<CSS3DRenderPluginExportType>(CSS3DRenderPlugin(props.five))
 
   React.useEffect(() => {
-
     if (!ref.current) {
       return
     }
@@ -83,57 +119,103 @@ export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
 
       const data = keyframe.data as SpatialScenePanelData
 
+      // const data = mockData
       const { points, ratio } = searchV1({
         five: props.five,
-        dom: ref.current!
+        dom: ref.current!,
       })
 
       const { container, dispose, css3DObject, render } =
         rendererRef.current.create3DDomContainer(points, { ratio, autoRender: false }) || {}
 
+      Object.assign(window, { $css3DObject: css3DObject })
       if (!container) return
 
-
       ReactDOM.render(<Panel ref={(ref) => (panelRef.current = ref)} data={data} />, container)
-        const startRotateY = -(Math.PI * 2) / 9
-        let lastRotateY = 0
-        tweenProgress(1000)
-          .onUpdate(({ progress }) => {
-            const needRotateY = (Math.PI / 90) * 11 * progress
-            const rotateY = needRotateY - lastRotateY
-            css3DObject?.rotateY(rotateY)
-            lastRotateY = needRotateY
-          })
-          .onStart(() => {
-            css3DObject?.rotateY(startRotateY)
-            render!()
-          })
-          .onDispose(() => {
-            panelRef.current?.classList.add('show')
-          })
-          .play()
-        const { start, end } = keyframe
-        setTimeout(() => {
-          panelRef.current?.classList.add('hide')
-          setTimeout(() => dispose?.(), 1500)
-        }, end - start)
+      const startRotateY = -(Math.PI * 2) / 9
+      let lastRotateY = 0
+    
+      tweenProgress(1000)
+        .onUpdate(({ progress }) => {
+          const needRotateY = (Math.PI / 90) * 11 * progress
+          const rotateY = needRotateY - lastRotateY
+          css3DObject?.rotateY(rotateY)
+          // css3DObject?.rotateZ
+          lastRotateY = needRotateY
+        })
+        .onStart(() => {
+          css3DObject?.rotateY(startRotateY)
+          render!()
+        })
+        .onDispose(() => {
+          panelRef.current?.classList.add('show')
+        })
+        .play()
+
+    // Object.assign(window, {  $dispose: () => {
+    //   panelRef.current?.classList.add('hide')
+    //   setTimeout(() => dispose?.(), 1500)
+    // } })
+
+      const { start, end } = keyframe
+
+      timeoutRef.current = setTimeout(() => {
+        panelRef.current?.classList.add('hide')
+        timeoutRef.current = setTimeout(() => {
+          dispose?.()
+          timeoutRef.current = null
+        }, 1500)
+      }, end - start)
     }
 
+    Object.assign(window, { $callback: callback })
+
+    // setTimeout(() => {callback()}, 8000)
     props.subscribe.on(VreoKeyframeEnum.Custom, callback)
 
     return () => {
       props.subscribe.off(VreoKeyframeEnum.Custom, callback)
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
     }
   }, [])
 
   return <div className="vreo-SpatialScenePanel" ref={ref}></div>
 }
 
+/** 背景动画：控制延迟 */
+function SpatialScenePanelBg() {
+  const ref = React.useRef<HTMLDivElement>(null)
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+  React.useEffect(() => {
+    if (!ref.current) return
+
+    const listener = () => {
+      console.log('listener')
+      ref.current?.setAttribute('class', 'SpatialScenePanel-bg')
+
+      timeoutRef.current = setTimeout(() => {
+        ref.current?.setAttribute('class', 'SpatialScenePanel-bg SpatialScenePanel-bg--animation')
+        timeoutRef.current = null
+      }, 3000)
+    }
+
+    ref.current.addEventListener('animationend', listener)
+
+    return () => {
+      if (ref.current) ref.current.removeEventListener('animationend', listener)
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
+  return <div ref={ref} className="SpatialScenePanel-bg SpatialScenePanel-bg--animation"></div>
+}
+
 const Panel = React.forwardRef(
   (props: { data: SpatialScenePanelData }, myRef: React.LegacyRef<HTMLDivElement> | undefined) => (
     <div className="SpatialScenePanel" ref={myRef}>
       <div className="SpatialScenePanel-show-area">
-        <div className="SpatialScenePanel-bg"></div>
+        <SpatialScenePanelBg />
         <div className="SpatialScenePanel-header">
           <div className="SpatialScenePanel-title">{props.data?.title}</div>
           <div className="SpatialScenePanel-temperature">{props.data?.temperature}℃</div>
@@ -151,5 +233,33 @@ const Panel = React.forwardRef(
 
       <div className="SpatialScenePanel-disappear-area"></div>
     </div>
-  ),
+  )
 )
+
+
+// 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/resources/Player/index.tsx

@@ -8,6 +8,7 @@ import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
 import { reaction } from 'mobx'
 import { Drawer } from './modules/Drawer'
 import { PlayerConfigs } from './typings'
+import { PopUp } from './modules/PopUp'
 
 export class Player extends Subscribe<VreoKeyframeEvent> {
   $five: Five
@@ -42,6 +43,7 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
       <ControllerContext.Provider value={this.controller}>
         <App></App>
         <Drawer />
+        <PopUp />
         {this.configs.customKeyframes &&
           this.configs.customKeyframes.map((CustomCmpt, key) => (
             <CustomCmpt

package/resources/Player/modules/PopUp/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import classNames from 'classnames'
+import { observer } from 'mobx-react'
+import { Controller } from '../../Controller'
+import { useController } from '../../hooks'
+
+const PopUpView = observer(({ controller }: { controller: Controller }) => {
+
+  return (
+    <div
+      className={classNames('vreo-PopUp', {
+        'vreo-PopUp-visible': controller.popUp,
+      })}
+      onClick={() => controller.openPopUp(false)}
+    >
+      <div className="vreo-PopUp-inner">
+        {controller.popUp ||  ''}
+      </div>
+    </div>
+  )
+})
+
+export function PopUp() {
+  const controller = useController()
+  return <PopUpView controller={controller} />
+}