快速开始

线上尝试

你可以使用StackBlitz快速上手我们的示例。

Vanilla JavaScript

快速使用JavaScript开启三维的世界

Vanilla TypeScript

快速使用TypeScript开启三维的世界

React

使用React开启三维应用的快速构建

React TypeScript

使用React Typescript开启三维应用的快速构建

Vue

使用Vue开启三维应用的快速构建

Vue TypeScript

使用Vue Typescript开启三维应用的快速构建

创建一个 Five 应用

前提条件

熟悉至少一种前端框架，如 React、Vue 等的开发
熟悉 Node.js，并安装了 14.0.0 以上版本的 Node.js 开发环境
为了快速演示开发，本文档推荐使用 vite 作为脚手架快速开启项目

注意

Five 基于 Three.js, 在使用 Five 时需要同步安装 Three.js 依赖。目前依赖的 Three.js 版本为 115 ~ 117。

浏览器兼容性

Five 所依赖的 Three.js 是基于现代浏览器 WebGL 能力实现的。其依赖现代浏览器的运行时环境，以下是Five 在主流浏览器上的兼容性列表：

Safari	Safari on iOS	Chrome	Chrome for Android	Edge	Firefox
>= 9	>= 9	>= 49	>= 93	>= 13	>= 45

快速开发

使用JavaScript开发

使用 vite 初始化项目

npm
Yarn
pnpm

npm init vite@latest my-five-vanilla-js-app -- --template vanilla

yarn create vite@latest my-five-vanilla-js-app --template vanilla

pnpm create vite@latest my-five-vanilla-js-app --template vanilla

npm
Yarn
pnpm

cd my-five-vanilla-js-app
npm install @realsee/five @realsee/open-works three@0.117.1

cd my-five-vanilla-js-app
yarn add @realsee/five @realsee/open-works three@0.117.1

cd my-five-vanilla-js-app
pnpm add @realsee/five @realsee/open-works three@0.117.1

修改 html 的 viewport 如下：（注意 viewport 的设置会影响三维空间尺寸的展示效果）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    // highlight-start
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover, user-scalable=no"
    />
    // highlight-end
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

修改main.js如下：

import workJSON from '@realsee/open-works/virtual/81RojBlJQdVTglNNMr/work.json'
import { Five } from '@realsee/five'
import './style.css'

const $app = document.querySelector('#app')

// five初始化参数请参考
// https://unpkg.com/@realsee/five@latest/docs/interfaces/five.FiveInitArgs.html
const five = new Five({
  imageOptions: {
    // 初始512开启动态瓦片加载，可提升点位加载速度
    size: 512,
  },
  textureOptions: {
    // 关闭模型贴图自动缩放，加载高精度模型贴图，
    // 注意，低性能的机器大模型场景容易崩溃
    autoResize: false,
  },
})

five.load(workJSON)

five.appendTo($app)

// 当容器div尺寸变化时进行画布刷新
window.addEventListener('resize', () => five.refresh())

// 添加切换按钮
const $button = document.createElement('button')

$button.innerText = '切换成模型态'

$button.addEventListener('click', (ev) => {
  console.log(ev)
  // 当前为全景模式
  if (five.getCurrentState().mode === Five.Mode.Panorama) {
    five.changeMode(Five.Mode.Floorplan)
    return
  }
  // 当前为模型态
  if (five.getCurrentState().mode === Five.Mode.Floorplan) {
    five.changeMode(Five.Mode.Panorama)
    return
  }
})

five.on('modeChange', (mode) => {
  if (mode === Five.Mode.Panorama) {
    $button.innerText = '切换成模型态'
  }
  if (mode === Five.Mode.Floorplan) {
    $button.innerText = '切换成全景态'
  }
})

$button.classList.add('btn')

$app.appendChild($button)

修改style.css如下：

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#app {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 0 10px;
  height: 30px;
}

运行项目

npm
Yarn
pnpm

npm run dev

yarn dev

pnpm run dev

打开浏览器访问http://localhost:5173/，即可看到效果，如下所示：

使用TypeScript开发

使用 vite 初始化项目

npm
Yarn
pnpm

npm init vite@latest my-five-vanilla-ts-app -- --template vanilla-ts

yarn create vite@latest my-five-vanilla-ts-app --template vanilla-ts

pnpm create vite@latest my-five-vanilla-ts-app --template vanilla-ts

npm
Yarn
pnpm

cd my-five-vanilla-ts-app
npm install @realsee/five @realsee/open-works three@0.117.1

