Skip to content

270 Degrees Customiser Plugin

Overview

The 270 Degrees Customiser Plugin extends the functionality of the 270 Degrees Viewer by enabling dynamic customization of 3D assets.

With this plugin, you can easily modify object colors and textures, as well as add text or apply preconfigured variants.
It is designed to provide a seamless and interactive experience for users, making it ideal for product configurators, virtual showrooms, and other applications requiring asset personalization.

Key Features

  • Control Visibility: Hide and show parts of the model.
  • Dynamic Color Changes: Modify object colors using hex or CSS values.
  • Texture Mapping: Apply images or patterns to objects with scaling and alignment options.
  • Text Overlays: Add customizable text to objects, including font, size, and color options.
  • Preconfigured Variants: Quickly switch between predefined styles or materials.
  • Real-Time Rendering: Instantly reflects changes in the viewer for a smooth user experience.

Installation

The Customiser Plugin is easy to integrate and provides a robust API for developers to create highly interactive and customizable 3D experiences.

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

    <script src="https://api.270degrees.nl/api/script/latest/customiser.js"></script>

  2. Attach the plugin to your viewer automatically: 

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

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

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