djeustice

Members
  • Content Count

    21
  • Joined

  • Last visited

About djeustice

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. djeustice

    Alpha/Cutout Texture Question [SOLVED]

    Gasp, that worked! Thank you very much for your help! -Dave
  2. djeustice

    Alpha/Cutout Texture Question [SOLVED]

    Good morning and thanks for the reply! I uploaded the glb here: https://github.com/djeustice/engine-gltf The model was created in Modo. Thanks again! Dave
  3. Good afternoon. Today I was given a glb of an engine part. The artist added a cutout texture to the model. When I load it into my BJS scene, the engine has a transparent/ghost-like appearance. I thought adding backfaceCulling = false and hasAlpha = true would solve this but no luck. Here's my code below: var myEngine = BABYLON.SceneLoader.ImportMesh("", "models/", "2.glb", scene, function (newMeshes) { myEngine = newMeshes[0]; myEngine.material.backFaceCulling = false; myEngine.material.hasAlpha = true; }); Do I have to create a new material and add it to the glb like in this playground? http://www.babylonjs-playground.com/#YDO1F#18 Here is an image of the engine: Thanks, Dave
  4. djeustice

    [SOVLED] Imported Animation Problem

    Nice, checking the Do Not Optimize Animations worked! Thank you kindly! For future reference, is there a place I can share scenes with custom models? Can I upload custom models into the Playground? Thanks again!
  5. We created 2 versions of an animate crane in 3DS Max 2017. One has animated pivot points, the other is rigged with bones. I tested both animations in BablylonJS as .babylon file and as glTF files. Both have this loose, floating-like appearance where the animations are happening. There are no issues with the animation when played in 3DS Max. Does anyone have insight on how to fix this? Below is an example of the crane with animated pivot points:
  6. djeustice

    Play Animation Button [SOLVED]

    The animation button works now! This is the code I ended up with: var isAnimating = false; var meshesForAnimation = null; BABYLON.SceneLoader.ImportMesh("", "test/", "Crane.gltf", scene, function (newMeshes) { for (i = 0; i < newMeshes.length; i++) { scene.stopAnimation(newMeshes); isAnimating = false; } meshesForAnimation = newMeshes; }); document.getElementById("Button").addEventListener("click",function () { if(!meshesForAnimation){ return; } if (!isAnimating) { for (i = 0; i < meshesForAnimation.length; i++) { scene.beginAnimation(meshesForAnimation, 0, 300, true); } isAnimating = true; } else { for (i = 0; i < meshesForAnimation.length; i++) { scene.stopAnimation(meshesForAnimation, 0, 300, true); } isAnimating = false; } }); Thanks for pointing me in the right direction!
  7. djeustice

    Play Animation Button [SOLVED]

    Wonderful thank you! I'll try this out and report back my results.
  8. I received a model of a tractor / crane arm. It is boned and animated. I exported this crane arm out of 3DS Max as a glTF. When I import it into BabylonJS, the animation begins playing immediately. I would like import the crane arm and not have the animation play immediately. I have a "Play" button and I'd like the animation to start from frame 0 when clicked. I'd like the animation to stop and return back to frame 0 when the button is clicked again. Is creating a Play / Stop animation button fairly basic (loader.beginAnimation())? Do I have to work with skeletons? Below is my code: var loader = BABYLON.SceneLoader.ImportMesh("", "models/", "CraneArm.gltf", scene, function (newMeshes) { }); document.getElementById("AddOars").addEventListener("click",function () { });
  9. djeustice

    renderOutline Question

    First off, thank you all for the replies! Yes Wingnut, it is for clicking and selecting the kayak. I was hoping to use the yellow renderOutline because we use yellow outline for selection in our standalone Unity3d app. But right now I will be happy to get any type of selection working. I will check out the HighlightLayer and emissiveColors and let you know my results. Thanks again!
  10. djeustice

    renderOutline Question

    Awesome! I tried the MergeMeshes code above and this has the perfect effect I am looking for. Only problem is it looks like the normals on the kayak flipped. I thought setting test.backFaceCulling = false; would fix it but no luck. BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { var test = BABYLON.Mesh.MergeMeshes(newMeshes); test.backFaceCulling = false; test.renderOutline = true; test.outlineWidth = 0.01; test.outlineColor = new BABYLON.Color4( 255, 200, 0, 1); console.log(test.name); });
  11. djeustice

    renderOutline Question

    Hello. I have a kayak model in my scene and I would like the renderOutline to show around the model like in the playground examples below: http://www.babylonjs-playground.com/#18ZFZ9 http://www.babylonjs-playground.com/#18ZFZ9#2 Here is code importing the kayak: BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { }); ----------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------- I first tested out this code below. I checked index numbers 0-12 and newMeshes[6] is the only one that shows the outline around the model. Another problem is this changes my kayak hull texture as well: BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { newMeshes[6].renderOutline = true; newMeshes[6].outlineWidth = 0.01; newMeshes[6].outlineColor = new BABYLON.Color4( 255, 200, 0, 1); }); ----------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------- Next, I tried the loop like in this playground: http://www.babylonjs-playground.com/#18ZFZ9#2 . The outline shows around the model but is outlining the other meshes on the model as well. BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes) { for (var i = 0, max = newMeshes.length; i < max; i += 1){ newMeshes.renderOutline = true; newMeshes.outlineWidth = 0.01; newMeshes.outlineColor = new BABYLON.Color4( 255, 200, 0, 1); } }); ----------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------- This image below is exactly what I'm looking for. What would be the best way to achieve this? Thank you.
  12. djeustice

    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); });
  13. djeustice

    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); });
  14. djeustice

    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; });
  15. 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; });