展示三维空间

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

本章你可以学习到

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

Work 与 work.json

一个三维空间称为一个 Work，由 work.json 描述。你可以从开放平台接口获取，也可以像示例一样使用静态资源。使用 parseWork(json) 将 work.json 解析为 Work 对象，再交由 five.load(work) 进行加载。

React 示例

JavaScript

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' }} />
}

TypeScript

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' }} />
}

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