search

Example 3: Product configurator

This example shows how to build a simple product configurator using the RhinoArtisan Web 3D Web Component.

The configurator allows the user to change:

  • The metal of the model (White Gold, Rose Gold, Yellow Gold)

  • The main gemstone (Ruby, Emerald, Sapphire)

All material changes are applied programmatically using the Web Component API.

hashtag
HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>RhinoArtisan Web Component · Changing materiales</title>

  <script type="module"
    src="https://artisan-cdn.fra1.digitaloceanspaces.com/web3d/dist/rhinoartisan-web-3d-1.1.2.js">
  </script>
</head>

<body>

<div class="layout">
  <aside class="panel">
    <h1>Product configurator</h1>

    <h2>Metal</h2>
    <div class="grid">
      <button data-metal="WHITE_GOLD">White Gold</button>
      <button data-metal="ROSE_GOLD">Rose Gold</button>
      <button data-metal="YELLOW_GOLD">Yellow Gold</button>
    </div>

    <h2>Main gem</h2>
    <div class="grid">
      <button data-gem="RUBY">Ruby</button>
      <button data-gem="EMERALD">Emerald</button>
      <button data-gem="SAPPHIRE">Sapphire</button>
    </div>
  </aside>

  <div class="stage">
    <rhinoartisan-web-3d id="ra-viewer"></rhinoartisan-web-3d>
  </div>
</div>

  <script src="app.js"></script>
</body>

</html>

hashtag
JavaScript

hashtag
Styling (optional)

hashtag
Explanation

In this example:

  • The viewer is added to the page as a custom HTML element (<rhinoartisan-web-3d>), making it easy to embed the Web 3D viewer in any HTML layout.

  • All configuration options are defined in JavaScript, allowing dynamic control over the viewer behavior and the loaded model.

  • The options are passed to the viewer using the options attribute, encoded as a JSON string.

  • When the options attribute is set, the viewer reacts automatically by initializing the scene, loading the model, and applying the configuration without requiring any additional method calls.

This approach is ideal for e-commerce product configurators, where specific parts of the model must always be updated consistently.

hashtag
Targeting specific model parts

In this example, materials are applied using item UUIDs instead of user selection. This guarantees that:

  • Metal buttons always update the metal parts

  • Gem buttons always update the main gemstone

To find the correct UUIDs for your model, you can log all items after the model is loaded:

Copy the uuid of the desired items and assign them to METAL_ITEM_UUID and MAIN_GEM_UUID.

hashtag
When to use this approach

This pattern is recommended when:

  • You are building a product configurator

  • You need deterministic control over which parts are modified

  • The configuration should not depend on user selection

For selection-based workflows, see Example 2.

PreviousExample 2: Setting options using JavaScriptNextExample 4: Studio / catalog render

Last updated

Was this helpful?