Search code examples
three.jsaframewebvr

Addressing cloned entities in AFrame to modify attributes


I am building a project in aframe and I want to dynamically create/clone many new entities e.g cubes and then place them in the scene. I then want to update a specific cubes attributes that have been added to the scene based on a timed function and some external data from a REST API e.g move cube where id="cube-9" to position:" 0 10 1". How can I update/remove a specific cube based on its unique id? I tried cloning a cube entity and giving it a unique numerical id which appears to work but I don't know how to call and update a specific cube entity based on the unique id I gave it. I am using code from the example below to create clones. Thanks!

https://dev.to/azure/how-to-build-a-webvr-game-with-a-frame-4ifg


Solution

  • var el = document.querySelector("#yourid");

    or

    var el = document.getElementById(“yourid”);

    and then modify components

    el.setAttribute(“componentName”, {propName1: value1, propName2: value2...}

    Also ids must begin with a letter: ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). https://www.w3.org/TR/html4/types.html#type-id