展示三维空间

承接“起步”，本章进一步说明 parseWork(json) 与 five.load(work) 的配合方式。

本章你可以学习到

• 了解什么是 Work 与 work.json。
• 了解 parseWork(json)、five.load(work) 的工作流程。

Vue 示例

JavaScript

<template>
  <div ref="container" style="width: 100vw; height: 100vh; overflow: hidden" />
</template>

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

const container = ref(null)
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)
  let aborted = false
  fetch(workURL)
    .then(r=>r.json())
    .then(json=>{ if(!aborted) five.load(parseWork(json)) })
    .catch(()=>{})
  const onResize = () => five.refresh()
  window.addEventListener('resize', onResize, false)
  onUnmounted(()=>{
    aborted = true
    window.removeEventListener('resize', onResize, false)
    five && five.dispose()
  })
})
</script>

TypeScript

<template>
  <div ref="container" style="width: 100vw; height: 100vh; overflow: hidden" />
</template>

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

const container = ref<HTMLDivElement | null>(null)
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)
  let aborted = false
  fetch(workURL)
    .then(r=>r.json())
    .then(json=>{ if(!aborted) five!.load(parseWork(json)) })
    .catch(()=>{})
  const onResize = () => five!.refresh()
  window.addEventListener('resize', onResize, false)
  onUnmounted(()=>{
    aborted = true
    window.removeEventListener('resize', onResize, false)
    five?.dispose()
  })
})
</script>

若需进一步了解 work.json 的结构示例，可参考“无框架模式开发”对应章节中的详解。