Getting Started — Vue Direct SDK — Five SDK

This tutorial uses @realsee/five directly in Vue (without any extra wrapper).

What you will learn in this chapter

Install and import the Five SDK in a Vue project.
Mount and dispose of Five SDK using onMounted/onUnmounted inside <script setup>.
Render a 3D space that adapts automatically as the window resizes.

Prerequisites

Quickly create a Vue project with Vite

npm create vite@9.1.1 my-vue-app -- --template vue
cd my-vue-app
npm install

npm create vite@9.1.1 my-vue-app -- --template vue-ts
cd my-vue-app
npm install

Install dependencies

npm install @realsee/five@6.8.9 three@0.117.1

Info

@realsee/five: the Five SDK rendering engine.
three@0.117.1: the graphics/math library that Five SDK depends on. Use this exact version.

Render a 3D space

In a Vue component, create a Five SDK instance, mount it to a container, load work.json, listen for window resize events, and clean up when the component is unmounted.

<template>
  <div style="width: 100vw; height: 100vh">
    <div ref="container" style="width: 100%; height: 100%; overflow: hidden" />
  </div>
  </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)

  const controller = new AbortController()
  fetch(workURL, { signal: controller.signal })
    .then((r) => r.json())
    .then((json) => five.load(parseWork(json)))
    .catch(() => {})

  const onResize = () => five.refresh()
  window.addEventListener('resize', onResize, false)

  onUnmounted(() => {
    controller.abort()
    window.removeEventListener('resize', onResize, false)
    five && five.dispose()
  })
})
</script>

<template>
  <div style="width: 100vw; height: 100vh">
    <div ref="container" style="width: 100%; height: 100%; overflow: hidden" />
  </div>
</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)

  const controller = new AbortController()
  fetch(workURL, { signal: controller.signal })
    .then((r) => r.json())
    .then((json) => five!.load(parseWork(json)))
    .catch(() => {})

  const onResize = () => five!.refresh()
  window.addEventListener('resize', onResize, false)

  onUnmounted(() => {
    controller.abort()
    window.removeEventListener('resize', onResize, false)
    five?.dispose()
  })
})
</script>

Start the development server:

npm run dev

Open the browser and confirm that the 3D space renders successfully. To learn about work.json, parseWork(json), and five.load(work), see the next chapter.