跳到主要内容

改变视角

上一章回顾: 展示三维空间

  • 你了解什么是 Work, 以及如何获取和加载。
  • 如何展示三维空间，并且再次基础上开发组件来控制三维空间。
本章你可以学习到
  • 了解什么是 State。
  • 如何改变三维空间观察的方向 / 位置。
  • 了解上一章的代码，比如 useCurrentState 及其他响应的是如何工作的。
  • 通过 State 完成了自动环视的功能。

准备工作​

和上一章节一样，我们新建一个目录（src/2.knowing-state）以及对应的 html 文件 以及 jsx 或 tsx 文件。

jsx 或 tsx 文件可以先拷贝上一章节的内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>改变视角 | Knowing state</title>
  <style>
    * { margin: 0; padding: 0; }
    html, body #app { width: 100%; height: 100%; overflow: hidden; }
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./index"></script>
</body>
</html>
import { useState, useEffect } from "react";
import { parseWork } from "@realsee/five";

/**
 * React Hook: 通过 work.json 的地址 获取 work 对象
 * @param url work.json 的数据地址
 * @returns work 对象，如果获取中，返回 null
 */
 function useFetchWork(url) {
  const [work, setWork] = useState(null);
  useEffect(() => {
    setWork(null);
    fetch(url)
      .then(response => response.text())
      .then(text => setWork(parseWork(text)));
  },[url]);
  return work;
}

export { useFetchWork };
src/2.knowing-state/useWindowDimensions.js
import { useState, useEffect } from "react";

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

/**
 * React Hook: 获取当前窗口的尺寸
 */
function useWindowDimensions() {
  const [size, setSize] = useState(getWindowDimensions);
  useEffect(() => {
    const listener = () => setSize(getWindowDimensions());
    window.addEventListener("resize", listener, false);
    return () => window.removeEventListener("resize", listener, false);
  });
  return size;
}

export { useWindowDimensions };
src/2.knowing-state/ModeController.jsx
import React from "react";
import { Five } from "@realsee/five";
import { useFiveCurrentState } from "@realsee/five/react";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import Paper from "@mui/material/Paper";
import DirectionsWalkIcon from "@mui/icons-material/DirectionsWalk";
import ViewInArIcon from "@mui/icons-material/ViewInAr";

/**
 * React Component: 模态控制
 */
const ModeController = () => {
  const [state, setState] = useFiveCurrentState();
  return <Paper sx={{ position: "fixed", bottom: 0, left: 0, right: 0 }}>
    <BottomNavigation
      showLabels
      value={state.mode}
      onChange={(_, newValue) => {
        setState({ mode: newValue });
      }}
    >
      <BottomNavigationAction label="全景漫游" icon={<DirectionsWalkIcon/>} value={Five.Mode.Panorama}/>
      <BottomNavigationAction label="空间总览" icon={<ViewInArIcon/>} value={Five.Mode.Floorplan}/>
    </BottomNavigation>
  </Paper>;
}

export { ModeController };
src/2.knowing-state/App.jsx
import React from "react";
import { createFiveProvider, FiveCanvas } from "@realsee/five/react";
import { useFetchWork } from "./useFetchWork";
import { useWindowDimensions } from "./useWindowDimensions";
import { ModeController } from "./ModeController";

/** work.json 的数据 URL */
const workURL = "https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";

const FiveProvider = createFiveProvider();
const App = () => {
  const work = useFetchWork(workURL);
  const size = useWindowDimensions();
  return work && <FiveProvider initialWork={work}>
    <FiveCanvas {...size}/>
    <ModeController/>
  </FiveProvider>;
};

export { App };
src/2.knowing-state/index.jsx
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(<App/>, document.querySelector("#app"));

export {};

启动服务 npm run dev。 并跳转到当前页面 "http://localhost:3000/src/2.knowing-state/index.html"。

信息

请查看你的控制台，端口号会因为你的配置以及当前端口占用情况变更，请已控制台输出的为准。 如果你使用其他开发构建工具，请按照自己的开发构建工具的要求启动服务。

什么是 State​

又来了解概念了，我保证这你是现阶段需要了解的最后一个理论知识了。

State 简介​

State 用于描述状态的数据结构。上一章我们了解了 Work, Work 是用于描述一个三维空间，那么 State 则是描述在这个三维空间内，目前正在处于什么状态。他包含了模态、位于的采集点位、相机的方向、相机可视角度的信息。

State 的数据结构及说明​

interface State {
  "mode": Five.Mode,
  "panoIndex": number,
  "longitude": number,
  "latitude": number,
  "fov": number,
  "offset": THEEE.Vector3
}