cd my-five-vanilla-ts-app
yarn add @realsee/five @realsee/open-works three@0.117.1

cd my-five-vanilla-ts-app
pnpm add @realsee/five @realsee/open-works three@0.117.1

修改 html 的 viewport 如下：（注意 viewport 的设置会影响三维空间尺寸的展示效果）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    // highlight-start
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover, user-scalable=no"
    />
    // highlight-end
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

修改src/main.ts如下：

// @ts-ignore
import workJSON from '@realsee/open-works/virtual/816lPVZQkQDF5XOpPo/work.json'
import { Five } from '@realsee/five'
import './style.css'

const $app = document.querySelector<HTMLElement>('#app') as HTMLElement

// five初始化参数请参考
// https://unpkg.com/@realsee/five@latest/docs/interfaces/five.FiveInitArgs.html
const five = new Five({
  imageOptions: {
    // 初始512开启动态瓦片加载，可提升点位加载速度
    size: 512,
  },
  textureOptions: {
    // 关闭模型贴图自动缩放，加载高精度模型贴图，
    // 注意，低性能的机器大模型场景容易崩溃
    autoResize: false,
  },
})

five.load(workJSON)

five.appendTo($app)

// 当容器div尺寸变化时进行画布刷新
window.addEventListener('resize', () => five.refresh())

// 添加切换按钮
const $button = document.createElement('button')

$button.innerText = '切换成模型态'

$button.addEventListener('click', (ev) => {
  console.log(ev)
  // 当前为全景模式
  if (five.getCurrentState().mode === Five.Mode.Panorama) {
    five.changeMode(Five.Mode.Floorplan)
    return
  }
  // 当前为模型态
  if (five.getCurrentState().mode === Five.Mode.Floorplan) {
    five.changeMode(Five.Mode.Panorama)
    return
  }
})

five.on('modeChange', (mode) => {
  if (mode === Five.Mode.Panorama) {
    $button.innerText = '切换成模型态'
  }
  if (mode === Five.Mode.Floorplan) {
    $button.innerText = '切换成全景态'
  }
})

$button.classList.add('btn')

$app.appendChild($button)

修改style.css如下：

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#app {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 0 10px;
  height: 30px;
}

运行项目

npm
Yarn
pnpm

npm run dev

yarn dev

pnpm run dev

打开浏览器访问http://localhost:5173/，即可看到效果，如下所示：

使用React JavaScript开发

使用 vite 初始化项目

npm
Yarn
pnpm

npm init vite@latest my-five-react-js-app -- --template react-js

yarn create vite@latest my-five-react-js-app --template react-js

pnpm create vite@latest my-five-react-js-app --template react-js

npm
Yarn
pnpm

cd my-five-react-js-app
npm install @realsee/five @realsee/open-works three@0.117.1

cd my-five-react-js-app
yarn add @realsee/five @realsee/open-works three@0.117.1

cd my-five-react-js-app
pnpm add @realsee/five @realsee/open-works three@0.117.1

修改 html 的 viewport 如下：（注意 viewport 的设置会影响三维空间尺寸的展示效果）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    // highlight-start
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover, user-scalable=no"
    />
    // highlight-end
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

修改src/main.jsx如下：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

修改src/index.css如下：

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

修改src/App.jsx如下：

import workJSON from '@realsee/open-works/virtual/81RojBlJQdVTglNNMr/work.json'
import { createFiveProvider } from '@realsee/five/react'
import { ResponsiveFiveCanvas } from './components/ResponsiveFiveCanvas'
import { ToggleFiveModeButton } from './components/ToggleFiveModeButton'
import './App.css'

// five初始化参数请参考
// https://unpkg.com/@realsee/five@latest/docs/interfaces/five.FiveInitArgs.htmlF
const FiveProvider = createFiveProvider({
  imageOptions: {
    // 初始512开启动态瓦片加载，可提升点位加载速度
    size: 512,
  },
  textureOptions: {
    // 关闭模型贴图自动缩放，加载高精度模型贴图，
    // 注意，低性能的机器大模型场景容易崩溃
    autoResize: false,
  },
})

function App() {
  return (
    <FiveProvider initialWork={workJSON}>
      <ResponsiveFiveCanvas />
      <ToggleFiveModeButton />
    </FiveProvider>
  )
}

export default App

修改src/App.css如下：

#app {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

新建src/components/ResponsiveFiveCanvas.jsx如下：

import { useCallback, useState, useEffect } from 'react'
import { FiveCanvas } from '@realsee/five/react'

/**
 * 获取当前窗口的尺寸
 */
