CODEWITHSUNDEEP
javascriptaframewebvr
Jay Dave
Jay Dave

Reputation: 69

how can I create a-assets programmatically in aframe?

I am using cloudinary to serve textures for plane. I have created a backend for cloudinary so that I can replace images on cloudinary but for that to reflect on my aframe app I need to change the version in the URL every time someone loads the page how can I set a-assets programmatically for that purpose I tried creating a addasset component and attached it to a-assets but it doesn't work here is the snippet of the code I created

if there a way to reload the a-assets by emitting any event please tell as that would also work the img is added to a-assets I checked it in the chrome debug tools

AFRAME.registerComponent('addasset', {
  init: function() {
    var version = Math.floor(Math.random() * 101);
    var str = "https://res.cloudinary.com/blinklink-solutions/image/upload/v" + version + "/v1/Fizan%20Polarized%20Sunglasses.jpeg.jpg"
    // var str="https://res.cloudinary.com/blinklink-solutions/image/upload/v"+version+"/eyesdeal%20texture/dialogleft.png"
    var assets = document.getElementById('assets');
    var img = document.createElement("img");
    img.setAttribute("id", "off1");
    img.setAttribute("src", str);
    console.log(assets);
    console.log(str);
    assets.appendChild(img);
    var plane = document.getElementById("offer_plane");
    plane.setAttribute("src", "#off1")
  },
});

Upvotes: 2

Views: 765

Answers (1)

Diego Marcos
Diego Marcos

Reputation: 4585

a-assets is used to prefetch assets before the scene starts rendering. It doesn't make sense to modify it after load. Two options:

  1. Don't use a-assets and set the correct image URL on the plane at runtime. e.g; planeEl.setAttribute('src', 'url(xxx)');
  2. Generate your HTML server side and populate a-assets with the correct URLs before sending the page to the client.

Upvotes: 3

Related Questions