Skip to content

270 Degrees Augmented Reality (AR) Plugin

The 270 Degrees AR Plugin enables immersive augmented reality experiences directly within the 3D Viewer.
Place 3D models in real-world environments using WebXR on Android devices or Quick Look on iOS devices.

Overview

Key Features

  • Cross-Platform Support: WebXR for Android devices and AR Quick Look for iOS.
  • Surface Detection: Automatically detect horizontal and vertical surfaces for model placement.
  • Hit Testing: Use a visual reticle to help users position models accurately.
  • Interactive Controls: Tap to place models, drag to rotate them in AR space.
  • Custom Overlays: Provide custom UI overlays during AR sessions.

Installation

The AR Plugin is easy to integrate and provides a simple API for launching augmented reality experiences.

  1. Load the plugin script after you have loaded the Viewer script.

    <script src="https://api.270degrees.nl/api/script/latest/ar.js"></script>
    import * as TSDAr from 'https://api.270degrees.nl/api/script/latest/ar.esm.js';

  2. Attach the plugin to your viewer automatically: 

    TSDViewer.create(element, {
    plugins: 'ar'
})
    <div class="js-270viewer" data-270-plugins="ar">

    Or attach it via javascript after TSDViewer.create():

    TSDAr.attach(element, {
    onAttach: () => {
        // attached the plugin methods
    }
});

  3. Access methods
    AR methods are now available via the Ar namespace, for example element.Ar.startAR().
    Read more about the available methods.

Usage notes

The AR plugin provides two main methods for controlling AR sessions:

Starting AR

Call element.Ar.startAR() to launch an AR session. The plugin automatically detects the device platform:

  • iOS devices: Downloads and opens the USDZ file in AR Quick Look
  • Android devices: Launches a WebXR immersive-ar session with hit-testing
element.Ar.startAR({
    surface: 'horizontal',  // Optional: 'horizontal', 'vertical', or omit for any surface
    overlay: customElement  // Optional: Custom DOM element for AR UI
});

Surface Detection

You can restrict model placement to specific surface types:

  • surface: 'horizontal' - Only allow placement on floors, tables, etc.
  • surface: 'vertical' - Only allow placement on walls
  • Omit or leave empty to allow placement on any detected surface

Custom Overlays

By default, the plugin creates a basic overlay with a close button. You can provide a custom DOM element:

const myOverlay = document.createElement('div');
myOverlay.innerHTML = '<button>Close AR</button><p>Instructions here</p>';

element.Ar.startAR({ overlay: myOverlay });

The overlay must be a DOM element and will be shown during the AR session.

Custom overlays are not supported on iOS.

Stopping the AR experience

Call element.Ar.stopAR() to exit the AR experience and return to the initial state.

Unattaching

You can unload the AR plugin completely by calling TSDAr.unattach(el).
This will remove all AR methods and associated listeners from the Viewer.

💬 Ask AI