function getWindowDimensions() {
  return { width: window.innerWidth, height: window.innerHeight }
}

/**
 * React Hook: 获取当前窗口的尺寸
 */
function useWindowDimensions() {
  const [size, setSize] = useState(getWindowDimensions)

  const listener = useCallback(() => {
    setSize(getWindowDimensions())
  }, [setSize, getWindowDimensions])

  useEffect(() => {
    window.addEventListener('resize', listener, false)
    return () => window.removeEventListener('resize', listener, false)
  }, [listener])

  return size
}

export const ResponsiveFiveCanvas = () => {
  const size = useWindowDimensions()
  return <FiveCanvas {...size} />
}

新建src/components/ToggleFiveModeButton.jsx如下：

import { Five } from '@realsee/five'
import { useFiveCurrentState } from '@realsee/five/react'
import { useCallback } from 'react'
import style from './style.module.css'

export const ToggleFiveModeButton = () => {
  const [currentState, setState] = useFiveCurrentState()

  const onClick = useCallback(() => {
    if (currentState.mode === Five.Mode.Panorama) {
      setState({ mode: Five.Mode.Floorplan })
      return
    }

    if (currentState.mode === Five.Mode.Floorplan) {
      setState({ mode: Five.Mode.Panorama })
      return
    }
  }, [currentState.mode])

  return (
    <button className={style.btn} onClick={onClick}>
      {currentState.mode === Five.Mode.Panorama && <span>切换到模型态</span>}
      {currentState.mode === Five.Mode.Floorplan && <span>切换到全景态</span>}
    </button>
  )
}

新建src/components/style.module.css如下：

.btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 0 10px;
  height: 30px;
}

运行项目

npm
Yarn
pnpm

npm run dev

yarn dev

pnpm run dev

打开浏览器访问http://localhost:5173/，即可看到效果，如下所示：

使用React TypeScript开发

使用 vite 初始化项目

npm
Yarn
pnpm

npm init vite@latest my-five-react-ts-app -- --template react-ts

yarn create vite@latest my-five-react-ts-app --template react-ts

pnpm create vite@latest my-five-react-ts-app --template react-ts

npm
Yarn
pnpm

cd my-five-react-ts-app
npm install @realsee/five @realsee/open-works three@0.117.1

cd my-five-react-ts-app
yarn add @realsee/five @realsee/open-works three@0.117.1

cd my-five-react-ts-app
pnpm add @realsee/five @realsee/open-works three@0.117.1

修改 html 的 viewport 如下：（注意 viewport 的设置会影响三维空间尺寸的展示效果）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    // highlight-start
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover, user-scalable=no"
    />
    // highlight-end
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

修改src/main.tsx如下：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

修改src/index.css如下：

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#root {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

修改src/App.tsx如下：

// @ts-ignore
import workJSON from '@realsee/open-works/virtual/81gmMq5a7zbF9leWMk/work.json'
import { createFiveProvider } from '@realsee/five/react'
import { ResponsiveFiveCanvas } from './components/ResponsiveFiveCanvas'
import { ToggleFiveModeButton } from './components/ToggleFiveModeButton'

// five初始化参数请参考
// https://unpkg.com/@realsee/five@latest/docs/interfaces/five.FiveInitArgs.html
const FiveProvider = createFiveProvider({
  imageOptions: {
    // 初始512开启动态瓦片加载，可提升点位加载速度
    size: 512,
  },
  textureOptions: {
    // 关闭模型贴图自动缩放，加载高精度模型贴图，
    // 注意，低性能的机器大模型场景容易崩溃
    autoResize: false,
  },
})

function App() {
  return (
    <FiveProvider initialWork={workJSON}>
      <ResponsiveFiveCanvas />
      <ToggleFiveModeButton />
    </FiveProvider>
  )
}

export default App

修改src/App.css如下：

#app {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

新建src/components/ResponsiveFiveCanvas.tsx如下：

import { useCallback, useState, useEffect } from 'react'
import { FiveCanvas } from '@realsee/five/react'

/**
 * 获取当前窗口的尺寸
 */
function getWindowDimensions() {
  return { width: window.innerWidth, height: window.innerHeight }
}

/**
 * React Hook: 获取当前窗口的尺寸
 */
function useWindowDimensions() {
  const [size, setSize] = useState(getWindowDimensions)

  const listener = useCallback(() => {
    setSize(getWindowDimensions())
  }, [setSize, getWindowDimensions])

  useEffect(() => {
    window.addEventListener('resize', listener, false)
    return () => window.removeEventListener('resize', listener, false)
  }, [listener])

  return size
}

