djeustice

Members
  • Content count

    10
  • Joined

  • Last visited

  1. PBR Texture [SOLVED]

    This code works! Thank you guys for your help! myKayak2 = BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { myKayak2 = newMeshes[6]; myKayak2.material.subMaterials[0].albedoTexture = new BABYLON.Texture("models/Lime_baseColor.png", scene); });
  2. PBR Texture [SOLVED]

    I found the correct mesh. It's newMesh[6]; To modify the base texture of the existing PBRMetallicRoughness, I've been trying out the code below. It doesn't work. But is this the right idea? I don't want to reassign the material and lose the other maps, just change the current texture. Thank you. myKayak2 = BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { myKayak2 = newMeshes[6]; myKayak2.albedoTexture = new BABYLON.Texture("models/Lime_baseColor.png", scene); });
  3. PBR Texture [SOLVED]

    Hello. I exported a Kayak model from Substance Painter 2 as a glTF with the Metallic Roughness configuration. The Kayak has a red/yellow gradient png texture on it. Exporting from Substance Painter 2 gave me Kayak_baseColor.png, Kayak,_normal.png, and Kayak_occlusionRoughnessMetallic.png textures. In my Babylon JS scene, I import the model (Kayak.gltf)and am trying to switch the Kayak_baseColor.png to Lime_baseColor.png on load. The Kayak loads into the scene with it's red/yellow gradient png texture on it, but doens't switch to the lime texture on load.. Am I missing PBR properties? Or are my properties wrong? Thanks. var myKayak2; BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { myKayak2 = newMeshes[0]; var LimeTexture = new BABYLON.PBRMetallicRoughnessMaterial("Lime", scene); LimeTexture.albedoTexture = new BABYLON.Texture("models/Lime_b aseColor.png", scene); LimeTexture.metallic = 0; LimeTexture.roughness = 1.0; myKayak2.material = LimeTexture; }); I tried changing the PBR material definition to this but still no luck: var myKayak2; BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { myKayak2 = newMeshes[0]; var LimeTexture = new BABYLON.PBRMaterial("Lime", scene); LimeTexture.albedoTexture = new BABYLON.Texture("models/Lime_baseColor.png", scene); LimeTexture.metallic = 0; LimeTexture.roughness = 1.0; myKayak2.material = LimeTexture; });
  4. Thanks for replying. I changed my Lime Standard material to PBR material and it seems to be working now. I think it was erroring because Kayak.gltf was looking for PBR properties: var myKayak2; BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { myKayak2 = newMeshes[0]; }); var LimeTexture = new BABYLON.PBRMaterial("Lime", scene); LimeTexture.albedoTexture = new BABYLON.Texture("models/Lime.png", scene); LimeTexture.baseColor = new BABYLON.Color3(1.000, 1.000, 1.000); LimeTexture.metallic = 0.0; LimeTexture.roughness = 1.0; LimeTexture.albedoTexture.hasAlpha = false; LimeTexture.backFaceCulling = false; document.getElementById("KayakLime").addEventListener("click",function () { myKayak2.material.subMaterials[2] = LimeTexture; });
  5. Hello. My Kayak model has 4 sub materials on it. I have a button called "KayakLime". I'd like this button to change sub material #2 from Peach.png to Lime.png when clicked. Example #1 below works, but it changes the 4 kayak sub materials all to Lime.png. var myKayak2; BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { myKayak2 = newMeshes[0]; }); var LimeTexture = new BABYLON.StandardMaterial("Lime", scene); LimeTexture.diffuseTexture = new BABYLON.Texture("models/Lime.png", scene); LimeTexture.diffuseTexture.hasAlpha = false; LimeTexture.backFaceCulling = false; document.getElementById("KayakLime").addEventListener("click",function () { myKayak2.material = LimeTexture; }); Example #2: I thought this click code below would change only sub material #2 to Lime.png. However it turns the kayak invisible. Do I need to add more properties in the LimeTexture material? Or is it something else I'm missing? document.getElementById("KayakLime").addEventListener("click",function () { myKayak2.material.subMaterials[2] = LimeTexture; });
  6. Change texture on glTF model

    This seems to be working for changing just the diffuse texture. I'll take a look at exporting PBRMetallicRoughness from 3ds Max. Thank you kindly. var myKayak2; BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { myKayak2 = newMeshes[0]; var BWTexture = new BABYLON.StandardMaterial("BlueWave", scene); BWTexture.diffuseTexture = new BABYLON.Texture("models/BlueWave.png", scene); BWTexture.diffuseTexture.hasAlpha = false; BWTexture.backFaceCulling = false; myKayak2.material._subMaterials[2] = BWTexture; });
  7. 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; } } }
  8. Hello. I have this Seat.gltf model in my scene that I exported it from 3ds Max. Anyways, how do I change the diffuse texture on it? The seat imports with a black texture (SeatBlack_baseColorTexture.png). I'd like to change it to this (SeatLime_baseColorTexture.png). My goal eventually is to let the user pick from a variety of seat colors. Any pointers in the right direction would be appreciated. Thanks. var mySeat = BABYLON.SceneLoader.Append("./models/", "Seat.gltf", scene, function (scene) { }, null, function (scene) { var LimeTexture = new BABYLON.PBRMaterial("", scene); LimeTexture.baseColorTexture = new BABYLON.Texture("models/SeatLime_baseColorTexture.png", scene); mySeat.material = LimeTexture; });
  9. 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; };
  10. 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(); }); });