3D Space

Quickly render a three-dimensional space with Five.

Create Five Instance

First, we start by creating a Five instance：

const five = new Five({
  backgroundColor: 0xffffff, // background color
  imageOptions: { size: 1024 }, // Image Default Resolution
  textureOptions: { size: 512 }, // Paste Default Resolution
  /* Other configuration options */
});

tip

can browse the complete Five configuration items in Five API.

Load DOM Structure

After creating the Five instance, you need to load the instance into the DOM structure：

// Load Five Instances in DOM Structure
five.appendTo(document.getElementById("app")!);

By default,Five renounces the two-dimensional plane used to load the zones used by DOM.

Loading Work Data

Now we can render a three-dimensional space.Before rendering it we'll need to prepare a description of three-dimensional spatial information like Work and then perform five.load(work) complete rendering：

// We select a work data from the open work data set.
import work from "@realsee/open-works/virtual/81RojBlJQdVTglNNMr.json";
five.load(work);

tip

about Work for more detailed descriptions of data go to What is Work?.

Effect Display

After a little while you can see a three-dimensional picture of the panorama pattern.

🌹🌹🌹~

Congratulations, you can now interact with them by clicking on them, rotating, zooming, moving, etc.