Skip to main content

Displaying a Button/UI

caution

Button / AR UI is not final and can be changed in the later versions.

ARButton​

View3D provides a predefined AR button as Plugin.
To use it, you should include CSS/SASS file for it first.

// It's included in the bundle CSS
import "@egjs/view3d/css/view3d-bundle.min.css";

// Or you can use individual css/sass file
import "@egjs/view3d/css/view3d-ar.min.css"
import "@egjs/view3d/sass/view3d-ar.sass"

Then, add ARButton as plugin.

import View3D, { ARButton } from "@egjs/view3d";

const view3D = new View3D("#el", { ... });
view3D.loadPlugins(new ARButton());

See ARButtonOptions for available options.

Custom AR Button​

You can also create your own custom enter AR button.

<div class="view3d-wrapper">
  <canvas class="view3d-canvas"></canvas>

  <!-- Custom AR Button -->
  <button id="enter-ar">ENTER AR</button>
</div>

Add a click handler to the button that calls view3D.ar.enter()

document
  .querySelector("#enter-ar")
  .addEventListener("click", () => {
    view3D.ar.enter();
  });

AROverlay​

Similarly, View3D also provides default AR UI for WebARSession
See AROverlay and AROverlayOptions

import View3D, { AROverlay } from "@egjs/view3d";

const view3D = new View3D("#el", { ... });
view3D.loadPlugins(new AROverlay());
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    iosSrc: "/egjs-view3d/model/usdz/alarm.usdz"
}