Search the Community

Showing results for tags 'babylonjs'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 284 results

  1. Hi. Thinks for reading my question. I am first on babylon.js I am developing viewer can load obj on babylon.js How to set backfaceculling of loaded obj file in babylon.js? My viewer showed backfaceculling state. Therefore I did work as follow. mesh = loader.addMeshTask("bane", "", "Assets/"+ type +"/", id + ".obj"); mesh.onSuccess = function (task) { allMesh = task.loadedMeshes; for(i=0; i<task.loadedMeshes.length;i++) { submesh = allMesh[i]; submesh.material.backFaceCulling = false; ... } but it didn't work rightly. http://localhost/shedbuilder/sheds/ also. To set hasAlpha didn't work. submesh.material.diffuseTexture.hasAlpha = true; please help me. I uploaded my obj file. myfile.rar Best regards.
  2. Hi, Is it normal that declaring a second AdvancedDynamicTexture disable the isPointerBlocker on the controls of the first one ? Playground here Thanks
  3. I'm new to babylonJS, so please forgive if this question is stupid. I'd like to use the playground and import an OBJ from my computer into the scene. I've looked at the documentation, but it seems to indicate I need a special loader. The sample of which does not work on my computer/Chrome or IE browser (i.e. And the other way seems to be to just use playground and use Assetsmanager. But the forums seem to indicate that Assetsmanager is for loading scenes or .babylon file and/or you "simply cant' do that, the OBJ must be on the web") I'm a little unclear on this. It seems a simple request, to be able to load an OBJ into playground and then save it off again as a zip (babylon scene, I assume, or perhaps just a zip of html code). I even saw someone try using loader.addMeshTask("A2", "", "http://localhost:8080/A2/", "a2.obj"); Which apparently works for them, but again, not me (though perhaps one must somehow set up one's computer to act like a localhost? ) Also, the docs seem limited on this...if I'm missing something (other than the Assetsmanager tutorial and page, obj loader page, and link already provided) could someone point me at the docs I need? Much appreciated,
  4. I wrote an interactive neural network visualization web program where people can explore the inner workings of neural networks. Here is the description page (where I mention and link to BabylonJS in the FAQ): This is the browser-based application:
  5. Hello I want to load a scene generated from blender, the generated file is .babylon, in my local, I have no a problem loadding the sene but in the host I can´t, in the console I have the next problem: Uncaught Error: Error status: 404 - Unable to load models/scene1/landScape.babylon at XMLHttpRequest.e.onreadystatechange (babylon.custom.js:3) Searching in google I se that I need to add mime types but I don´t know how. my html code is: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Entorno Mexicano</title> <link href="css/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href=""> </head> <body> <canvas id="renderCanvas"></canvas> <!-- Carga de los js que se utilizan --> <!-- Babylon.js --> <script src="js/babylon.custom.js"></script> <script src="js/jquery-3.1.0.min.js"></script> <!-- codigo js personalizado --> <script src="js/main.js"></script> </body> </html> and my js file is: if (BABYLON.Engine.isSupported()) { canvas = document.getElementById("renderCanvas"); engine = new BABYLON.Engine(canvas, true); BABYLON.SceneLoader.Load("models/scene1/", "landScape.babylon", engine, function (newScene) { scene = newScene; // Wait for textures and shaders to be ready scene.executeWhenReady(function () { // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { scene.render(); }); // Funcion para cuando se redimensiona la ventana $(window).on('resize', function() { engine.resize(); }); }); }, function (progress) { $(".textoCarga").text( ((progress.loaded/*100).toFixed(2) + "%"); }); } Any idea why I can do Thanks an regards
  6. I know something seems to be wrong here. I"m using the simpliest example, the one in the beginning docs, the full HTML given there. I am running static. I've managed to get the HTML to load statically (i.e. no localserver, no webserver, just off the desktop) and have the generated babylon.js file in the same directory as the index.html page. I know it's loading and finding the .js file. It fails in the same place whether I use my custom generated babylon js file or if I point the page to the same babylon.js file that the playground uses. the error from the inspector is: Uncaught TypeError: scene.render is not a function I am running in Chrome, but I have no issues with running Playground in Chrome. Also the HTML does the same thing in IE (though it's debugger picks up no errors, just won't run beyond creating the canvas). Error reported from Chrome: BJS - [17:31:37]: Babylon.js engine (v3.1-alpha) launched index.html:79 Uncaught TypeError: scene.render is not a function at index.html:79 at r._renderLoop (babylon.js:4) It points at the line in index.html (at scene.render) engine.runRenderLoop(function () { // Register a render loop to repeatedly render the scene scene.render(); }); Attaching the index.html file. Any ideas? I don't want to have to deal with localserver. And am working on a way to load OBJ files (that's how I got here. I wanted to see if I could get the objloader to work from the desktop, since I cannot get it to work in the Playground via file chooser. I can only get .babylon files to load successfully in that case.) If you're curious about that, see: So I thought I would try a different tack. After all, I should be able to load .js files locally (static HTML), including the objloader extension. But I didn't anticipate that I would have problems with getting babylon.js to work in that situation. It seems it must be something simple, after all this is just the beginner sample that the docs list. Nothing fancy. But after a number of hours of searching forums and experimenting, I'm out of ideas. Thanks! index.html
  7. "importScripts" not found

    Hello, There is an error: "importScripts" not found when I compile BABYLONJS source in VS2017. And the source file is "babylon.collisionWorker.ts". My project is TYPESCRIPT. How can I fix this? Thanks for your help.
  8. Hi, I've got a problem with loading scene with .babylon extension. I making project in .NET Core with BabylonJS addon and I got a problem with this script: // Get the canvas element from our HTML below var canvas = document.querySelector("#renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); // ------------------------------------------------------------- engine.enableOfflineSupport = false; var scene = new BABYLON.Scene(engine); BABYLON.SceneLoader.Load("./js/", "babilon_blender.babylon", engine, function(newScene){ var scene = newScene; scene.executeWhenReady(function(){ scene.activeCamera.attachControl(canvas); engine.runRenderLoop(function(){ scene.render(); }); }); }); Page is build and start loading scene, but this is over. Neverending loading with Babylon mark. Could someone help me and advice what should I do to make a load scene properly? Thanks for help
  9. Car Configurator

    Hello guys. I'm extremely happy to share with you my last challange for Please feel free to play with it, test it, report bugs, come with suggestions. Here is the link : Thank Babylonjs for making this possible. PS: It works pretty well on mobile device too, but there i have a problem with the GUI, and I'll expose it on Questions section.
  10. interface html

    Hello, i'm trying to create a configurator for furniture based on this model : but i didn't find how to create the ui on the right. Can we interacte whis the scene with html ? if its possible how do i do ?
  11. Hello I'm trying to cover the visible area of an element through another. The camera is behind a rectangle, and at the bottom of the scene there is a picture. I'm trying to cover the area of the picture visible through the rectangle with a plane just like this : I've set up the scene with my elements but I have troubles to detect which part of the picture is visible through the rectangle. Maybe I can use BABYLON.Vector3.Project to have a projection of the picture in the rectangle ? That's my only lead at the moment to obtain a point based on the camera position. Do you guys have any idea of how I can achieve this ? Here is my playground so far : Thank you
  12. Hi, I'm trying to show the bounding box of a subMesh only. So I tried: scene.getBoundingBoxRenderer().renderList.push(subMesh.getBoundingInfo().boundingBox); scene.getBoundingBoxRenderer().render(); and the same thing with creating a new BoundingBoxRenderer but nothing append... Using mesh.showBoundingBox = true; and mesh.showSubMeshesBoundingBox = true; always show ALL the bounding boxes... So, is it possible to do what I'm expecting or am I just doing something wrong ?
  13. Hey everyone ! Yesterday, I tried to upgrade my scripts to the the latest version but I found a little problem I think. When I increase the FreeCamera speed, the sensibility or sensitivity (I don't know which word I should use) just goes wrong So I recreate the problem here : Can someone tell me what can I do to fix this problem ? Thank you in advance!
  14. Hi everyone, I'm trying run require('babylonjs') on server-side, but getting following error: DebugLayer.InspectorURL = window.location.href.split('/')[0] + '//'; TypeError: Cannot read property 'href' of undefined Any suggestions are welcome
  15. how can i get intersection of Two Cubes can any one help to find how can I get the intersected area of cubes. actually, I want to highlight the intersected area in between these two cubes. also, want to print into console how much points are intersected.
  16. I'm stuck with loading my meshes. I'm new to all the 3D and modelling so any thoughts are highly appreciated. Basically I want to extends Babylons default Mesh class called BaseMesh and add a 'load' function to it to get rid of clutter in my scene code. I'm extending this BaseMesh class for each model I have. My BaseMesh class: (Note that all code examples are written in TypeScript) // BaseMesh.ts class BaseMesh /* extends BABLYON.Mesh */ { public readonly BASE_URL: string; // I want these to be static public readonly MODEL_URL: string; // I want these to be static public readonly NAME: string; // I want these to be static public body; /* constructor( scene ) { // I don't know what to do here super( this.NAME //name scene // scene null // parent ? // source ); } */ public load( assetsManager: BABYLON.AssetsManager ) { return assetsManager.addMeshTask( this.NAME + ' task', // name "", this.BASE_URL, this.MODEL_URL ); } public onLoaded( results ) { // I don't know what to do here this.body = results.loadedMeshes[0]; } public update(): void {} }; A model class would looks like this: // Robot.ts class Robot extends BaseMesh { public readonly BASE_URL: string = '/models/'; public readonly MODEL_URL: string = 'robot.babylon'; public readonly NAME: string = 'robotMesh'; public update(): void { this.body.rotation.y += 0.03; } } In my code above I store the loadedMesh from the AssetsManager into this.body. But here is question 1: why is my model already showing on the scene when the meshtask has run? I'm only loading a mesh, I've not put anything about putting it on the scene. Question 2: How do I extend my BaseMesh class from BABLYON.Mesh so that the result (loadedMeshes) of my load function is "the mesh itself" (instead of an attribute this.body). For example this would mean I could change my update function to 'this.rotation.y += 0.03;' and just generally makes more sense. Question 3: I'm really confused about the relationship between my "code" and my "model/.babylon files". Is there any good documentation/tutorials about this? These questions range from: - when is it healthy to split different parts of a model in different files - do I apply textures in my code or do I do that in my .babylon file - do I apply animations in my blender file or do I code them - ... This was a pain to type, if you have any questions please do ask Thank you in advance!
  17. Hi Team, I have got this layout created using various meshes. i'm generating serialised data and storing them in database(available in uploaded file below). Now i am facing the issue while loading the same json. I am using `data:SERIALIZEDJSONDATA` as first argument to `.Load` method(as suggested in one of the forum by @Deltakosh). However the only thing that's rendered is few blue color patches. what am i missing here.... Also, serialised data is huge. whats the best way to only save the meshed and load them. instead of saving other things. any help would be appreciated.... SavedLayout.txt
  18. Hi Everyone, I have created a grid using GridMaterial on box mesh. the issue is, the grid isn't coming complete. Its broken on all the edges(see the snapshot). i.e. no boundary lines to wrap everything in rectangle. i have also tried setting uOffset and voffset on material however its not working. what am i missing here? Here is my code: var gridBox = BABYLON.MeshBuilder.CreateBox("box1", { width: objectProperties.width-1, height: 0.05, depth: objectProperties.height + 1, updatable: true }, scene); gridBox.position = new BABYLON.Vector3(objectProperties.left + startFromLeftPosition + objectProperties.width / 2 - horizontalSlotHeight / 2, 10.05, startFromTopPosition - ( + (i > 0 ? 8 : 7))); var defaultGridMaterial = new BABYLON.GridMaterial("default", scene); defaultGridMaterial.majorUnitFrequency = 0; defaultGridMaterial.minorUnitVisibility = 0.1; defaultGridMaterial.gridRatio = 1; //defaultGridMaterial.uOffset = 0.5; //defaultGridMaterial.vOffset = 0.5; gridBox.material = defaultGridMaterial; gridBox.material.alpha = 0.5;
  19. Hey everyone I just have two simple question I cannot find an answer too. First Question: The SpriteManager needs a capacity parameter, but why does it need this? Why can I not change this during runtime? What does it actually do (in the background) (except for just not showing any sprites that exceed the capacity)? Does it hurt performance at all if I just put a 'crazy' high number? Can the manager not just +1 the capacity by itself in the background whenever an instance of the sprite is created? It just seems so odd that I have to give it a number and I feel like I'm missing something here. My second question is how to exactly use the AssetsManager for sprites. The documentation gives this example: var imageTask = assetsManager.addImageTask("image task", "img.jpg"); imageTask.onSuccess = function(task) { console.log(task.image.width); } But that doesn't explain how to use it with a Sprite since the task returns an image, and a SpriteManager only requires an image url. Thank you in advance!
  20. Hi Everyone, I am trying to prevent collision of ribbon elements when they are dragged. However its not working. What am i missing here? I have also tried setting various ellipsoid property to mesh. however it didn't worked as well.
  21. I am trying to create a light on the camera that light up the area when the camera gets close to an object. I had tried it with a point light, where it wouldn't give me the effect I needed unless the intensity too high, causing the shadows on the wall the be bleached out. Now I am trying it with the spot light. This give a slightly better effect, but the light doesn't act light a flashlight when I start to rotate around an arch. I cant understand how the spotlight can rotate in the correct directing the camera is facing. DEMO: Issue: The light mirrors the cameras rotation, eg. I rotate the camera anti-clockwise(to the left), I should start to see the spotlight shining to the right corner of the wall. Instead the light moves the the left of the wall before appearing only on the right wall. Desired Results: When I rotate the camera to look right, I wish for the spot light to shine in that direction. If there is any more info needed. please ask. Ignore the Black and Red as there are textures I have on my local computer. Thanks in advance.
  22. Hello, I am having some trouble taking a screenshot. If you followed along with the tut, at: Render A Scene you see that they only provided one line which is BABYLON.Tools.CreateScreenshot(engine, camera, size); With size and your camera being the variables that you can change. When I implemented this, I would get a black screenshot. I first thought that maybe the it was taking a screenshot before the page rendered so I added a simple loop at the bottom of the function and added an alert box to wait until the scene loaded before the screenshot would execute. But for some reason I am still getting a black/clear screenshot. Thank you for your input var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); //Needed for the CreateScene Function var createScene = function () { var scene = new BABYLON.Scene(engine); // Setup camera var camera = new BABYLON.ArcRotateCamera("Camera", 0, 10, 0, BABYLON.Vector3.Zero(), scene); camera.setPosition(new BABYLON.Vector3(-10, 10, 25)); camera.attachControl(canvas, true); // Lights var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 5), scene); var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(0, -10, 5), scene); var light2 = new BABYLON.PointLight("Omni2", new BABYLON.Vector3(10, 0, 5), scene); var light3 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 2), scene); var light4 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 5, -10), new BABYLON.Vector3(0, -1, 0), 0.8, 3, scene); var light5 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene); var material = new BABYLON.StandardMaterial("kosh", scene); var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene); var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 7.5, 3, 6, 6, 1, scene); var box = BABYLON.Mesh.CreateBox("box", 6.0, scene); // Creating light sphere var lightSphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, .5, scene); var lightSphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene); var lightSphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene); //Shifting position up of Sphere sphere.position.y = 5; box.position.y = -2; //generating shadows var shadowGenerator = new BABYLON.ShadowGenerator(1024, light3); shadowGenerator.getShadowMap().renderList.push(box); shadowGenerator.getShadowMap().renderList.push(sphere); shadowGenerator.getShadowMap().renderList.push(cylinder); //Colors lightSphere0.material = new BABYLON.StandardMaterial("red", scene); lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0); lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0); lightSphere1.material = new BABYLON.StandardMaterial("green", scene); lightSphere1.material.diffuseColor = new BABYLON.Color3(0, 0, 0); lightSphere1.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphere1.material.emissiveColor = new BABYLON.Color3(0, 1, 0); lightSphere2.material = new BABYLON.StandardMaterial("blue", scene); lightSphere2.material.diffuseColor = new BABYLON.Color3(0, 0, 0); lightSphere2.material.specularColor = new BABYLON.Color3(0, 0, 0); lightSphere2.material.emissiveColor = new BABYLON.Color3(0, 0, 1); // Sphere material material.diffuseColor = new BABYLON.Color3(1, 1, 1); sphere.material = material; // Lights colors light0.diffuse = new BABYLON.Color3(1, 0, 0); light0.specular = new BABYLON.Color3(1, 0, 0); light1.diffuse = new BABYLON.Color3(0, 1, 0); light1.specular = new BABYLON.Color3(0, 1, 0); light2.diffuse = new BABYLON.Color3(0, 0, 1); light2.specular = new BABYLON.Color3(0, 0, 1); light3.diffuse = new BABYLON.Color3(1, 1, 1); light3.specular = new BABYLON.Color3(1, 1, 1); light4.diffuse = new BABYLON.Color3(1, 0, 0); light4.specular = new BABYLON.Color3(1, 1, 1); light5.diffuse = new BABYLON.Color3(1, 1, 1); light5.specular = new BABYLON.Color3(1, 1, 1); light5.groundColor = new BABYLON.Color3(0, 0, 0); //Adding the SkyBox var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene); var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene); skyboxMaterial.backFaceCulling = false; skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("../textures/TropicalSunnyDay", scene); skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0); skyboxMaterial.disableLighting = true; skybox.material = skyboxMaterial; // Animations var alpha = 0; scene.beforeRender = function () { light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha)); light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha)); light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha)); lightSphere0.position = light0.position; lightSphere1.position = light1.position; lightSphere2.position = light2.position; lightSphere0.position.y = 5; lightSphere1.position.y = 5; lightSphere2.position.y = 5; alpha += 0.01; }; //ground var ground = BABYLON.Mesh.CreateGround("ground1", 100, 100, 2, scene); ground.receiveShadows = true; var materialGround = new BABYLON.StandardMaterial("grassTexture", scene); materialGround.diffuseColor = new BABYLON.Color3(1,1,1); materialGround.diffuseTexture = new BABYLON.Texture("../textures/grass.png",scene); ground.material = materialGround; //wait loop for the screenshot size = { width: 600, height: 400}; var i = 1; function myLoop () { setTimeout(function () { alert('Taking Screenshot!'); //Creating png screenshot done = BABYLON.Tools.CreateScreenshot(engine, camera, size); console.log(done); i++; if (i < 1) { myLoop(); //console.log(done1); } }, 5000) } myLoop(); //Returning the scene return scene; }; var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); console.log(scene); window.addEventListener("resize", function () { engine.resize(); });
  23. Ok I make two animation actions. ElevatorComponent1 (timeframe 0-240) ->Elevator1Action and ElevartorComponent2->Elevator2Action (timeframe 0-200). In Blender it looks fine/OK. Each elevator animate (loop animation of each object 1.ElevatorComponent1 and 2.ElevartorComponent2) Play look fine in blender. You can see it. (I attach blender file) I use only (Visual Location) for both animations. When I export from blender to .babylon. Exporter doesn't export as it should! Range and positions values are not OK !! WHY? IS THERE ANY BUG IN BLENDER->BABYLON EXPORTER ? (IS THERE ANY WAY TO MAKE FOR EACH OBJECT ITS OWN TIME_LINE FOR ANIMATION? HOW?) Can anybody take a look (ATTACHED FILE) and export it into babylon.js and see what is with range and positions values - is there bug??? Here is video 2017-06-26 10%3A49%3A24.mp4?_subject_uid=20766916&w=AADvbTlbugqn3hWDvW0TvcKrFlvCsAGWkYMR1IlRIqyGdg (if I export to .babylon (ATTACHED FILE) file and put load it or put in sandbox it is confusion !! @gryff @JCPalmer @Deltakosh Maybe we can fix with editor inside babylon file. BUT IF I BUILD MODEL OVER AND OVER (WORKFLOW) THAN IF EXPORTER DOES NOT WORK OK. THAN THIS IS USELESS. Is possible to fix exporter? Greetings Ian ModelFInish.babylon
  24. How can we lock arc camera so we can not set camera with mouse up or down ? gretings Ian
  25. Hi, Is there any example how to initialize BabylonJS WebGL 2.0 Context ? Do BabylonJS alrealdy support WebGL 2.0 Version? Can we try to initialize and use WebGL 2.0 with babylonJS? How do we init scene with BabylonJS as WebGL 2.0 ? Are BabylonJS's canvas,engine and scene initialization same as WebGL 1.0 ? Is thre any Playground how to use canvas, how to initialize engine and scene so BabylonJS use only WebGL 2.0 ? Greetings Ian