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 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" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Change perspective | Klowing 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>
      * {
        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/useWindowDimensions.js
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 };
}
export { useWindowDimensions };
src/2.knowing-state/ModeController.vue
<template>
  <nav class="navbar fixed-bottom navbar-light bg-light">
    <div class="container-fluid justify-content-center">
      <div class="btn-group">
        <button
          :class="
            state.mode == 'Panorama'
              ? 'btn btn-primary active'
              : 'btn btn-primary'
          "
          @click="() => setState({ mode: Five.Mode.Panorama })"
        >
          Panorama roaming
        </button>
        <button
          :class="
            state.mode == 'Panorama'
              ? 'btn btn-primary'
              : 'btn btn-primary active'
          "
          @click="() => setState({ mode: Five.Mode.Floorplan })"
        >
          Space overview
        </button>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { useFiveCurrentState } from "@realsee/five/vue";
import { Five } from "@realsee/five";

const [state, setState] = useFiveCurrentState();
</script>
src/2.knowing-state/App.vue
<template>
  <FiveProvider :work="work">
    <FiveCanvas :width="width" :height="height" />
    <ModeController />
  </FiveProvider>
</template>

<script setup>
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
import { parseWork } from "@realsee/five";
import { ref } from "vue";
import { useWindowDimensions } from "./useWindowDimensions";
import ModeController from "./ModeController.vue";

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

fetch(workURL)
  .then((response) => response.text())
  .then((text) => (work.value = parseWork(text)));
const { width, height } = useWindowDimensions();
</script>
src/2.knowing-state/index.js
import { createApp, h } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

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 to understand 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 Vue Ref to control whether the ring feature is enabled.
  3. The ring function is implemented with：triggering function via setInterval, modifying the five state.
src/2.knowing-state/LookAroundController.vue
<template>
  <div class="card position-fixed m-2 top-0 end-0">
    <button class="btn btn-light" v-show="isShow" @click="startFunc">
      <i class="bi bi-arrow-repeat"></i>
    </button>
    <button class="btn btn-light" v-show="!isShow" @click="stopFunc">
      <i class="bi bi-pause"></i>
    </button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useFiveCurrentState } from "@realsee/five/vue";

const [currentState, setState] = useFiveCurrentState();
const isShow = ref(true);
let timer;

const startFunc = () => {
  window.clearInterval(timer);
  isShow.value = false;
  timer = window.setInterval(() => {
    setState({ longitude: currentState.value.longitude + Math.PI / 360 });
  }, 16);
};

const stopFunc = () => {
  window.clearInterval(timer);
  isShow.value = true;
};
</script>

Use Auto-Ring Component​

Insert into App file GiveProvider

src/2.knowing-state/App.vue
<template>
  <FiveProvider :work="work">
    <FiveCanvas :width="width" :height="height" />
    <ModelControl />
    <LookAroundController />
  </FiveProvider>
</template>

<script setup>
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
import { parseWork } from "@realsee/five";
import { ref } from "vue";
import { useWindowDimensions } from "./useWindowDimensions";
import ModelControl from "./ModelControl.vue";
import LookAroundController from "./LookAroundController.vue";
const work = ref();
const workURL =
  "https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";

fetch(workURL)
  .then((response) => response.text())
  .then((text) => (work.value = parseWork(text)));
const { width, height } = useWindowDimensions();
</script>

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