Asset Backed Token Standard

3D Model & Style Settings

Configure the 3D scene using HTML data attributes on the container:

<!-- 3D Hero container: all 3D settings are defined here -->
<div id="hero-container"
<!-- Required: path to the .glb 3D model file -->
data-model-path="./assets/static/models/model-coin-blue.glb"    
<!-- Model scale -->
data-scale="1"
<!-- Horizontal position (X-axis offset) -->
data-position-x="1"
<!-- Enable auto-rotation -->
data-auto-rotate="true"
<!-- Rotation speed (negative for reverse) -->
data-rotation-speed="-3" 
<!-- Camera zoom level (lower = zoom in) -->
data-camera-init-z="4"  
<!-- Main directional light color (hex) -->
data-directional-color="0xbcd6c5">    

<!-- WebGL canvas rendering target -->
<canvas id="webgl"></canvas> 
</div>

Script Initialization

Include the required libraries and initialize the scene by passing the container element.

<!-- Include Core Libraries -->
<script src="./assets/js/gsap.min.js"></script>
<script type="module" src="./assets/js/main.js"></script>    

<script type="module"> 
import { init3DHero } from './assets/js/main.js';  

// 1. Select the container element
const container = document.getElementById('hero-container');

// 2. Start the 3D scene
init3DHero(container); 
</script>

Technical Notes

• Module: type="module" is required for ES6 imports.
• GSAP: Load gsap.min.js before the main 3D script.