Skip to main content

Change View

Previous chapter recall: show three-dimensional space

  • You know what is Workand how to get and load.
  • How to display three-dimensional spaces and develop features on this basis 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. setState stateChange.
  • Autoring features via State.

Preparatory work​

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

js or ts files can first copy the previous chapter.

src/2.knowing-state/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Presentation space | Displaying work</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      crossorigin="anonymous"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
      rel="stylesheet"
    />
    <style>
      html,
      body,
      #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <! - Mode switch -->
    <nav class="navbar fixed-bottom navbar-light bg-light">
      <div class="container-fluid justify-content-center">
        <div class="btn-group">
          <a href="javascript:;" class="btn btn-primary active js-Panorama"
            >Panoramic roaming</a
          >
          <a href="javascript:;" class="btn btn-primary js-Floorplan"
            >Overview of space</a
          >
        </div>
      </div>
    </nav>
    <script type="module" src="./index"></script>
  </body>
</html>
src/2.knowing-state/index.js
import { Five, parseWork } from "@realsee/five";

const workURL =
  "https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";

const five = new Five();

five.appendTo(document.querySelector("#app"));

fetch(workURL)
  .then((res) => res.json())
  .then((json) => {
    const work = parseWork(json);
    five.load(work);
  });

window.addEventListener("resize", () => five.refresh(), false);

{
  // === mode switch ===
  const buttons = {
    Panorama: document.querySelector(".js-Panorama"),
    Floorplan: document.querySelector(".js-Floorplan"),
  };

  for (const [modeName, element] of Object.entries(buttons)) {
    element.addEventListener(
      "click",
      () => {
        five.setState({ mode: modeName });
      },
      false
    );
  }

  five.on("stateChange", (state) => {
    for (const [modeName, element] of Object.entries(buttons)) {
      if (modeName === state.mode) {
        element.classList.add("active");
      } else {
        element.classList.remove("active");
      }
    }
  });
}

export {};

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

tip

Please see your console. The port number will change due to your configuration and current port occupancy pattern. Please check the console output.
If you use other development build tools, 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 has 5 types, can be used Five.Mode get：

    • 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.
    • VRPanorama: 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.

    Footer image with right-hand coordinates

    Initial camera orientation looks at Z negative direction

    • Add longitude camera rotate left.
    • Decrease longitude camera rotate right.
    • Add latitude camera rotate down.
    • Reduces the rotation of latitude cameras.

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

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

UI buttons to add ring functions​

Add two buttons in the top right corner of the screen,to start and to stop.

src/2.knowing-state/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Change view | Knowing state</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      crossorigin="anonymous"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
      rel="stylesheet"
    />
    <style>
      html,
      body,
      #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- Mode switch-->
    <nav class="navbar fixed-bottom navbar-light bg-light">
      <div class="container-fluid justify-content-center">
        <div class="btn-group">
          <button class="btn btn-primary active js-Panorama">Panoramic roaming</button>
          <button class="btn btn-primary js-Floorplan">Space overview</button>
        </div>
      </div>
    </nav>
    <!-- look around -->
    <div class="card position-fixed m-2 top-0 end-0">
      <button class="btn btn-light js-lookAround-start">
        <i class="bi bi-arrow-repeat"></i>
      </button>
      <button class="btn btn-light js-lookAround-stop d-none">
        <i class="bi bi-pause"></i>
      </button>
    </div>
    <script type="module" src="./index"></script>
  </body>
</html>

Write Logical Code​

  1. By setInterval a time trigger, modify the longitude value by state
  2. Start the timer when the button is clicked
  3. Stop button click triggers timer stop.

Add：after the mode switching code of the previous one

src/2.knowing-state/LookAroundController.js
{
  // === Ring ====
  let timer;
  const startButton = document.querySelector(".js-lookAround-start");
  const stopButton = document.querySelector(".js-lookAround-stop");
  startButton.addEventListener(
    "click",
    () => {
      window.clearInterval(timer);
      timer = window.setInterval(() => {
        five.setState({ longitude: five.state.longitude + Math.PI / 360 });
      }, 16);
      startButton.classList.add("d-none");
      stopButton.classList.remove("d-none");
    },
    false
  );
  stopButton.addEventListener(
    "click",
    () => {
      window.clearInterval(timer);
      startButton.classList.remove("d-none");
      stopButton.classList.add("d-none");
    },
    false
  );
}

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