Skip to main content

Beginning

Integrate Five development through Function Components and Hooks patterns on React 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 react

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

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.This directory structure will be available when the course ends

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

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.

rc/0.getting-started/index.jsx
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
.117 react react-domain

relying on needs

  • @realsee/five Five
  • three three.js is Five dependency graphs/mathematical library. Currently please use version of 0.117.x - react React Framework
  • [react-dom](https://npmjs.com/ react-dom) Browser-side renderer for React
info

If using npm install install to install dependencies, try adding --force command :

Render a three-dimensional space​

It's time to render a VR scene to see

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.jsx
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { parseWork } from "@realsee/five";
import { createFiveProvider, FiveCanvas } from "@realsee/five/react";

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

/**
 * React Hook: get the work object through the address of work.json
 * @param url the data address of work.json
 * @returns the work object, if it is 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;
}

const FiveProvider = createFiveProvider();
const App = () => {
  const work = useFetchWork(workURL);
  return work && <FiveProvider initialWork={work}>
    <FiveCanvas width={512} height={512}/>
  </FiveProvider>;
};

ReactDOM.render(<App/>, document.querySelector("#app"));

export {};

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.Yes, they are used to set screen size.

That's how we try to use React Hooks with our familiarity and lay it over the screen.

src/0.getting-started/index.jsx
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { parseWork } from "@realsee/five";
import { createFiveProvider, FiveCanvas } from "@realsee/five/react";

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

/**
 * React Hook: Get the work object through the address of work.json
 * @param url the data address of work.json
 * @returns work object, if Fetching, 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;
}

/**
 * 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;
}

const FiveProvider = createFiveProvider();
const App = () => {
  const work = useFetchWork(workURL);
  const size = useWindowDimensions();
  return work && <FiveProvider initialWork={work}>
    <FiveCanvas {...size}/>
  </FiveProvider>;
};

ReactDOM.render(<App/>, document.querySelector("#app"));

export {};

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

Your stick🥳 !

Split Code​

All our codes are currently written in a js / ts file.While all logic can be seen at first glance, it is more confusing.The splitting of content into more than one document will improve this.

  • Split App to separate files.
  • Split useFetchWork methods into separate files.
  • Split to separate files using Windows Dimensions.
src/0.getting-started/useFetchWork.js
import { useState, useEffect } from "react";
import { parseWork } from "@realsee/five";

/**
 * React Hook: 通过 work.json 的地址 获取 work 对象
 * @param url work.json 的数据地址
 * @returns work 对象，如果获取中，返回 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/0.getting-started/useWindowDimensions.js
import { useState, useEffect } from "react";

/**
 * 获取当前窗口的尺寸
 */
 function getWindowDimensions() {
  return { width: window.innerWidth, height: window.innerHeight };
}

/**
 * React Hook: 获取当前窗口的尺寸
 */
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/0.getting-started/App.jsx
import React from "react";
import { createFiveProvider, FiveCanvas } from "@realsee/five/react";
import { useFetchWork } from "./useFetchWork";
import { useWindowDimensions } from "./useWindowDimensions";

/** work.json 的数据 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}>
  </FiveProvider>;
};

export { App };
src/0.getting-started/index.jsx
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";

ReactDOM.render(<App/>, document.querySelector("#app"));

export {};

It is not more comfortable.Each document is succinct and easy to understand their respective roles.

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