Skip to main content

Beginning

info

This tutorial does not depend on any front-end framework, full source sample JavaScript | TypeScript.

This chapter can be concluded
  • Preparation for the development environment.
  • How to introduce Five SDK.
  • Render a three-dimensional space in 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 vanilla

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

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.When the course ends you will get:

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>
info

Use direct introduction <script type="module" src="./index"></script> is a feature of Vite , if you use other development build tools to process your own code to import and access files. Like Webpack using HtmlWebpackPlugin and more.

Write test logical code​

We first create a simple Hello World to make sure 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 on your project directory：

npm install @realsee/five three@0.117.1
info
  • @realsee/five Five Rendering engine.
  • three Three.js is a dependency graphics/mathematical library Five. Please use the version 0.117.x at this time. :::

Render a three-dimensional space​

It's time to render a VR scene.

Load 3D space​

Delete your previous Hello World. 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/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);
  });

export {};

Returning to your browser, see if there is a three-dimensional space already shown. You can use the mouse or touch the gesture. Basic browsing features are attached.

Make the picture fit​

Try to adjust the size of the browser window, and found that the picture does not change with the size of the window, which is not in line with expectations, so we add this function to：

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

export {};

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

Your stick🥳 !

The next section will be completed by you​

  • Learn what is working.
  • Learn how to work with the code just now, like parseWork (json) five.load(work).

:::

Last updated on by sansi.lcj