Is there a way to change basecolor texture

This topic has 3 replies, 2 voices, and was last updated 5 years, 10 months ago by Ivan Lyubovnikov.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
2018-05-30 at 5:25 am #4427

c.j.yen@icloud.com
Participant

Hi~ There’s something that curious about me, is there a way to change the base color texture once publish on the web. I mean use the front end(user can upload image they like) to change the texture(base color)? If yes, please advise me how or where I can find the relatives answer, thanks.

2018-05-30 at 9:12 am #4451
Ivan Lyubovnikov
Staff
Hi,
Do you mean the base color input of the PBR material? If so, then you can do something like this:
```
var myObj = app.scene.getObjectByName('myObject');
var mat = myObj.material;
new v3d.TextureLoader().load('myTexture.jpg', function(tex) { 
    mat.map = tex;
    mat.needsUpdate = true;
});
```
The ‘app’ variable in this snippet is the application instance which is usually available in an application’s stock js file if it was created with the Verge3D App Manager.

Co-founder and lead developer at Soft8Soft.
2018-06-10 at 5:49 am #4823

c.j.yen@icloud.com
Participant

Hi Ivan,
Thanks for your replied, after do the some testing and researching I finally figure it up how to change the texture of PBR material, thanks for have a chance to learning and enlightened me. And there’s one question haven’t resolve yet that is how should I do with puzzle or js file to achieve the following function:
Upload image from HTML and rename it to myTexture.jpg

very appreciate

2018-06-12 at 8:38 am #4951
Ivan Lyubovnikov
Staff
Hi,
I don’t think this is doable with Puzzles at the moment, but you can write a script with the help of the File/FileReader API.

First, add an input field of type “file” into the HTML file, for example inside the <body> element:
```
<body>
    ...
    <input type="file" id="loadImage" style="position: relative;" accept="image/x-png,image/jpeg"/>
</body>
```
Then, add the following snippet in your js file:
```
var myObj = app.scene.getObjectByName('Cube');
var mat = myObj.material;

document.getElementById('loadImage').addEventListener('change', function(e) {
    if (e.target.files.length) {
        var reader = new FileReader();
        reader.onload = function(e) {
            new v3d.TextureLoader().load(e.target.result, function(tex) {
                mat.map = tex;
                mat.needsUpdate = true;
            });
        }
        reader.readAsDataURL(e.target.files[0]);
    }
});
```
– this snippet only loads an image in the browser, but if you need to store it on a server you should also send a request with the image data and properly process it on the server-side, which needs additional coding / server setup.

Co-founder and lead developer at Soft8Soft.
Author

Posts