State的数据描述

  • mode: 当前的模态 Five 常用有 5 种模态，可以使用 Five.Mode 获得

    • Panorama: 全景游走模态，该模态下视图将在采集点间游走，手势操作可以旋转/放大视角/切换采集点，适合查看采集的全景信息。
    • Floorplan: 空间总览模态, 该模态下视图以模型为中心，手势操作可以旋转/放大模型/切换楼层，适合查看模型的整体效果。
    • Topview: 平面图模态，该模态下视图以模型为中心，垂直俯视模型，手势操作可以平移/放大模型/切换楼层，适合查看模型平面结构。
    • Model: 模型游走模态，该模态下视图将在模型中自由游走，手势操作可以旋转/放大视角/位移，适合查看模型的细节，做一些定位操作。
    • VRPanorama: VR 眼镜模态，该模态下可以使用 Cardboard 眼镜 或者他的第三方衍生产品，实现 VR 虚拟显示效果。

  • panoIndex: 采集点位，即在 Panorama 模态可以落脚的位置。是一个 work[observers] 的一个索引。

  • longitude / latitude: 相机的水平角 / 相机的偏航角（弧度），我们使用类似经纬度的方式描述相机位置。

    整个模型场景为一个右手笛卡尔坐标系, XZ平面平行于地面， Y轴垂直于地面。

    右手坐标系图示

    初始相机方向为原点看向 Z 轴负方向。

    • 增加 longitude 相机向左旋转
    • 减少 longitude 相机向右旋转
    • 增加 latitude 相机向下旋转
    • 减少 latitude 相机向上旋转

  • fov: 相机垂直方向的可视角度 (角度)

  • offset: 当前相机的三维坐标

state 相关的 api 有什么​

可以通过 state currentState 获取当前状态，通过 setState setCurrentState 设置状态。

state / currentState 的区别​

currentState 是当前状态，就是画面中的状态，目前展示的状态。 state 是目标状态或者说下一时间的稳定状态。

可以简单的这样认为:
当 setSate 被调用后，state 当即会变成 setState 的值，而 currentState 则不会马上改变，他会在动画过渡的过程中逐步逼近 state 并最终变成和 state 一样的值。就和你在画面中看到的动画一样。

在上一章的代码示例中，我们已经使用了 mode 属性，来切换 Panorama 以及 Floorplan 模态。你也可以尝试把其他的几种模态都补充上，看看各种模态下有什么区别。

VRPanorama 模态需要使用设备陀螺仪信息，需要使用移动设备。 并且如果在 iOS 设备下，需要服务处于 https 下，否则 iOS 不允许访问陀螺仪信息。

开发一个自动环视的功能​

我们已经获取和设置过了 mode，这次我们修改下 longitude / latitude 试试。这次我们开发一个自动环视的功能。通过一个按钮控制激活自动环视的功能，该功能会自动水平旋转镜头。

书写环视组件​

  1. 添加一个 LookAroundController 文件，用于编写组件。
  2. 设计 active React state 用于控制环视的功能是否开启。
  3. 环视功能的实现为：通过 setInterval 定时触发函数，修改 five 的 state。
import React, { useState, useEffect } from "react";
import { useFiveCurrentState } from "@realsee/five/react";
import IconButton from "@mui/material/IconButton";
import Paper from "@mui/material/Paper";
import FlipCameraAndroidIcon from "@mui/icons-material/FlipCameraAndroid";
import PauseIcon from "@mui/icons-material/Pause";

/**
 * ReactComponent: 自动环视按钮
 */
const LookAroundController = () => {
  const [currentState, setState] = useFiveCurrentState();
  const [active, toggleActive] = useState(false);
  useEffect(() => {
    if (active) {
      const timer = window.setInterval(() => {
        setState(prevState => {
          return { longitude: prevState.longitude + Math.PI / 360 };
        });
      }, 16);
      return () => window.clearInterval(timer);
    }
  }, [active]);
  return <Paper sx={{ position: "fixed", top: 10, right: 10 }}>
  {active ?
    <IconButton onClick={() => toggleActive(false)}><PauseIcon/></IconButton>:
    <IconButton onClick={() => toggleActive(true)}><FlipCameraAndroidIcon/></IconButton>
  }
  </Paper>;
}

export { LookAroundController };

使用自动环视组件​

插入到 App 文件的 FiveProvider 中

import React from "react";
import { createFiveProvider, FiveCanvas } from "@realsee/five/react";
import { useFetchWork } from "./useFetchWork";
import { useWindowDimensions } from "./useWindowDimensions";
import { ModeController } from "./ModeController";
// highlight-start
import { LookAroundController } from "./LookAroundController";
// highlight-end

/** work.json 的数据 URL */
const workURL = "https://vr-public.realsee-cdn.cn/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";

const FiveProvider = createFiveProvider();
const App = () => {
  const work = useFetchWork(workURL);
  const size = useWindowDimensions();
  return work && <FiveProvider initialWork={work}>
    <FiveCanvas {...size}/>
    <ModeController/>
    // highlight-start
    <LookAroundController/>
    // highlight-end
  </FiveProvider>;
};

export { App };

回到你的浏览器查看，会发现你的页面右上角出现一个环视按钮。点击可以触发和关闭环视。

真是一个不错的功能🥳 ！

下一章节你会学到​

下一章我们再使用 State 做一些复杂的功能，深入体会一下 State 的能力。
  • 通过 State 完成用户操作的录制。
  • 通过 State 还原用户操作画面。