改变视角

本章你可以学习到

什么是 State。
在 Vue 中通过 five.setState 改变观察方向/位置。
监听 stateChange 并进行 UI 同步。

Vue 示例：模式切换

JavaScript
TypeScript

<template>
  <div style="width: 100vw; height: 100vh">
    <div ref="container" style="width: 100%; height: 100%; overflow: hidden" />
    <div style="position: fixed; bottom: 16px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center">
      <button :class="mode==='Panorama'?'btn btn-primary':'btn btn-outline-primary'" @click="switchMode('Panorama')">全景漫游</button>
      <button :class="mode==='Floorplan'?'btn btn-primary':'btn btn-outline-primary'" @click="switchMode('Floorplan')">空间总览</button>
    </div>
  </div>
  </template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { Five, parseWork } from '@realsee/five'

const container = ref(null)
const mode = ref('Panorama')
let five = null
const workURL = 'https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json'

onMounted(()=>{
  five = new Five()
  if (container.value) five.appendTo(container.value)
  fetch(workURL).then(r=>r.json()).then(json=>five.load(parseWork(json)))
  const onResize = () => five.refresh()
  const onState = (s) => { mode.value = s.mode }
  window.addEventListener('resize', onResize, false)
  five.on('stateChange', onState)
  onUnmounted(()=>{
    window.removeEventListener('resize', onResize, false)
    five.off('stateChange', onState)
    five.dispose()
  })
})

function switchMode(m){ five?.setState({ mode: m }) }
</script>

<template>
  <div style="width: 100vw; height: 100vh">
    <div ref="container" style="width: 100%; height: 100%; overflow: hidden" />
    <div style="position: fixed; bottom: 16px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center">
      <button :class="mode==='Panorama'?'btn btn-primary':'btn btn-outline-primary'" @click="switchMode('Panorama')">全景漫游</button>
      <button :class="mode==='Floorplan'?'btn btn-primary':'btn btn-outline-primary'" @click="switchMode('Floorplan')">空间总览</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { Five, Mode, parseWork } from '@realsee/five'

const container = ref<HTMLDivElement | null>(null)
const mode = ref<Mode>('Panorama')
let five: Five | null = null
const workURL = 'https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json'

onMounted(()=>{
  five = new Five()
  if (container.value) five.appendTo(container.value)
  fetch(workURL).then(r=>r.json()).then(json=>five!.load(parseWork(json)))
  const onResize = () => five!.refresh()
  const onState = (s: { mode: Mode }) => { mode.value = s.mode }
  window.addEventListener('resize', onResize, false)
  five.on('stateChange', onState)
  onUnmounted(()=>{
    window.removeEventListener('resize', onResize, false)
    five!.off('stateChange', onState)
    five!.dispose()
  })
})

function switchMode(m: Mode){ five?.setState({ mode: m }) }
</script>

Vue 示例：模式切换​

Vue 示例：模式切换