Jump to content

[SOLVED] Clicking Object to Change Texture Flips Normals


djeustice
 Share

Recommended Posts

Good Morning.  I'm new to Babylon JS and JavaScript.  When I click on the Kayak in the scene the texture changes from a peach texture to the blue wave texture, which is perfect.  However the Normals seem to flip.  I have no idea why this is happening.  Should I use different code to achieve the texture change on click?  Thanks.

window.addEventListener("DOMContentLoaded", function() {
    var canvas = document.querySelector("#renderCanvas");
      // Load the BABYLON 3D engine
    var engine = new BABYLON.Engine(canvas, true);
          // -------------------------------------------------------------

var createScene = function () 
{
    // This creates a basic Babylon Scene object (non-mesh)
    var scene = new BABYLON.Scene(engine);
    BABYLON.SceneLoader.ShowLoadingScreen = false;
    scene.collisionsEnabled = true;
    // glTF Files use right handed system 
    scene.useRightHandedSystem = true;              
    scene.clearColor = new BABYLON.Color3(0.99, 0.99, 0.99);
    scene.debugLayer.show();
    
    var camera = new BABYLON.ArcRotateCamera("Camera", 4.712, 1.571, 0.05, BABYLON.Vector3.Zero(), scene);
    camera.setPosition(new BABYLON.Vector3(85, 55, -115));
    camera.attachControl(scene.getEngine().getRenderingCanvas());
    camera.minZ = 0.01;
    camera.maxZ = 1000;
    camera.lowerBetaLimit = 0.1;
    camera.upperBetaLimit = (Math.PI / 2) * 0.99;            

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 1;             

   // Append sample glTF model to scene
    var myKayak;
    BABYLON.SceneLoader.Append("./models/", "Kayak.gltf", scene, function (newMeshes) {
    }, null, function (newMeshes) {
        myKayak.checkCollisions = true;
        myKayak.ellipsoid = new BABYLON.Vector3(10, 1, 5); 
    });    
    

/// Click to Change Texture ///
    var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene);
    BWTexture.diffuseTexture = new BABYLON.Texture("models/BlueWave.png", scene);   
    scene.onPointerPick = function(evt, pickInfo) {
        if(pickInfo.hit) {
            if (pickInfo.pickedMesh != null){
                alert(pickInfo.pickedMesh.name);
                pickInfo.pickedMesh.material = BWTexture;
            }
        }
    }    

    return scene;

};     
  // -------------------------------------------------------------
    var scene = createScene();
    engine.runRenderLoop(function () {
     scene.render();
    });

    window.addEventListener("resize", function () {
     engine.resize();
    });
});

 

BeforeClick.jpg

AfterClick.jpg

Link to comment
Share on other sites

Could you please give an example of what the properties might be?  The Kayak.gltf is a model I exported from 3DS Max.  It only has 1 texture in the diffuse slot.  I tested the texture change on a procedural Babylon sphere and it works fine.  How should I modify the material properties on the Kayak.gltf?  Thank you.

Texture Change works on procedural sphere, but not kayak.gltf:

var createScene = function () 
{          

    var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 9.0, scene);
    var Lime = new BABYLON.StandardMaterial("Lime", scene);
    Lime.diffuseTexture = new BABYLON.Texture("models/Lime.png", scene);
    sphere1.material = Lime;   

    var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene);
    BWTexture.diffuseTexture = new BABYLON.Texture("models/BlueWave.png", scene);   
    
    scene.onPointerPick = function(evt, pickInfo) {
        if(pickInfo.hit) {
            if (pickInfo.pickedMesh != null){
                alert(pickInfo.pickedMesh.name);
                pickInfo.pickedMesh.material = BWTexture;
            }
        }
    }    
    return scene;
};

BeforeClick.jpg

AfterClick.jpg

Link to comment
Share on other sites

AS I mentioned earlier I think the difference comes from the backFaceCulling property (http://doc.babylonjs.com/babylon101/materials#back-face-culling). Just set it up like it was previously set up:

var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene);

BWTexture.backFaceCulling = pickInfo.pickedMesh.material.backFaceCulling

pickInfo.pickedMesh.material = BWTexture;

 

Link to comment
Share on other sites

Thank you, this worked!  The Kayak switches textures from Peach to BlueWave.png.  Here's the code that worked for me, thanks again!

    scene.onPointerPick = function(evt, pickInfo) {
        if(pickInfo.hit) {
            if (pickInfo.pickedMesh != ground){
                alert(pickInfo.pickedMesh.name);
                
                var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene);
                BWTexture.diffuseTexture = new BABYLON.Texture("models/BlueWave.png", scene); 
                BWTexture.backFaceCulling = pickInfo.pickedMesh.material.backFaceCulling;
                BWTexture.diffuseTexture.hasAlpha = false;
                BWTexture.backFaceCulling = false;
                pickInfo.pickedMesh.material = BWTexture;
            }
        }
    } 

Link to comment
Share on other sites

  • 8 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...