Alpha

.gitignore

@@ -5,6 +5,7 @@
 /.pnp
 .pnp.js
 /.idea
+/.vscode
 
 # testing
 /coverage

.hintrc

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "image-alt": "off"
+      }
+    ]
+  }
+}

CHANGELOG.md

@@ -1,24 +1,42 @@
 # CHANGELOG
+# 2.0.0
+- fix: 重新实现了运镜功能，修复了运镜掉帧的问题
+- break-change：修复了模型态切换全景态时的目标点位为0时，有可能不会真正移动到目标位置的问题。该问题的修复会导致之前的一些基于此bug制作的导览出现问题，需要重新制作。
 
-#0.2.0-alpha.25
+# 1.0.0-alpha.21
+- fix: 多段BgMusic播放问题
+
+# 1.0.0-alpha.19
+- fix: 多段BgMusic可以重复播放
+
+# 1.0.0-alpha.18
+- fix: 修复无音频版本中途播放会从头开始的问题
+
+# 1.0.0-alpha.1
+- feat: css样式适配: 手机横竖屏, pad, pc
+- feat: 新增两种波浪风格: 'wave' | 'solid'
+- feat: 标签调用dna插件
+- fix: 图片/视频 弹窗UI问题
+
+# 0.2.0-alpha.25
 - feat: rotate 不指定顺时针或者逆时针，则按照锐角交互。
 
-#0.2.0-alpha.24
+# 0.2.0-alpha.24
 - fix: 修复 CSS3DRender 与插件库样式冲突问题。
 - fix: 修复示例 wrapper 定位问题。
 
-#0.2.0-alpha.23
+# 0.2.0-alpha.23
 - fix: 修复21版本针对非旋转运镜使用了旋转速度问题修复的代码丢失问题。
 
-#0.2.0-alpha.22
+# 0.2.0-alpha.22
 - fix: 修复运镜顺时针逆时针反向问题。
 
-#0.2.0-alpha.21
+# 0.2.0-alpha.21
 - fix: 修复非旋转运镜使用了旋转速度问题。
 
-#0.2.0-alpha.20
+# 0.2.0-alpha.20
 - fix: 修复 `paused` 事件抛出 `ended` 回调带来的重复抛出事件问题。
 
-#0.2.0-alpha.19
+# 0.2.0-alpha.19
 - feat: 新增 `getCurrentTime()` 方法，支持实时获取当前播放时间点；
 - feat: 新增 `ended` 标识，当检测到 video 实例 `ended` 以后会在 `paused` 事件里抛出 `true` 回调。

README.md

@@ -15,53 +15,65 @@
 
 ## 安装说明
 
