Displaying a 3D Space

Parse, load, and display Realsee work data with Five SDK in React.

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

What you will learn in this chapter

What a Work and work.json are.
The workflow of parseWork(json) and five.load(work).

Work and work.json

A 3D space is called a Work, described by work.json. You can obtain it through Realsee OpenAPI, or use a static asset as shown in the example. Use parseWork(json) to parse work.json into a Work object, then hand it off to five.load(work) for loading.

React Example

import { useEffect, useRef } from 'react'
import { Five, parseWork } from '@realsee/five'

const workURL = 'https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json'

export default function FiveDisplay() {
  const containerRef = useRef(null)
  const fiveRef = useRef(null)

  useEffect(() => {
    const five = new Five()
    fiveRef.current = five
    if (containerRef.current) five.appendTo(containerRef.current)

    let aborted = false
    fetch(workURL)
      .then((r) => r.json())
      .then((json) => !aborted && five.load(parseWork(json)))
      .catch(() => {})

    const onResize = () => five.refresh()
    window.addEventListener('resize', onResize, false)
    return () => {
      aborted = true
      window.removeEventListener('resize', onResize, false)
      fiveRef.current && fiveRef.current.dispose()
    }
  }, [])

  return <div ref={containerRef} style={{ width: '100vw', height: '100vh', overflow: 'hidden' }} />
}

import { useEffect, useRef } from 'react'
import { Five, parseWork } from '@realsee/five'

const workURL = 'https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json'

export default function FiveDisplay() {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const fiveRef = useRef<Five | null>(null)

  useEffect(() => {
    const five = new Five()
    fiveRef.current = five
    if (containerRef.current) five.appendTo(containerRef.current)

    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)
    return () => {
      aborted = true
      window.removeEventListener('resize', onResize, false)
      fiveRef.current?.dispose()
    }
  }, [])

  return <div ref={containerRef} style={{ width: '100vw', height: '100vh', overflow: 'hidden' }} />
}

To learn more about the structure of work.json, see the detailed walkthrough in the corresponding chapter of "Framework-free Development."