Skip to main content

Manual Binding via the API

The Visual Component also provides a way to control and update the 3D scene manually using JavaScript methods, instead of via the automatic DOM binding (which uses the data-av-property and data-av-value attributes).

This may be useful for making more complex updates on multiple properties and values at once.

Full code example​

index.html
<html lang="en">
    <head>
        <meta charset="utf-8">
        <Title>My Page</Title>
        <!-- Link to index.js -->
        <script type="text/javascript" src="index.js" defer></script>
        <!-- Link to the Visual Component's scripts -->
        <script type="text/javascript" src="https://builds.dopple.io/atlatl-visual-component/releases/current/index.js" defer></script>
    </head>
    <body>
        <!-- The Visual Component -->
        <atlatl-visual id="visual-component" client-id="a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5">
            <av-product id="my-product" namespace="my_namespace" name="my_product_name"></av-product>
        </atlatl-visual>
    </body>
</html>
index.js
async function init() {
    const visualComponent = document.getElementById('visual-component')
    await visualComponent.ready()    
    const myProduct = document.getElementById('my-product')
    myProduct.product.setValue('some_property', 'some_value')
}
init()