-推荐使用 `npm` 或 `yarn` 的方式进行安装。由于 `@realsee/vreo` 依赖 [Five](https://unpkg.com/@realsee/five/docs/index.html) 和 [React](https://reactjs.org/) ，请务必同时安装相关依赖：
-
-```bash
-$ npm install @realsee/vreo @realsee/five react react-dom --save
-# or
-$ yarn add @realsee/vreo @realsee/five react react-dom
-```
+ - 由于 `@realsee/vreo` 依赖 [Five](https://unpkg.com/@realsee/five/docs/index.html) 和 [React](https://reactjs.org/) ，请务必同时安装相关依赖  
+ - 根据项目的包管理器来安装：
+    ``` bash
+    # pnpm
+    pnpm install @realsee/vreo @realsee/five react react-dom --save
+    # npm
+    npm install @realsee/vreo @realsee/five react react-dom --save
+    # yarn
+    yarn add @realsee/vreo @realsee/five react react-dom
+    ```
 
 ## 快速上手
+引入样式：
 
+```css
+  /* @file xxx.css */
+  @import '@realsee/vreo/stylesheets/default.css';
+```
+或
 ```jsx
+  /* @file xxx.tsx | xxx.jsx */
+  import '@realsee/vreo/stylesheets/default.css';
+```
+examples:
+```tsx
+/* @file index.tsx | index.jsx */
 import * as React from 'react'
 import { Five } from '@realsee/five'
 import { Player } from '@realsee/vreo'
+import '@realsee/vreo/stylesheets/default.css';
 
 // 创建 Five 实例
 const five = new Five({
   /* Five 配置项 */
 })
 
 // 创建 Player 实例
-const vreoplayer = new Player(five)
+const vreoPlayer = new Player(five)
 
 // 异步请求剧本数据
 const vreoUnit = await fetch('api/**/**')
 
 // 加载剧本数据（剧本数据见下文）
-vreoplayer.load(vreoUnit)
+vreoPlayer.load(vreoUnit)
 
 // 播放
-vreoplayer.play()
+vreoPlayer.play()
 
 // 暂停
-vreoplayer.pause()
-```
-
-引入样式：
-
-```css
-@import '@realsee/vreo/stylesheets/default.css';
+vreoPlayer.pause()
 ```
 
 ## React Context & Hooks 模式使用
 
 **Vreo** 支持 [React Context](https://reactjs.org/docs/context.html) 与 [Hooks](https://reactjs.org/docs/hooks-intro.html) 相配合的模式使用，简单样例如下：
 
-```jsx
+```tsx
+/* @file App.tsx */
+
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { Five, Work, parseWork } from '@realsee/five'
@@ -78,20 +90,21 @@ const PlayButton: React.FC = () => {
   const { load, play, pause } = useVreoAction()
 
   return (
-    <button
-      onClick={async () => {
-        // 获取讲房数据
-        const vreoUnit = await fetch('api/**/**')
-        // 载入数据
-        await load(vreoUnit)
-        // 播放
-        play()
-        // 暂停
-        pause()
-      }}
-    >
-      讲解
-    </button>
+    <>
+      <button
+        onClick={async () => {
+          // 获取讲房数据
+          const vreoUnit = await fetch('api/**/**')
+          // 载入数据
+          await load(vreoUnit)
+          // 播放
+          play()
+        }}
+      >
+        讲解
+      </button>
+      <button onClick={() => pause()}>暂停</button>
+    </>
   )
 }
 
@@ -559,7 +572,4 @@ vreoplayer.load(vreoUnit, 0, true)
 
 ```
 
-
-## API 文档
-
-详细的 API 文档请参考：[Vreo API](https://realsee.js.org/vreo/index.html) 。
+Enjoy it!

__test__/App.tsx

@@ -2,13 +2,42 @@ import { unsafe__useFiveInstance, useFiveWork } from '@realsee/five/react'
 import * as React from 'react'
 import { Player } from '../resources/Player'
 import { VreoUnit } from '../typedoc/Player'
-import { data } from './data/vreo-units/vreo-unit-a'
+// import { data } from './data/vreo-units/vreo-unit-a'
+
+// import { data } from './data/vreo-units/vreo-XQeernmw'
+
+// import { data } from './data/vreo-units/vreo-unit-test-video'
+
+// 弹层视频
+// import { data1 as data } from './data/vreo-units/vreo-unit-a'
+
+import { data } from './data/vreo-units/vreo-unit-PjVVGxn2'
 
 // 无视频版本
 // import { data } from './data/vreo-units/vreo-unit-b'
-//
+
 // import { data } from './data/vreo-units/vreo-unit-tmp'
 
+// 头像音频
+// import { data } from './data/vreo-units/vreo-unit-b-avatar'
+
+
+// 啥都没有版本
+// import { data } from './data/vreo-units/vreo-unit-b-noaudio'
+
+// import  {data}  from './data/vreo-units/vreo-unit-muti-audio-test'
+
+// import  {data}  from './data/vreo-units/vreo-unit-taibao'
+
+// import  {data}  from './data/vreo-units/vreo-unit-single-bgm'
+
+// video effect
+// import  {data}  from './data/vreo-units/vreo-unit-videoEffect'
+
+// vivo 视频黑屏
+// import {data} from './data/vreo-units/vreo-unit-o4bb0mxR'
+
+
 
 enum PlayerState {
   notReady = 'notReady',
@@ -17,6 +46,7 @@ enum PlayerState {
   playing = 'playing',
 }
 
+
 export function App() {
   const ref = React.useRef<Player>()
   const five = unsafe__useFiveInstance()
@@ -27,15 +57,20 @@ export function App() {
     const player = new Player(five)
     ref.current = player
     setState(PlayerState.ready)
+    player.on('loaded', () => console.log('loaded'))
     player.on('paused', () => setState(PlayerState.paused))
     player.on('playing', () => setState(PlayerState.playing))
+    player.on('ended', () => console.log('ended'))
+    player.on('playing', () => console.log('playing'))
+    player.on('paused', (ended) => console.log({ended}))
     Object.assign(window, { $player: player })
   }, [])
 
   return (
     <div className="btns">
       <button
         onClick={async () => {
+          console.log(1, Date.now())
           if (state === PlayerState.ready) {
             ref.current?.show()
             await ref.current?.load(data as VreoUnit)

__test__/PlayController/main.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { ResponsiveFullScreenFiveCanvas } from '../components/ResponsiveFullScreenFiveCanvas'
 import work from './work.json'
+// import work from '../data/works/XQeernmw.json'
 
 import '../index.css'
 import { App } from './App'

__test__/data/midea/allhouse.json

@@ -7,7 +7,7 @@
     "duration": 81200,
     "start": 0,
     "end": 81200,
-    "url": "https://test-vr-public.realsee-cdn.com/vrframework/test/audio_merged/LEJhnm1R/aitalk_text/merged.mp4"
+    "url": "https://test-vr-public.realsee-cdn.cn/vrframework/test/audio_merged/LEJhnm1R/aitalk_text/merged.mp4"
   },
   "keyframes": [
     {