Replacing textures rather than materials

This topic has 76 replies, 10 voices, and was last updated 5 years, 9 months ago by Yuri Kovelenov.

Viewing 15 posts - 1 through 15 (of 77 total)

1 2 3 4 5 6 →

Author

Posts
2018-03-27 at 6:16 pm #3187

johngrigni
Customer

Is there a way to replace the texture without the rest of the material? I want to use a normal map and a diffuse map, and want to swap out one but not the other based on an icon selection. Is this something I have to write code for, because I have no idea how to do that, or even where such code should go.

Ideally, I could read them from a folder/directory with a bunch of other bitmap textures.

2018-03-28 at 8:26 am #3213

Yuri Kovelenov
Staff

Hi,
This is currently only possible with coding. Still I think having a puzzle for that would be great. Added this task to our TODO list. Thanks for the feedback! :)

Chief 3D Verger | LinkedIn | Twitter

2018-03-28 at 9:40 am #3217

vincent
Customer

If I understand the request, I do this way.
I work on Blender and I make a clone of my object with a new Texture ( Image texture), and I do : invisible the clone on the Verge 3D (with the icon : camera).

2018-03-28 at 10:04 am #3219

johngrigni
Customer

The problem is the client has over 100 textures they want to use, and loading that many invisible objects at the start is prohibitive.

So if it is coding only, where does the code go? I can see an example, does this get appended to the html file, or a separate JavaScript file, or in the Blender file itself?

2018-03-28 at 10:31 am #3221
Yuri Kovelenov
Staff
johngrigni wrote:

So if it is coding only, where does the code go? I

JS code is added to your_app.js file located in your app folder. When you open this file, look for runCode() – you add your own code inside this function.

The following snippet replaces the diffuse texture of the Cube object with a new image:
```
function runCode() {
    // add your code here, e.g. console.log('Hello, World!');

    app.scene.traverse(function(obj){
        if (obj.name == 'Cube') {
            var loader = new v3d.TextureLoader();
            loader.load('./new_image.png', function(texture) { 
                obj.material.map = texture;
            })
        }
    });

}
```
Chief 3D Verger | LinkedIn | Twitter
2018-03-28 at 10:35 am #3222

vincent
Customer

I understand better your request. The images textures files (png, jpeg) are in the web site and more you approach more than you need pixels in the texture. For me it’s a problem of 3d in a web browser.
I ask a question : Is it possible to make a texture (image texture) only with code ?

2018-03-28 at 10:45 am #3223

Yuri Kovelenov
Staff

vincent wrote:

Is it possible to make a texture (image texture) only with code ?

Does the code snippet above answer your question?

Chief 3D Verger | LinkedIn | Twitter

2018-03-28 at 1:00 pm #3224

johngrigni
Customer

Thank you for your timely reply!

So, how do I make that work for 100+ textures? Do I make the ‘./new_image.png’ into a variable that gets fed into the function, and have preview icons that basically set the variable and then call the function?

Since I’m working with two different maps (diffuse and normal), do I need to add that as a variable as well, or make it two different functions?

2018-03-28 at 1:40 pm #3225
Yuri Kovelenov
Staff
Yep!
```
function runCode() {

    function changeTexture(objName, diffuseURL, normalURL) {
        app.scene.traverse(function(obj){
            if (obj.name == objName) {
                var loader = new v3d.TextureLoader();
                loader.load(diffuseURL, function(texture) { 
                    obj.material.map = texture;
                })
                loader.load(normalURL, function(texture) { 
                    obj.material.normalMap = texture;
                })
            }
        });
    }
    changeTexture('Cube', './new_image_diffuse.png', './new_image_normal.png');
}

});
```
Chief 3D Verger | LinkedIn | Twitter
2018-03-28 at 2:27 pm #3226

vincent
Customer

I was participate, because I have imagine this case study. But I am only designer and for the moment I am not a coder. Thank you Yuri.

2018-03-28 at 2:37 pm #3227

Yuri Kovelenov
Staff

No worries, thank you for participating!

Chief 3D Verger | LinkedIn | Twitter

2018-03-29 at 3:35 pm #3263

johngrigni
Customer

I keep getting an error:
TypeError: v3dApp.ExternalInterface.changeTexture is not a function. (In ‘v3dApp.ExternalInterface.changeTexture(objName, difffuseURL, normalURL)’, ‘v3dApp.ExternalInterface.changeTexture’ is undefined)

I put the script into the Ati.js file after the comment in the runCode function.

I’m attaching a screenshot of my test file to see if I’ve messed up the puzzles to call the function.

2018-03-29 at 3:47 pm #3265

Yuri Kovelenov
Staff

your function should be registered first, see this topic for more info https://www.soft8soft.com/topic/purpose-of-prepareexternalinterface/#post-3262

also there is an example in the SDK called ExternalCall, where this approach is demoed

Chief 3D Verger | LinkedIn | Twitter

2018-03-29 at 6:54 pm #3271

johngrigni
Customer

Perhaps I am too much of a noob, because it’s not working at all.

In the .js file for my project, the second to last function is prepareExternalInterface(app) and the comment says to register functions in app.ExternalInterface to call them from puzzles, and sites an example where myJSFunction is defined as a simple console.log. So is registering the same as defining?

So do I need to define the function there, or under function runCode() or both places? I’m very confused.
No matter what I do I’m getting an error: “TypeError: appInstance.ExternalInterface.changeTextures is not a function. (In ‘appInstance.ExternalInterface.changeTextures(objName, diffuseURL, normalURL)’, ‘appInstance.ExternalInterface.changeTextures’ is undefined)”

2018-03-29 at 7:18 pm #3272

johngrigni
Customer

Also, when I send a changeTexture() call from runCode() with different URL values, it loads the correct textures but doesn’t apply UVs to them. Is there something for specifying the UV to load the textures in the material (in the Blender file the mesh just has the one default named ‘UVMap’)?
Author

Posts