Skip to main content

Change View

Previous chapter recalls: Show 3D space

  • You know what you are Work, and how to get and load it.
  • How to display three-dimensional spaces and develop components again to control three-dimensional space.
This chapter can learn to
  • Learn what is State.
  • How to change the directions/position of 3D space observation.
  • Learn how to work with the code of the previous chapter, e.g. useCurrentState and other responses.
  • Autoring features via State.

Preparatory work​

Like the previous section, we create a new directory (src/2.knowing-stateand corresponding html and jsx or tsx files.

jsx or tsx files can first copy the previous chapter.

src/2.knowing-state/index.html
<!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>Shift view | Klowing 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>
src/2.knowing-state/useFetchWork.js
import { useState, useEffect } from "react";
import { parseWork } from "@realsee/five";

/**
 * React Hook: via work. json address get work object
 * @param url work.json data address
 * @returns work object, if getting, return 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";

/**
 * Get the size of the current window
 */
 function getWindowDimensions() {
  return { width: window.innerWidth, height: window.innerHeight };
}

/**
 * React Hook: Get the size of the current window
 */
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: Modal Control
 */
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="Panorama roaming" icon={<DirectionsWalkIcon/>} value={Five.Mode.Panorama}/>
      <BottomNavigationAction label="Space overview" 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. The data URL */
const workURL = "https://vrlab-public.ljcdn.com/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 {};

Start service npm run dev and jump to the current page "http://localhost:3000/src/2.knowing-state/index.html".

info

Please see your console. The port number will change due to your configuration and current port occupancy, please check the console output. If you use another development build tool, please start the service as required by your own development build tool.

What is State​

Having come back to the concept, I assure you that this is the last theoretical knowledge that needs to be learned at this stage.

State Introduction​

State data structure used to describe status.The previous chapter knows Work, Work is used to describe a three-dimensional space, then State is a description of what is currently in this three-dimensional space.He contains modelling, where the collection point is located, the direction of the camera, and the view of the camera.

State Data Structure and Description​

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

Data description for State

  • mode: Current mode common to 5 models that can be obtained using Five.Mode

    • Panorama: Panorama: Panoramic Walking Model, under which views will travel between collection points. Gestures can rotation/amplify views/toggle collection points to view the collected landscape information.
    • Floorplan: Space Overview Model. The view under this model is model-centric, gesture can rotate/magnify models/toggle the floor to view the model as a whole.
    • Topview: Household diagram mode where the view is centered on the model, vertical pitch model, gesture can shift/zoom in the floor/toggle the floor of the model to view the schema structure.
    • Model: Modeling Model, where the view will travel freely in the model, gesture can rotate/amplify views/bits, fit to view the details of the model and make some locational actions.
    • VR Panorama: VR glasses model that enables VR virtual display using Cardboard glass or his third-party derivative product.

  • panoIndex: Gathering point positions, where Panorama models can be set up.is an index of work[observers].

  • longitude / latitude: Horizontal corner of the camera/camera (radians), we describe the position of the camera in a latitude similar way.

    The whole model scenario is a right-hand cartex coordinate system, XZplane parallel to the ground, Yaxis perpendicular to the ground.

    Right cursor icon

    Initial camera orientation looks at Z negative direction

    • Add longitude camera rotation
    • Decrease longitude camera rotation to right
    • Add latitude camera rotation down
    • Decrease latitude camera rotation up

  • fov: Visual angle in the vertical direction of the camera (angle)

  • offset: three-dimensional coordinates of the current camera

What about api in the state​

The current state can be obtained by state currentState , set by setState setCurrentState

State / currentState Distinction​

currentState is the current state, the state in the picture, the state that is currently shown. state is targeted or stable at the next time.

It can be simply thought of as:
When setSate is called,state will immediately become the value of setState , while currentState will not change immediately, it will gradually approach during the animation transition process state and eventually becomes the same value as state.Just like the animation you see in the screen.

In the example of the last chapter, we have used mode properties to switch to Panorama and Floorplan patterns.You can also try to add some of the other models and see how different they are.

VRPanorama moderequires device gyroscopic information and mobile devices. And if the service is iOS device, it needs to be https or iOS does not allow access to Gychrome information.

Development of an auto-ring feature​

We've fetched and set mode, this time we've modified longitude / latitude.This time we develop an auto-look feature.Use a button to control the function of activating auto-ring viewing, which will rotate the camera horizontally.

Writing ring Component​

  1. Add a LookAroundController file to write components.
  2. Design active React state to control whether or not React state features are enabled.
  3. The ring function is implemented with：triggering function via setInterval, modifying the five state.
src/2.knowing-state/LookAroundController.jsx
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: Auto Ring Button
 */
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 };

Use Auto-Ring Component​

Insert into App file GiveProvider

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";
import { LookAroundController } from "./LookAroundController";

/** work. The data URL */
const workURL = "https://vrlab-public.ljcdn.com/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/>
    <LookAroundController/>
  </FiveProvider>;
};

export { App };

Back to your browser to view it will find a ring button in the top right corner of your page.Click to trigger and close the ring view.

It's a good feature: partying_face: !

The next section will be completed by you​

Next chapter we use State to make some more complex features and to deepen the capabilities of State.
  • Record user operations via State.
  • Restore the user action picture with State.
Last updated on by sansi.lcj