export const ResponsiveFiveCanvas = () => {
  const size = useWindowDimensions()
  return <FiveCanvas {...size} />
}

新建src/components/ToggleFiveModeButton/index.tsx如下：

import { Five } from '@realsee/five'
import { useFiveCurrentState } from '@realsee/five/react'
import { useCallback } from 'react'
import style from './style.module.css'

export const ToggleFiveModeButton = () => {
  const [currentState, setState] = useFiveCurrentState()

  const onClick = useCallback(() => {
    if (currentState.mode === Five.Mode.Panorama) {
      setState({ mode: Five.Mode.Floorplan })
      return
    }

    if (currentState.mode === Five.Mode.Floorplan) {
      setState({ mode: Five.Mode.Panorama })
      return
    }
  }, [currentState.mode])

  return (
    <button className={style.btn} onClick={onClick}>
      {currentState.mode === Five.Mode.Panorama && <span>切换到模型态</span>}
      {currentState.mode === Five.Mode.Floorplan && <span>切换到全景态</span>}
    </button>
  )
}

新建src/components/ToggleFiveModeButton/style.module.css如下：

.btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 0 10px;
  height: 30px;
}

运行项目

npm
Yarn
pnpm

npm run dev

yarn dev

pnpm run dev

打开浏览器访问http://localhost:5173/，即可看到效果，如下所示：

使用Vue JavaScript开发

提示

Vue JavaScript开发需要使用 Vue 3，请确保你的项目中已经安装了 Vue 3。

使用 vite 初始化项目

npm
Yarn
pnpm

npm init vite@latest my-five-vue-js-app -- --template vue-js

yarn create vite@latest my-five-vue-js-app --template vue-js

pnpm create vite@latest my-five-vue-js-app --template vue-js

npm
Yarn
pnpm

cd my-five-vue-js-app
npm install @realsee/five @realsee/open-works three@0.117.1

cd my-five-vue-js-app
yarn add @realsee/five @realsee/open-works three@0.117.1

cd my-five-vue-js-app
pnpm add @realsee/five @realsee/open-works three@0.117.1

修改 html 的 viewport 如下：（注意 viewport 的设置会影响三维空间尺寸的展示效果）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    // highlight-start
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover, user-scalable=no"
    />
    // highlight-end
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

修改src/main.js如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

修改src/style.css如下：

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#app {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

修改src/App.vue如下：

<script setup>
import { FiveProvider } from '@realsee/five/vue'
import work from '@realsee/open-works/virtual/81RojBlJQdVTglNNMr/work.json'
import ResponsiveFiveCanvas from './components/ResponsiveFiveCanvas.vue'
import ToggleFiveModeButton from './components/ToggleFiveModeButton.vue'

// five初始化参数请参考
// https://unpkg.com/@realsee/five@latest/docs/interfaces/five.FiveInitArgs.html
const fiveInitArgs = {
  imageOptions: {
    // 初始512开启动态瓦片加载，可提升点位加载速度
    size: 512,
  },
  textureOptions: {
    // 关闭模型贴图自动缩放，加载高精度模型贴图，
    // 注意，低性能的机器大模型场景容易崩溃
    autoResize: false,
  },
}
</script>

<template>
  <FiveProvider :fiveInitArgs="fiveInitArgs" :initialWork="work">
    <ResponsiveFiveCanvas />
    <ToggleFiveModeButton />
  </FiveProvider>
</template>

新建src/components/ResponsiveFiveCanvas.vue如下：

<script setup>
import { FiveCanvas } from '@realsee/five/vue'

import { ref, onBeforeUnmount } from 'vue'

function useWindowDimensions() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)

  const listener = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  window.addEventListener('resize', listener, false)
  onBeforeUnmount(() => {
    window.removeEventListener('resize', listener, false)
  })
  return { width, height }
}

const { width, height } = useWindowDimensions()
</script>

<template><FiveCanvas :width="width" :height="height" /></template>

新建src/components/ToggleFiveModeButton.vue如下：

<script setup>
import { Five } from '@realsee/five'
import { useFiveCurrentState } from '@realsee/five/vue'
import { computed } from 'vue'

const [currentState, setState] = useFiveCurrentState()

const text = computed(() => (currentState.value.mode === Five.Mode.Floorplan ? '切换到全景态' : '切换到模型态'))

const onClick = () => {
  if (currentState.value.mode === Five.Mode.Panorama) {
    setState({ mode: Five.Mode.Floorplan })
    return
  }

  if (currentState.value.mode === Five.Mode.Floorplan) {
    setState({ mode: Five.Mode.Panorama })
    return
  }
}
</script>

