Search the Community

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(); }); });