Skip to main content

Beginning

Integrate Five development through Composition API mode on Vue framework, complete source code example：JavaScript | TypeScript

This chapter can learn to
  • Preparation for the development environment.
  • How to introduce Five SDK.
  • Show a three-dimensional space to the screen.

Preparatory work​

Development environment​

  • You need to prepare a modern browser.
info

Five Browser supports the following, please choose one of your families：

SafariSafari on iOSChromeChrome for AndroidEdgeFirefox
>= 9>= 9>= 49>= 93>= 13>= 45
  • You need to install Node.jsand Node.js version of subdue >= 12.x in order to avoid historical compatibility problems.

Use development build tool​

This example is initialized by ViteYou can initialize yourself with the code below.

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

Create the directory src/0.getting-startedfor this tutorial under src.

Each tutorial creates a new directory as a record that can be summarized and traced.You will get when the course ends

src
├── 0.getting-started
├── 1.displaying-work
├── 2.knowing-state
...

This directory structure.The full code sample is also such a directory structure that you can always consult at any time.

tip

If you are familiar with other development building tools such as Webpack Snowpack parcel you can also use them.

Create HTML File​

src/0.getting-started/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>started | Getting started</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>

Using direct import <script type="module" src="./index"></script> is a feature of Vite , If you use other development and construction tools, please handle code import and entry files by yourself. Like Webpack using HtmlWebpackPlugin and more.

Write test logical code​

We first create a simple Hello World to ensure that the whole code is running.

src/0.getting-started/index.js
const app = document.querySelector("#app");
app.innerHTML = "Hello World.";
export {};

Last export {}; because Vite uses type="module" to introduce, each file needs to be a module, needs export. If you use other development build tools, please write them as required by your own development build.

Start service npm run dev and jump to the current page "http://localhost:3000/src/0.getting-started/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.

Then you will see it on the page


Hello World.

This output indicates that the development of build tools has been completed.

The next sections will not elaborate further on the above steps and please do so together.

Install dependencies from npm​

Install dependency in your project directory

npm install @realsee/five three@0.117.1

Dependency Required

  • @realsee/five Five
  • three three.js is Five Dependent Graphs/Mathematical Library. Please use the version 0.117.x
  • vue Vue framework is currently using version 3.0.0

Test Vue Component​

Create an App.vue component

src/0.getting-started/index.js
import { createApp, h } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");
src/0.getting-started/App.vue
<template>
  <div>{{ str }}</div>
  ˜
</template>

<script setup>
const str = "测试";
</script>

Render a three-dimensional space​

It's time to render a VR scene to see

Load 3D space​

Delete your previous App.vue.We shall rewrite. You can first fail to understand what the code will mean, and you will learn from the next chapter.

src/0.getting-started/App.vue
<template>
  <FiveProvider :work="work">
    <FiveCanvas :width="512" :height="512" />
  </FiveProvider>
</template>

<script setup>
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
import { parseWork } from "@realsee/five";
import { ref } from "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)));
</script>

Go back to your browser, see if there is already a three-dimensional position displayed on the left. You can use the mouse or touch the gesture. Basic browsing features are attached.

Make the screen full​

While the working principles of the above code may not be fully understood, we can see FiveCanvas affected by width and height properties, very much like the size of the picture.This guess is also supported by the position of the picture in the upper left corner of the browser.For each time, they are used to set screen size.

That's how we try to use the Vue Composition API with our familiarity and build it on the screen.

src/0.getting-started/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/0.getting-started/App.vue
<template>
  <FiveProvider :work="work">
    <FiveCanvas :width="width" :height="height" />
  </FiveProvider>
</template>

<script setup>
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
import { parseWork } from "@realsee/five";
import { ref } from "vue";
import { useWindowDimensions } from "./useWindowDimensions";
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>

Go back to your browser and see if it does not meet expectations.

Your stick🥳 !

Split Code​

Our Code Split Logic

  • Split index to mount an Apps Root component.
  • Split App to separate file App.vue.
  • Split to separate files using Windows Dimensions.

The next section will be completed by you​

Next section will be successful
  • Learn what is working.
  • Learn how to work with the code just now, such as FiveProvider / FveCanvas.
Last updated on by sansi.lcj