docs/Tutorials/UserInterface/OBC/ViewCube.mdx - main - tiktaalik/ThatOpenEngineDocs

docs/Tutorials/UserInterface/OBC/ViewCube.mdx
99 строк3 KB
Antonio González Viegas
chore: update build
10 июл 2025, 17:16
10 июл 2025, 17:16e398516
<div style={{position: "relative"}}><iframe src="https://thatopen.github.io/engine_ui-components/examples/ViewCube"></iframe><button class="full-screen-btn" onClick={() => window.open("https://thatopen.github.io/engine_ui-components/examples/ViewCube")} >Go Full Screen</button></div>

:::info Source
Copying and pasting? We've got you covered! You can find the full source code of this tutorial [here](https://github.com/ThatOpen/engine_ui-components/blob/main/packages/obc/src/core/ViewCube/example.ts).
:::

## 🧭 Navigating your 3D Scene with the ViewCube
---
The ViewCube is a handy UI component that lets users quickly orient the camera in a 3D scene. In this tutorial, you'll learn how to add a ViewCube to your app, connect it to your camera, and let users interact with it to change their view.
### 🖖 Importing our Libraries
We'll need:
- `@thatopen-platform/ui-beta` for UI initialization.
- `@thatopen-platform/components-beta` for the 3D engine and scene management.
- The local UI components package for extra UI features.

```js
import * as BUI from "@thatopen/ui";
import * as OBC from "@thatopen/components";
import * as CUI from "../..";
```
### 🚦 Initializing the UI
As always, initialize the UI libraries at the start of your app:

```js
BUI.Manager.init();
CUI.Manager.init();
```
### 🌎 Setting up a Simple 3D Scene
Let's create a basic 3D world with a scene, camera, and renderer:

```js
const components = new OBC.Components();
const worlds = components.get(OBC.Worlds);
const world = worlds.create<
  OBC.SimpleScene,
  OBC.SimpleCamera,
  OBC.SimpleRenderer
>();

world.scene = new OBC.SimpleScene(components);
const viewport = document.createElement("bim-viewport");
world.renderer = new OBC.SimpleRenderer(components, viewport);

world.camera = new OBC.SimpleCamera(components);
```
### ➕ Adding Grids and Initializing Components
Optionally, add a grid to your scene and initialize all components:

```js
const grids = components.get(OBC.Grids);
grids.create(world);

components.init();
```
### 🧊 Adding the ViewCube
Now, let's add the ViewCube and connect it to the camera:

```js
const viewCube = document.createElement("bim-view-cube");
viewCube.camera = world.camera.three;
viewport.append(viewCube);
```
This attaches the ViewCube to your viewport and links it to your camera's Three.js instance.

```js

```
### 🔄 Keeping the ViewCube in Sync
To keep the ViewCube orientation updated as the camera moves, listen for camera control updates:

```js
world.camera.controls.addEventListener("update", () =>
  viewCube.updateOrientation(),
);
```
### 🖱️ Handling ViewCube Interactions
You can let users click on the ViewCube to change the camera's orientation. For example, set the camera to a specific view when the left face is clicked:

```js
viewCube.addEventListener("back", () => {
  world.camera.controls.setLookAt(-10, 10, 0, 1, 10, 0, true);
});
```
### 🖼️ Laying Out the UI
Let's use a grid layout to display the viewport:

```js
const app = document.getElementById("app") as BUI.Grid;
app.layouts = {
  main: {
    template: `
      "viewport"
    `,
    elements: { viewport },
  },
};
```
## 🎉 That's it!
You now have a fully interactive ViewCube in your 3D scene, letting users easily orient themselves and explore your BIM models!