Create / swap texture from blob or buffer

[zatakiya]

This and this example shows how to swap or create a texture by calling a texture file by making an http request.

However, is it possible to allow user to upload an image and use that as texture ? There are so many possible use case for this.

[AmbiguousX]

3js

[zatakiya]

Can you elaborate?

[AmbiguousX]

i can make a demo using 3js. if you want to get into more advanced functionality easier you want to use 3js. modelviewer is a wrapper that uses 3js api and its not super easy to access the lower levels

[danilokrulj]

This is a portion of some of my old code. I used it to upload a picture in the browser and than create a button that uses the picture as a texture and replaces it on some material. You can reuse parts of it. Sorry for not cleaning it, I will just copy/paste it :) good luck

document.querySelector("#files").addEventListener("change", (e) => { if (window.File && window.FileReader && window.FileList && window.Blob) { const files = e.target.files; const output = document.querySelector("#result"); output.innerHTML = ""; for (let i = 0; i < files.length; i++) { if (!files[i].type.match("image")) continue; const picReader = new FileReader(); picReader.addEventListener("load", function (event) { const picFile = event.target; const btn = document.createElement("button"); btn.className = "results"; btn.innerHTML =; output.appendChild(btn); btn.addEventListener("click",async function () { tekstura = await modelViewer.createTexture(picFile.result); mat.pbrMetallicRoughness.setBaseColorFactor([1,1,1,1]); mat.pbrMetallicRoughness["baseColorTexture"].setTexture(tekstura); }); }); picReader.readAsDataURL(files[i]); } } else { alert("Your browser does not support File API"); } });

Edit: also, sorry that it looks like this, I don't know how to format it correctly