Skip to main content

Displaying a Button/UI


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


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>

Add a click handler to the button that calls

.addEventListener("click", () => {;


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"