joeBImagine

Members
  • Content Count

    30
  • Joined

  • Last visited

Everything posted by joeBImagine

  1. Hello Babylon community!! I have a query concerning implementing a callback in a callback for taking a screenshot of cameras. I have this function call createCameraView: function (camera) { let src; BABYLON.Tools.CreateScreenshot(engine, camera, { width: 293, height: 150 }, function (data) { src = data; }); return src; }, the callback function actually saves out the image for each camera (including the hidden on's) in the scene as a base64 to the images src tag, but that saving part takes time. The part that I am confused about is actually setting up a callback for the callback, that lets me know when the image itself is done rendering. I am sorry I do not have a playground as most of this code is internal. And also please forgive me if this is not enough information to understand my issue. Cheers!
  2. joeBImagine

    Screenshot adding a callback to a callback

    Come to think of it, you are right. I tried that before, but I wasn't implementing it correctly it would seem. let img = new Image(); img.onload = function () { alert("image is loaded"); } img.src = src;
  3. joeBImagine

    Screenshot adding a callback to a callback

    Aww yes! Something similar to a DOM image.onload callback. But mainly for when it is fully made, so that I can update my react toolbar
  4. I am under the suspicion that there is something I am missing in the Sky material. I am able to use the sky material in the playground as depicted in this link: https://www.babylonjs-playground.com/#ZU3JQZ#5 I also followed this doc link to the T: https://doc.babylonjs.com/extensions/sky However when I download the code, and run it on a local server, it is nothing but a blank screen. Any thoughts?
  5. joeBImagine

    Something missing in the Sky Material

    @Deltakosh wow so disappointed in myself right now, I did not . I took the doc as gospel and didn't think to add that. How do you all make it look so easy?! and thank you!
  6. @brianzinn thank you for that, looks like I was doing it wrong. But I did with your last tidbit and some tweaking, get it to work properly: //CREATE THE HIGHLIGHT LAYER let h1 = new BABYLON.HighlightLayer('hl', scene); //SET THE INITIAL STATE OF THE lastClickedMesh var let lastClickedMesh = null; let mesh = null; //ADD A POINTERDOWN OBSERVABLE scene.onPointerObservable.add(evt => { if (evt.pickInfo.hit && evt.pickInfo.pickedMesh !== undefined) { //STORES THE MESH INTO A VARIABLE mesh = evt.pickInfo.pickedMesh; let fabrics = document.querySelectorAll('.fabrics'); let currentFabric; fabrics.forEach(function(fabric) { fabric.addEventListener('click', evt => { console.log(obj[evt.target.id]); currentFabric = obj[evt.target.id]; if(mesh && currentFabric){ mesh.material = currentFabric; //console.log(evt.pickInfo.pickedMeshmesh); }else { mesh.removeMesh(mesh); } }); }); //HIGHLIGHTS THE CURRENT SELECTION if (newMeshes) { if (lastClickedMesh !== null) { h1.removeMesh(lastClickedMesh); } lastClickedMesh = mesh; h1.addMesh(lastClickedMesh, BABYLON.Color3.FromHexString('#4c90ef')); } } else { h1.removeMesh(lastClickedMesh); } }, BABYLON.PointerEventTypes.POINTERDOWN); } ); I can't emphasize enough how awesome this community is :D!!
  7. Hello Babylon community!! I am having an issue that I am not sure how to resolve. Here is my github.io to get a better sense of the problem: https://jbimagine.github.io/# In the link above I have a babylon file loaded, and in the side ui (if you click on the gear icon) several texture HTML DOM elements. What I am trying to do is when you click on the mesh, then click on the texture swatch in the ui, the texture on the mesh will change. For some reason however, it is not working correctly. I click on the mesh, then click on the swatch, then have to click back on the mesh for the texture to actually change. Note that I am not using the set name of the mesh, but rather a const created from the pick.result so that it will be based off of any loaded mesh. Any help on what I am missing (probably something stupid easy) would be awesome! Also I am curious if it would have been easier, and more efficient to use the gui?
  8. I think I understand what you are saying. change my window.addEventListener ('canvas') to this: canvas.addEventListener('pointerdown', () =>{ }
  9. @Arte @brianzinn Forgive the delay in a response!! So I've set the selectedMesh as a global variable above my main function. But still not able to change textures. I think it may be something to do with the window.addEventListener(canvas,..) as now I am not able to generate console.log reports when I select the mesh but I am not certain with my limited knowledge. Updated github.
  10. Thank you for the suggestions @brianzinn. If I am understanding correctly you are saying this correct: window.addEventListener(canvas, () => { const pickResult = scene.pick(scene.pointerX, scene.pointerY); console.log(pickResult.hit); let selectedMesh = null; if (pickResult.hit === true) { selectedMesh = pickResult.pickedMesh; if (selectedMesh && currentFabric) { selectedMesh.material = currentFabric; } } console.log(selectedMesh); console.log(currentFabric, 'currentMesh'); }); If I am inputting that correctly, the texture change no longer works.
  11. @JohnK You know what, you are right. It works on my ipad correctly as well. Never thought to try that. However on desktop , in both chrome and edge the issue persists.
  12. Hello BabylonJs peeps!! I am currently able to select and deselect a mesh using actions and triggers as seen in this included playground: http://www.babylonjs-playground.com/#WG9OY#9. I am curious however if there is a way to deselect the mesh if you click anywhere in the scene or even on another mesh Also when I create the same code using an array of meshes, I get errors. I thought wrapping the solution into a for loop would work, but alas I think I am missing something. for (i = 0; i < newMeshes.length; i++) { //select the meshes in the scene newMeshes[i].actionManager = new BABYLON.ActionManager(scene); var hl1 = new BABYLON.HighlightLayer("hl1", scene); const action1 = new BABYLON.ExecuteCodeAction( BABYLON.ActionManager.OnPickTrigger, () => { hl1.addMesh(newMeshes[i], BABYLON.Color3.White()); } ); const action2 = new BABYLON.ExecuteCodeAction( BABYLON.ActionManager.OnPickTrigger, () => { hl1.removeMesh(newMeshes[i]); } ); newMeshes[i].actionManager.registerAction(action1).then(action2); }
  13. joeBImagine

    The Wingnut Chronicles

    @Wingnut you asked what am I working on!! So I will share in the wingnut chronicles!! I am currently working on a babylon prop loader and texture changer. As I love 3d, and have had a desire to get better with my javascript (and a desire to move to the web team ), I thought learning babylon and Javascript at the same time would be an awesome endeavor. Couldn't do it without this awesome community however. As they say sharing is caring, so my source code is here: https://github.com/jbimagine/Babylon1 and a live demo here: jbimagine.github.io. It is still very much a work in process, and extremely rough around the edges.
  14. @Wingnut that is good to know! And I finally figured out how to mark the thread solved hahaha!! I will let you know what I am working on over at the Wingnut Chronicles!!
  15. joeBImagine

    Babylon exporter for Maya ?

    @dsman would exporting from maya to blender work as an interim solution? As they have a Babylon exporter for blender.
  16. @Wingnut you are awesome thank you!! You all make it look so easy!!
  17. @brianzinn That is awesome thank you! Quick question, is there also a way to deselect the sphere if you click on the scene itself, in the same vein that applications like 3ds max, blender, etc work? Or would that be difficult as clicking in the scene is currently only mouse click and drag.
  18. joeBImagine

    Issue with BABYLON.SceneLoader.Load

    const newMeshes = newScene.meshes; newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1); newMeshes[0].position.y = 0; Mr_Pinc you were right. newScene.meshes worked, than you for the help!!!
  19. Hello! I am having an issue with BABYLON.SceneLoader.Load. I am able to initialize a file from a local directory no problem. However, unlike BABYLON.SceneLoader.ImportMesh, which puts the imported meshes into an array, I have no clue what the mesh names would be or how to access them. I am also for some reason, unable to initialize the debug layer (It works fine when I create the scene using ImportMesh). The reason I am using SceneLoader.Load instead of SceneLoader.ImportMesh, is because I want each time someone clicks on "New Scene" in the html Navigation, it creates a new scene. if (BABYLON.Engine.isSupported()) { const canvas = document.getElementById('renderCanvas'); const engine = new BABYLON.Engine(canvas, true); const inputElement = document.getElementById('fileUpload'); inputElement.addEventListener( 'change', function handleFiles(event) { const fileList = this.files[0]; const reader = new FileReader(); reader.addEventListener('loadend', () => { let data = reader.result; BABYLON.SceneLoader.Load( '', 'data:' + data, engine, function(newScene) { // Wait for textures and shaders to be ready newScene.executeWhenReady(function() { var camera = new BABYLON.ArcRotateCamera( 'ArcRotateCamera', 0, 0, 0, BABYLON.Vector3.Zero(), newScene ); camera.setPosition(new BABYLON.Vector3(0, 0, -3)); newScene.activeCamera = camera; newScene.activeCamera.attachControl(canvas); newScene.clearColor = new BABYLON.Color3(1, 1, 1); let light0 = new BABYLON.HemisphericLight('Hemi0', new BABYLON.Vector3(0, 1, 0), newScene); light0.intensity = 0.7; light0.diffuse = new BABYLON.Color3(1, 1, 1); light0.specular = new BABYLON.Color3(0, 0, 0); light0.groundColor = new BABYLON.Color3(0, 0, 0); let light1 = new BABYLON.HemisphericLight('Hemi1', new BABYLON.Vector3(0, -1, 0), newScene); light1.intensity = 0.7; light1.diffuse = new BABYLON.Color3(1, 1, 1); light1.specular = new BABYLON.Color3(0, 0, 0); light1.groundColor = new BABYLON.Color3(0, 0, 0); // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { newScene.render(); }); window.addEventListener('resize', () => { engine.resize(); }); }); }, function(progress) {} ); }); reader.readAsText(fileList); }, false ); }
  20. joeBImagine

    Issue with BABYLON.SceneLoader.Load

    I actually got the debugger to work (should have been newScene and not just scene). But I am still slightly confused on the scene.meshes part.
  21. joeBImagine

    Issue with BABYLON.SceneLoader.Load

    Just for clarity I can take scene.meshes (or in this case newScene.meshes) and get the meshes that are in the scene and wrap them in an array for later use? Also do you know why the debugger doesn't work with this method?
  22. joeBImagine

    Understanding FilesInput Class

    Awesome thank you Delta!! You are boon of knowledge!!
  23. I am trying to wrap my head around the differences. Currently I do understand ImportMesh for the most part (allows you to import a mesh into an existing scene)and how to create a scene, but FilesInput not so much. Are there any examples (for noobs!) that go into more detail than the documentation? I have looked at the sandbox version with filesInput, but that does not show a babylon file unless said babylon files has lights and cameras. And as always, please forgive me if this question has already been asked and answered!
  24. joeBImagine

    Custom textures on blender file from 3ds max

    Good to know thank you!! I am still green to this!! But I am loving babylon!
  25. Hello Babylon aficionados!! I was hoping you all would be able to help. I am not sure what I am doing wrong, but I am trying to attach a custom texture to a babylon file I exported from 3ds max. This is the error in the console: babylon.js:3 BJS - [06:55:16]: Babylon.js engine (v3.0) launched babylon.js:3 BJS - [06:55:17]: Material not found for mesh fc4bd914-849c-4954-9f0c-8c25b763cecb t._WarnEnabled @ babylon.js:3 importMesh @ babylon.js:28 m @ babylon.js:28 (anonymous) @ babylon.js:28 a.oncomplete @ babylon.js:29 babylon.js:3 BJS - [06:55:17]: Material not found for mesh 6569d8e7-4fbc-478c-af4f-dbe31c4db185 t._WarnEnabled @ babylon.js:3 importMesh @ babylon.js:28 m @ babylon.js:28 (anonymous) @ babylon.js:28 a.oncomplete @ babylon.js:29 Which I understand, but I do not understand why using Babylon.Standardmaterial is not working. Here is the javascript code. Let me know if anything else is needed to diagnose!! var canvas, engine, createScene, scene, light, camera, sphere, box; canvas = document.querySelector("#renderCanvas"); engine = new BABYLON.Engine(canvas, true); createScene = function() { scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3(0.85, 0.85, 0.85); scene.ambientColor = new BABYLON.Color3(0.75, 0.75, 0.75); //var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); camera = new BABYLON.ArcRotateCamera("camera1", 0, 0, 10, new BABYLON.Vector3.Zero(0, 0, 0), scene); //camera.radius = 5000; camera.setPosition(new BABYLON.Vector3(0, 5000, -10)); camera.setTarget(BABYLON.Vector3.Zero(0, 5000, 0)); camera.attachControl(canvas, true); camera.wheelPrecision = .1; light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = 1.0; sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 500, scene); //var box = BABYLON.Mesh.CreateBox("box", 6.0, scene, false, BABYLON.Mesh.DEFAULTSIDE); sphere.position.y = 1; //var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene); var meshVar = BABYLON.SceneLoader.ImportMesh("","scenes/31375_ElliotFabricMicrofiber2PieceSectionalSofa_Graphite/test/", "ElliotMicrofiber2PieceSectionalSofa.babylon", scene, function(newMeshes) { camera.target = newMeshes[0]; var customMaterial = new BABYLON.StandardMaterial("customMaterial", scene); customMaterial.diffuseTexture = new BABYLON.Texture("scenes/31375_ElliotFabricMicrofiber2PieceSectionalSofa_Graphite/test/fabric.dif.jpg", scene); var customTexture = scene.meshes[0]; customTexture.material = customMaterial; } ); sphere.dispose(); return scene; }; scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); window.addEventListener("resize", function() { engine.resize(); });