状态录制
上一章回顾: 改变视角
- 你了解什么是 State, 以及如何获取和修改。
- 通过 State 完成了自动环视的功能。
本章你可以学习到
- 通过 State 完成用户操作的录制。
- 通过 State 还原用户操作画面。
准备工作
和上一章节一样,我们新建一个目录(src/3.recording-state
)以及对应的 html 文件 以及 js 或 ts 文件。
js 或 ts 文件可以先拷贝上一章节的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>状态录制 | Recording state</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body #app {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index"></script>
</body>
</html>
- JavaScript
- TypeScript
import { ref, onBeforeUnmount } from "vue";
function useWindowDimensions() {
const width = ref(window.innerWidth);
const height = ref(window.innerHeight);
const listener = () => {
width.value = window.innerWidth;
height.value = window.innerHeight;
};
window.addEventListener("resize", listener, false);
onBeforeUnmount(() => {
window.removeEventListener("resize", listener, false);
});
return { width, height };
}
export { useWindowDimensions };
src/3.recording-state/ModeController.vue
<template>
<nav class="navbar fixed-bottom navbar-light bg-light">
<div class="container-fluid justify-content-center">
<div class="btn-group">
<button
:class="
state.mode == 'Panorama'
? 'btn btn-primary active'
: 'btn btn-primary'
"
@click="() => setState({ mode: Five.Mode.Panorama })"
>
全景漫游
</button>
<button
:class="
state.mode == 'Panorama'
? 'btn btn-primary'
: 'btn btn-primary active'
"
@click="() => setState({ mode: Five.Mode.Floorplan })"
>
空间总览
</button>
</div>
</div>
</nav>
</template>
<script setup>
import { useFiveCurrentState } from "@realsee/five/vue";
import { Five } from "@realsee/five";
const [state, setState] = useFiveCurrentState();
</script>
src/3.recording-state/LookAroundController.vue
<template>
<div class="card position-fixed m-2 top-0 end-0">
<button class="btn btn-light" v-show="isShow" @click="startFunc">
<i class="bi bi-arrow-repeat"></i>
</button>
<button class="btn btn-light" v-show="!isShow" @click="stopFunc">
<i class="bi bi-pause"></i>
</button>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useFiveCurrentState } from "@realsee/five/vue";
const [currentState, setState] = useFiveCurrentState();
const isShow = ref(true);
let timer;
const startFunc = () => {
window.clearInterval(timer);
isShow.value = false;
timer = window.setInterval(() => {
setState({ longitude: currentState.value.longitude + Math.PI / 360 });
}, 16);
};
const stopFunc = () => {
window.clearInterval(timer);
isShow.value = true;
};
</script>
src/3.recording-state/App.vue
<template>
<FiveProvider :work="work">
<FiveCanvas :width="width" :height="height" />
<ModeController />
<LookAroundController />
</FiveProvider>
</template>
<script setup lang="ts">
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
import { parseWork } from "@realsee/five";
import { ref } from "vue";
import { useWindowDimensions } from "./useWindowDimensions";
import ModeController from "./ModeController.vue";
import LookAroundController from "./LookAroundController.vue";
const work = ref();
const workURL =
"https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";
fetch(workURL)
.then((response) => response.text())
.then((text) => (work.value = parseWork(text)));
const { width, height } = useWindowDimensions();
</script>