起步

本教程在 Vue 中直接使用 @realsee/five（不依赖额外封装）。

本章你可以学到

• 在 Vue 项目中安装并引入 Five SDK。
• 使用 <script setup> 中的 onMounted/onUnmounted 挂载与销毁 Five。
• 渲染一个三维空间并随窗口变化自适应。

准备工作

使用 Vite 快速创建 Vue 项目

JavaScript

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

TypeScript

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

安装依赖

npm install @realsee/five three@0.117

信息

• @realsee/five: Five 渲染引擎。
• three@0.117: Five 依赖的图形/数学库，请使用 0.117.x 版本。

渲染一个三维空间

在 Vue 组件中创建 Five 实例、挂载到容器、加载 work.json、监听窗口变化并在组件卸载时清理。

JavaScript

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

TypeScript

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

启动开发服务器：

npm run dev

访问浏览器并确认三维空间成功渲染。若需了解 work.json、parseWork(json) 与 five.load(work)，请查看下一章。