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

package/lib/react/index.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
+import { PlayerConfigs } from '../Player/typings';
 import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit';
-export declare const VreoProvider: React.FC;
+export interface VreoProviderProps {
+    configs?: Partial<PlayerConfigs>;
+}
+export declare const VreoProvider: React.FC<VreoProviderProps>;
 /**
  * VreoPlayer 命令集合。
  */

package/lib/react/index.js

@@ -44,7 +44,7 @@ var VreoProvider = function VreoProvider(props) {
 
   var playerRef = React.useRef(null);
   React.useEffect(function () {
-    playerRef.current = new _Player.Player(five);
+    playerRef.current = new _Player.Player(five, props.configs || {});
     setPlayer(playerRef.current);
     return function () {
       var _playerRef$current;

package/lib/typings/VreoUnit.d.ts

@@ -97,6 +97,7 @@ export declare type VreoKeyframeEvent = {
     loaded: (vreoUnit: VreoUnit) => void;
     paused: () => void;
     playing: () => void;
+    unknownKeyframeType: (keyframe: Record<string, any>) => void;
 };
 /**
  * 相机运动
@@ -215,7 +216,7 @@ export declare enum InfoPanelTypeEnum {
 export declare type InfoPanelData = {
     type: InfoPanelTypeEnum;
     url: string;
-    tilte?: string;
+    title?: string;
     subTitle?: string;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "0.2.0-alpha.1",
+  "version": "0.2.0-alpha.4",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
     "realsee",
@@ -35,6 +35,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
+    "@realsee/dnalogel": "^0.1.7-alpha.10",
     "@realsee/five": "^5.0.0-alpha.103",
     "@types/offscreencanvas": "^2019.6.4",
     "@types/react": "^17.0.37",

package/resources/Player/App.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import classNames from 'classnames'
 import { observer } from 'mobx-react'
 import { Controller } from './Controller'
-import { useController } from './hooks'
+import { useController, useFiveInstance } from './hooks'
 import { CameraMovement } from './modules/keyframes/CameraMovement'
 import { InfoPanel } from './modules/keyframes/InfoPanel'
 import { ModelVideo } from './modules/keyframes/ModelVideo'

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

@@ -0,0 +1,155 @@
+import * as React from 'react'
+import ReactDOM from 'react-dom'
+import { Five } from '@realsee/five'
+import { 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'
+
+export interface SpatialScenePanelData {
+  customType: 'SpatialScenePanel'
+  title: string
+  temperature: string
+  stateList: {
+    text: string
+    icon: string
+  }[]
+  position: { x: number; y: number; z: number }
+  quaternion: [number, number, number, number]
+}
+
+interface SearchParams {
+  five: Five
+  // position: Vector3
+  // rotation?: Vector3
+  // quaternion: [number, number, number, number]
+  dom: HTMLDivElement 
+}
+
+const searchV1 = ({ five, dom }: SearchParams) => {
+  const cameraDirection = new Vector3()
+  five.camera.getWorldDirection(cameraDirection)
+  const cameraPosition = five.camera.position
+  const [intersect] = five.model.intersectRaycaster(new Raycaster(cameraPosition, cameraDirection))
+  const point = five.project2d(intersect.point)
+
+  // const width = dom!.clientWidth
+  const height = dom!.clientHeight
+  dom!.style.left = point!.x + 'px'
+  dom!.style.top = point!.y - height / 2 + 'px'
+  const rect = dom!.getBoundingClientRect()
+  const { left, top, bottom, right } = rect
+
+  const leftBottom = new Vector3(left, bottom)
+  const leftTop = new Vector3(left, top)
+  const rightTop = new Vector3(right, top)
+  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.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])))
+
+  const ratio = leftBottom.distanceTo(rightBottom) / 160
+  return { points, ratio }
+}
+
+/**
+ * 空间场景面板
+ * @returns
+ */
+export function SpatialScenePanel(props: CustomVreoKeyframeProps) {
+  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
+    }
+
+    const callback = (keyframe: VreoKeyframe) => {
+      if (keyframe.data.customType !== 'SpatialScenePanel') {
+        return
+      }
+
+      const data = keyframe.data as SpatialScenePanelData
+
+      const { points, ratio } = searchV1({
+        five: props.five,
+        dom: ref.current!
+      })
+
+      const { container, dispose, css3DObject, render } =
+        rendererRef.current.create3DDomContainer(points, { ratio, autoRender: false }) || {}
+
+      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)
+    }
+
+    props.subscribe.on(VreoKeyframeEnum.Custom, callback)
+
+    return () => {
+      props.subscribe.off(VreoKeyframeEnum.Custom, callback)
+    }
+  }, [])
+
+  return <div className="vreo-SpatialScenePanel" ref={ref}></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>
+        <div className="SpatialScenePanel-header">
+          <div className="SpatialScenePanel-title">{props.data?.title}</div>
+          <div className="SpatialScenePanel-temperature">{props.data?.temperature}℃</div>
+        </div>
+        <div className="SpatialScenePanel-body">
+          {props.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

@@ -4,7 +4,7 @@ import { Five, Subscribe } from '@realsee/five'
 
 import { App } from './App'
 import { Controller, ControllerContext } from './Controller'
-import { VreoKeyframeEvent, VreoKeyframeConfigMap, VreoUnit } from '../typings/VreoUnit'
+import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
 import { reaction } from 'mobx'
 import { Drawer } from './modules/Drawer'
 import { PlayerConfigs } from './typings'
@@ -42,6 +42,18 @@ export class Player extends Subscribe<VreoKeyframeEvent> {
       <ControllerContext.Provider value={this.controller}>
         <App></App>
         <Drawer />
+        {this.configs.customKeyframes &&
+          this.configs.customKeyframes.map((CustomCmpt, key) => (
+            <CustomCmpt
+              key={key}
+              subscribe={{
+                on: (name, callback) => this.on(name, callback),
+                once: (name, callback) => this.once(name, callback),
+                off: (name, callback) => this.off(name, callback),
+              }}
+              five={five}
+            />
+          ))}
       </ControllerContext.Provider>,
       configs.containter
     )

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

@@ -7,7 +7,7 @@ function InfoPanelImg({ url, children }: { url: string; children?: ReactNode })
   return (
     <div className="vreo-infoPanel vreo-infoPanel--img">
       {children}
-      <div className="vreo-infoPanelImg" style={{backgroundImage: `url(${url})`}} ></div>
+      <div className="vreo-infoPanelImg" style={{ backgroundImage: `url(${url})` }}></div>
     </div>
   )
 }
@@ -16,7 +16,7 @@ function InfoPanelVideo({ url, children }: { url: string; children?: ReactNode }
   return (
     <div className="vreo-infoPanel vreo-infoPanel--video">
       {children}
-      <video playsInline autoPlay className="vreo-infoPanelVideo" src={url} />
+      <div className="vreo-infoPanelWrapper"><video playsInline autoPlay className="vreo-infoPanelVideo" src={url} /></div>
     </div>
   )
 }
@@ -31,10 +31,12 @@ const Title = (props: TitleProps) => {
     return null
   }
 
-  return <div className="vreo-infoPanel-title">
-    <div className="vreo-infoPanel-t1">{props.title}</div>
-    <div className="vreo-infoPanel-t2">{props.subTitle}</div>
-  </div>
+  return (
+    <div className="vreo-infoPanel-title">
+      <div className="vreo-infoPanel-t1">{props.title}</div>
+      <div className="vreo-infoPanel-t2">{props.subTitle}</div>
+    </div>
+  )
 }
 
 export function InfoPanel() {
@@ -49,27 +51,47 @@ export function InfoPanel() {
       const { start, end, data } = keyframe
 
       const infoPanelData = data as InfoPanelData
-  
-
 
+      const { title, subTitle } = infoPanelData
       if (infoPanelData.type === InfoPanelTypeEnum.Image) {
-        controller.openDrawer({ content: <InfoPanelImg url={infoPanelData.url} />, height: '60vh' })
+        controller.openDrawer({
+          content: (
+            <InfoPanelImg url={infoPanelData.url}>
+              <Title title={title} subTitle={subTitle} />
+            </InfoPanelImg>
+          ),
+          height: '60vh',
+        })
       } else if (infoPanelData.type === InfoPanelTypeEnum.Video) {
-        controller.openDrawer({ content: <InfoPanelVideo url={infoPanelData.url} />, height: '60vh' })
+        controller.openDrawer({
+          content: (
+            <InfoPanelVideo url={infoPanelData.url}>
+              <Title title={title} subTitle={subTitle} />
+            </InfoPanelVideo>
+          ),
+          height: '60vh',
+        })
       }
       timeoutRef.current = setTimeout(() => controller.openDrawer(false), end - start)
     }
     controller.on(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>
-      ), height: '60vh' })
-    }})
+    // 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">
+    //         <Title title="场景联动抓拍图片" subTitle={'2022.02.17 14:00'} />
+    //       </InfoPanelVideo>
+    //       ),
+    //       height: '60vh',
+    //     })
+    //   },
+    // })
 
     return () => {
       controller.off(VreoKeyframeEnum.InfoPanel, callback)

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/Player/typings.ts

@@ -1,5 +1,7 @@
-import { ReactNode } from 'react';
-import { VreoKeyframeConfigMap } from '../typings/VreoUnit'
+import React, { ReactNode } from 'react';
+import { Subscribe, Five } from '@realsee/five';
+
+import { VreoKeyframeConfigMap, VreoKeyframeEvent } from '../typings/VreoUnit'
 
 export interface PlayerConfigs {
   containter?: ReactDOM.Container
@@ -17,4 +19,12 @@ export interface PlayerConfigs {
    * 如果需要在 底部面板添加自定义内容，可以传递个 React 组件。
    */
   customPanelChildren?: ReactNode
+  customKeyframes?: React.FC<CustomVreoKeyframeProps>[]
+}
+
+export type VreoSubscribe = Pick<Subscribe<VreoKeyframeEvent>, 'on' | 'once' | 'off'>
+
+export interface CustomVreoKeyframeProps {
+  subscribe: VreoSubscribe
+  five: Five
 }

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

package/resources/react/index.tsx

@@ -1,18 +1,23 @@
 import { unsafe__useFiveInstance } from '@realsee/five/react'
 import * as React from 'react'
 import { Player } from '../Player'
+import { PlayerConfigs } from '../Player/typings'
 import { VreoKeyframeEvent, VreoUnit } from '../typings/VreoUnit'
 
 const VreoContext = React.createContext<Player | null>(null)
 
-export const VreoProvider: React.FC = (props) => {
+export interface VreoProviderProps {
+  configs?: Partial<PlayerConfigs>
+} 
+
+export const VreoProvider: React.FC<VreoProviderProps> = (props ) => {
   const five = unsafe__useFiveInstance()
 
   const [player, setPlayer] = React.useState<Player | null>(null)
   const playerRef = React.useRef<Player | null>(null)
 
   React.useEffect(() => {
-    playerRef.current = new Player(five)
+    playerRef.current = new Player(five, props.configs || {})
     setPlayer(playerRef.current)
 
     return () => {

package/resources/typings/VreoUnit.ts

@@ -1,4 +1,4 @@
-import { Mode, Pose, WorkCubeImage, Work } from '@realsee/five'
+import { Mode, Pose } from '@realsee/five'
 import { CameraMovementEffect, Rotation } from '../fivePlugins/CameraMovementPlugin/typings'
 
 export enum VreoKeyframeEnum {
@@ -101,9 +101,14 @@ export interface VreoUnit {
  * 剧本事件
  */
 export type VreoKeyframeEvent = { [key in VreoKeyframeEnum]: (keyframe: VreoKeyframe) => void } & {
+  // 新数据载入完成
   loaded: (vreoUnit: VreoUnit) => void
+  // 语音状态 播放 -> 暂停
   paused: () => void
+  // 语音状态 暂停 -> 播放
   playing: () => void
+  // 未知的 剧本帧类型
+  unknownKeyframeType: (keyframe: Record<string, any>) => void
 }
 
 /**
@@ -133,6 +138,7 @@ export type UpdateVRPanoramaData = {
   allow_hosts: string[]
   certificate: string
   expire_at: string
+  // 动态场景
   dynamic_scene?: {
     images: {
       index: number
@@ -235,7 +241,9 @@ export enum InfoPanelTypeEnum {
 export type InfoPanelData = {
   type: InfoPanelTypeEnum
   url: string
-  tilte?: string
+  // 标题
+  title?: string
+  // 副标题
   subTitle?: string
 }