a3d-toolbar

Description

Description

The <a3d-toolbar> web component provides a customizable toolbar for interacting with the 3D viewer.
It allows users to switch between different camera pointer modes, such as orbit, pan, and zoom. The toolbar is designed to be flexible and supports additional customization through slots and CSS properties.

Installation

Using npm:

npm install @a3d-viewer/viewer
npm install @a3d-ui/toolbar

Importing a3d-toolbar:

import '@a3d-viewer/viewer'
import '@a3d-ui/toolbar'

Usage

To use the a3d-toolbar component, include it as a child of the <a3d-viewer> component. The toolbar automatically integrates with the viewer’s camera.

<a3d-viewer>
  <!-- .... -->
  <a3d-toolbar></a3d-toolbar>
</a3d-viewer>

Customizing Toolbar

You can customize the toolbar by adding content to the left and right slots:

<a3d-viewer>
  <a3d-toolbar>
    <div slot="left">Custom Left Content</div>
    <div slot="right">Custom Right Content</div>
  </a3d-toolbar>
</a3d-viewer>

Attributes

selection

The selection attribute reflects the currently selected camera pointer mode. It can be one of the following values:

• orbit: Default mode for rotating the camera around the scene.
• pan: Mode for panning the camera.
• zoom: Mode for zooming in and out.

<a3d-toolbar selection="orbit"></a3d-toolbar>

Styling

The <a3d-toolbar> component provides several CSS properties for customization:

• --a3d-toolbar-background-override: Background color of the toolbar.

Example:

a3d-toolbar {
  --a3d-toolbar-background-override: #f0f0f0;
}

Events

selectionchange

The selectionchange event is dispatched whenever the user changes the camera pointer mode.

const toolbar = document.querySelector('a3d-toolbar')
 
toolbar.addEventListener('selectionchange', (event) => {
  console.log('New selection:', event.detail.selection)
})

API