We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Replacing textures rather than materials

Home Forums Puzzles Replacing textures rather than materials

Viewing 15 posts - 1 through 15 (of 77 total)
  • Author
    Posts
  • #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.

    #3213

    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

    #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).

    • This reply was modified 4 years, 8 months ago by vincent.
    #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?

    #3221

    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

    #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 ?

    #3223

    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

    #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?

    #3225

    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

    #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.

    #3227

    No worries, thank you for participating! :good:

    Chief 3D Verger | LinkedIn | Twitter

    #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.

    #3265

    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

    #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)”

    #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’)?

Viewing 15 posts - 1 through 15 (of 77 total)
  • You must be logged in to reply to this topic.