Displaying a 3D Space

Parse, load, and display Realsee work data with Five SDK in Vue without an additional wrapper.

Building on "Getting Started," this chapter explains in more detail how parseWork(json) and five.load(work) work together.

What you'll learn in this chapter

Understand what a Work and work.json are.
Understand the workflow of parseWork(json) and five.load(work).

Vue Example

<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>

<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>

For a more detailed example of the work.json structure, refer to the corresponding chapter in "Framework-Free Development."