<template>
  <button @click="onClick" class="btn">{{ text }}</button>
</template>

<style scoped>
.btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 0 10px;
  height: 30px;
}
</style>

运行项目

npm
Yarn
pnpm

npm run dev

yarn dev

pnpm run dev

打开浏览器访问http://localhost:5173/，即可看到效果，如下所示：

使用Vue TypeScript开发

提示

Vue TypeScript开发需要使用 Vue 3，请确保你的项目中已经安装了 Vue 3。

使用 vite 初始化项目

npm
Yarn
pnpm

npm init vite@latest my-five-vue-ts-app -- --template vue-ts

yarn create vite@latest my-five-vue-ts-app --template vue-ts

pnpm create vite@latest my-five-vue-ts-app --template vue-ts

npm
Yarn
pnpm

cd my-five-vue-ts-app
npm install @realsee/five @realsee/open-works three@0.117.1

cd my-five-vue-ts-app
yarn add @realsee/five @realsee/open-works three@0.117.1

cd my-five-vue-ts-app
pnpm add @realsee/five @realsee/open-works three@0.117.1

修改 html 的 viewport 如下：（注意 viewport 的设置会影响三维空间尺寸的展示效果）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    // highlight-start
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover, user-scalable=no"
    />
    // highlight-end
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

修改src/main.ts如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

修改src/style.css如下：

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#app {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

修改src/App.vue如下：

<script setup lang="ts">
import { FiveProvider } from '@realsee/five/vue'
import work from '@realsee/open-works/virtual/81RojBlJQdVTglNNMr/work.json'
import ResponsiveFiveCanvas from './components/ResponsiveFiveCanvas.vue'
import ToggleFiveModeButton from './components/ToggleFiveModeButton.vue'

// five初始化参数请参考
// https://unpkg.com/@realsee/five@latest/docs/interfaces/five.FiveInitArgs.html
const fiveInitArgs = {
  imageOptions: {
    // 初始512开启动态瓦片加载，可提升点位加载速度
    size: 512,
  },
  textureOptions: {
    // 关闭模型贴图自动缩放，加载高精度模型贴图，
    // 注意，低性能的机器大模型场景容易崩溃
    autoResize: false,
  },
}
</script>

<template>
  <FiveProvider :fiveInitArgs="fiveInitArgs" :initialWork="work">
    <ResponsiveFiveCanvas />
    <ToggleFiveModeButton />
  </FiveProvider>
</template>

新建src/components/ResponsiveFiveCanvas.vue如下：

<script setup lang="ts">
import { FiveCanvas } from '@realsee/five/vue'

import { ref, onBeforeUnmount } from 'vue'

function useWindowDimensions() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)

  const listener = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }

  window.addEventListener('resize', listener, false)
  onBeforeUnmount(() => {
    window.removeEventListener('resize', listener, false)
  })
  return { width, height }
}

const { width, height } = useWindowDimensions()
</script>

<template><FiveCanvas :width="width" :height="height" /></template>

新建src/components/ToggleFiveModeButton.vue如下：

<script setup lang="ts">
import { Five } from '@realsee/five'
import { useFiveCurrentState } from '@realsee/five/vue'
import { computed } from 'vue'

const [currentState, setState] = useFiveCurrentState()

const text = computed(() => (currentState.value.mode === Five.Mode.Floorplan ? '切换到全景态' : '切换到模型态'))

const onClick = () => {
  if (currentState.value.mode === Five.Mode.Panorama) {
    setState({ mode: Five.Mode.Floorplan })
    return
  }

  if (currentState.value.mode === Five.Mode.Floorplan) {
    setState({ mode: Five.Mode.Panorama })
    return
  }
}
</script>

<template>
  <button @click="onClick" class="btn">{{ text }}</button>
</template>

<style scoped>
.btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  padding: 0 10px;
  height: 30px;
}
</style>

运行项目

npm
Yarn
pnpm

npm run dev

yarn dev

pnpm run dev

打开浏览器访问http://localhost:5173/，即可看到效果，如下所示：

线上尝试​

Vanilla JavaScript

Vanilla TypeScript

React

React TypeScript

Vue

Vue TypeScript

创建一个 Five 应用​

浏览器兼容性​

快速开发​

使用JavaScript开发​

使用TypeScript开发​

使用React JavaScript开发​

使用React TypeScript开发​

使用Vue JavaScript开发​

使用Vue TypeScript开发​