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
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 385 results

  1. Hey guys, here's another random babylonjs newbie hoping to get some help :-) So i have been playing around with babylonjs for a while and i get better at it everyday but i just hit this stumbling block that i can't seem to figure out I have created a sample box for a demonstration of this frustration, get it 🤨 // Create sample box const sampleBox = BABYLON.MeshBuilder.CreateBox('sampleBox', { size: 10, updatable: true }, scene, true); sampleBox.isPickable = true; sampleBox.position = new Vector3(0, 0, 0); let verticesCount = sampleBox.getTotalVertices(); Then i used multimaterial to assign image textures to four of the faces of the sample box // Create four standard materials let material0 = new StandardMaterial('material0', scene); material0.diffuseTexture = new Texture('/some0_image.jpg', scene); material0.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material0.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material0.specularColor = new Color3.Black(); let material1 = new StandardMaterial('material2', scene); material1.diffuseTexture = new Texture('/some1_image.jpg', scene); material1.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material1.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material1.specularColor = new Color3.Black(); let material2 = new StandardMaterial('material2', scene); material2.diffuseTexture = new Texture('/some2_image.jpg', scene); material2.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material2.diffuseTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE; material2.specularColor = new Color3.Black(); let material3 = new StandardMaterial('material3', scene); material3.diffuseTexture = new Texture('/some3_image.jpg', scene); material3.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material3.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; material3.specularColor = new Color3.Black(); // Define the multimaterial let maltimat = new MultiMaterial('multi', scene); maltimat.subMaterials.push(material0); maltimat.subMaterials.push(material1); maltimat.subMaterials.push(material2); maltimat.subMaterials.push(material3); // Assign mesh material to the mesh sampleBox.material = maltimat; // Define the subMeshes for the sample box new BABYLON.SubMesh(2, 0, verticesCount, 0, 6, sampleBox); new BABYLON.SubMesh(1, 0, verticesCount, 6, 6, sampleBox); new BABYLON.SubMesh(3, 0, verticesCount, 12, 6, sampleBox); new BABYLON.SubMesh(0, 0, verticesCount, 16, 6, sampleBox); So this is where the problem that has been bumming me for days comes in. I would like to change the texture of one of the faces when it is clicked, so one of the solutions i came up with to this problem was to change the submeshes material index to one of the four materials like below and it works partially. So in solution one, when a pick event happens i would access pickedMesh.subMeshes[some_index] and it would change the submeshes texture material to another one, the problem i encountered with this was Getting the correct index from the pickInfo to select the submesh from the submeshes array and change it, tried using faceId, bad idea and submeshId keeps returning the value 0 when i select any of all the faces The other problem with this approach was, i wanted to assign material to a face that has not been covered by the BABYLON.Submesh by getting the startIndex and indexCount automatically with the pickInfo and pushing the new data to the sampleBoxe's submesh array, In this case if the submeshId is not available, Yes i declared 4 subMeshes for a reason. scene.onPointerPick = (event, pickInfo) => { if (pickInfo.hit) { let indices = pickInfo.pickedMesh.getIndices(); let faceId = pickInfo.faceId; let index0 = indices[pickInfo.faceId * 3]; let index1 = indices[pickInfo.faceId * 3 + 1]; let index2 = indices[pickInfo.faceId * 3 + 2]; let submeshId = pickInfo.submeshId; let positions = pickInfo.pickedMesh.getVerticesData(VertexBuffer.PositionKind); sampleBox.submeshes[faceId].materialIndex = 0; // or using submeshId, which just returns 0 for some reson uuuuurrrrgh if (!submeshId) { // How do i get the indexStart and the indexCount from the pick info new BABYLON.subMesh(0,0,verticesCount, indexStart, indexCount, sampleBox) } else { sampleBox.submeshes[submeshId].materialIndex = 0; } // or hard coding it but whats the essence it would just change a face material that's // not even facing the screen and that's not my intent sampleBox.submeshes[2].materialIndex = 0; } } The other way to go about this was to use vertexData but i couldn't get this to work with images only manipulating the colors of the facets on pick event and used updateVertexData to update the colorKind and it worked like a charm. If there is a way to use vertexData to change a face material, i would appreciate and even buy you a soda and give you a hug if you were near me 🤗 let positions = [-5, 2, -3, -7, -2, -3, -3, -2, -3, 5, 2, 3, 7, -2, 3, 3, -2, 3]; let indices = [0, 1, 2, 3, 4, 5]; let colors = [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1]; let vertexData = new BABYLON.VertexData(); vertexData.positions = positions; vertexData.indices = indices; vertexData.colors = colors; vertexData.applyToMesh(sampleBox);
  2. My Problem: I want to select a GUI-Element with scene.pickWithRay or would like to be able to use a ray to select a GUI-Element on an object somewhere inside a Scene. Example: Person in VR goes to a Panel inside a game/ scene and wants to interact with it. In a VR-HMD he would be able to select it with his controllers. If he doesn't have controllers a fallback to pick with your head-ray and interact with a press of a button would be nice. If no controllers or buttons (like on simple Cell Phone), fall back to select when holding the ray on the GUI-Element is the plan. Current Solution: public getInteractiveButton (mesh:any) { var button = undefined; // get one of different button types if (mesh) { if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but0')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but0') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but1')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but1') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but2')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but2') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but3')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but3') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName('but4')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName('but4') } else if (mesh.material.emissiveTexture.getChildren()[0].getChildByName(name + '-playbutton')) { button = mesh.material.emissiveTexture.getChildren()[0].getChildByName(name + '-playbutton') } else { console.log('no button'); } } return button; } public vrinteract () { var pickInfo = scene.pickWithRay(Ray); if (pickInfo && pickInfo.hit &&'uiplane')) { if ((this.vrMouseOverMesh === undefined || this.vrMouseOverMesh === null) || (pickInfo.pickedMesh.uniqueId !== this.vrMouseOverMesh.uniqueId)) { if (this.vrMouseOverMesh) { let button2 = this.getInteractiveButton(this.vrMouseOverMesh); if(button2){ button2.onPointerOutObservable.notifyObservers(); } } let button = this.getInteractiveButton(pickInfo.pickedMesh); if(button){ button.onPointerEnterObservable.notifyObservers(); } this.vrMouseOverMesh = pickInfo.pickedMesh as BABYLON.Mesh; } } else if (this.vrMouseOverMesh) { let button2 = this.getInteractiveButton(this.vrMouseOverMesh); if(button2){ button2.onPointerOutObservable.notifyObservers(); } this.vrMouseOverMesh = null; } else { console.log('no but'); } } What I would Like to know is, if there would be a better option.
  3. Hey everyone. I am building a web based 3D interactive showcase of a spacecraft's journey. Most of the users are expected to be accessing it via low to mid range androids, so for performance I've decided upon three.js, rather than babylon.js. Correct me if I'm wrong in this. I've worked as a web developer and dabbled with game development with Phaser and Godot, but haven't built anything with three.js or babylon. So I wanted your advice on best practices and resources; things that my future self would wish I had known before starting. Here's some more information: The showcase will be separated into scenes, which can be navigated via a timeline, which also highlights the current date, if it's in range. In addition to the animated view of spacecraft's trajectory and position, it will have some cinematic scenes of the rocket exiting the atmosphere and a lander landing on the target body as well. I might even consider making the rover user controllable. Here's one inspiration from NatGeo. Any help is appreciated.
  4. Hello guys, I really like to use BabylonJs in my projects, is so useful. However I'm having a problem with a model exporting it from 3dsMax 2016 to .babylon format with the plugin of the last push in babylonjs repository. The log responses with "Exportation cancelled: Object reference not set to an instance of an object". I read some answers from different post in this forum talking about objects that not are in the scene, It's the problem? Ok, I read in github that I have to use the exporter till 3dsMax2015, however I use the exporten in a cube, directional light and a free camera ,so I believed that it may work in the current in the version I'm using of 3dsMax. Expecting your help, thanks in advance.
  5. I wanted to create a static world axes for my application using babylon js. The static axes should be like in Blender 3d editor application, their is a world axes at bottom left. The exact behavior I am looking for. Please help
  6. Hi everyone! This is Boxgun, my first game with BabylonJs! It’s a projectile game. You have 10 seconds to drag and shake the crystal you see on-screen to charge the box cannon, with which you try to fire a box as far as you can! The game stops when it detects your box is done moving. Controls: (in menu) Z or Enter: ‘OK’ in menu up, down: move up and down the current menu. (in game) Spacebar: fire P: pause, unpause …or you can just use your fingers or a mouse Note: Babylonjs only powers the 3d picture parts. The UI is actually an HTML5 DOM overlay. Enjoy!
  7. Hi, I was doing some tests with BabylonJS and while checking out the lights I found that the spotlight goes through some objects but not others? Is this a bug of babylonjs or something I've done? Example can be seen here, the spotlight hits the top cube/box/rectangle and passes through to the floor and smaller cubes/boxes/rectrangles. Ideas? Thanks D
  8. Looking to convert unity 3d game into HTML5 with facebook Instant api integration to release on Facebook Instant and messenger platform. Please contact experts who has relevant experience and a strong portfolio. Email: Skype: abishek.17
  9. Hello there! I basically just want to present my personal game project and to collect some feedback and ideas. The game is currently in the alpha phase and there might be bugs and problems but I feel confident enough to show it to the public. The game is called "Connect 3D" and it is a free to play competitive online browser game, where you have to place four tokens in a row to score. However, the game is not as easy as it sounds because the rows can be build in the three dimensional space. This GIF shows a local game session but the game can also be played online. You just have to send the link of the session to one of your friends. Currently you need a second person to play since there is no AI or computer enemy to play against. It works on mobile and on desktops, but you should try it on a modern device and with an up to date browser. There are known problems in Firefox on Windows and on Android. Therefore I recommend to try it in Chrome, Safari or Edge. You can give it a try for free on the website Connect 3D. The feedback is very important for me and the development. I really appreciate your feedback! I plan on implementing much more stuff if the feedback is positive. Possible next features: Personal Profiles and Statistics Level/Rank System (implies profiles) Public Games (join random people and play against them) Tournaments/Competitive Play Computer Opponent (AI) Different Game Modes and many more... Tell me your opinion and what you would enjoy the most in an upcoming version? Thank you for your help! iflow
  10. I included a manifest file for every .obj and .mtl files of my models and enabled IDBS storage. But only .obj files are being cached and not .mtl files. It makes a request to the web everytime to obtain the same .mtl files. How do I fix this? My manifest file (road.mtl.manifest) is: { "version" : 1, "enableSceneOffline" : true, "enableTexturesOffline" : true }
  11. If you have seen my collision with stls post, please disregard it unless you have a solution. recently I stated using instead of sketchup, and I made a house for testing. The problem is is that when I use BABYLON.SceneLoader.ImportMesh("", "assets/", "Clara_th.babylon", scene, function (newMeshes) { let house = newMeshes[0]; house.checkCollisions = true; house.position = new BABYLON.Vector3(75, 14, 50); }); I get collision with my walls, but only 1 of them move. I used boxes to make the walls and floor, all seperate objects, but the don't move as one. Is there any way to fix this? I tried this: BABYLON.SceneLoader.ImportMesh("", "assets/", "Clara_th.babylon", scene, function (newMeshes) { let house = newMeshes[0,1,2,3,4,5]; house.checkCollisions = true; house.position = new BABYLON.Vector3(75, 14, 50); }); But that didn't work. My site is here: The terrain is for testing purposes. Thanks for any help! Givo
  12. Play Wizard Shield Wizard Shield is a multiplayer first person shooter inspired by Magic Carpet and Magicka. At this point there are two classes: Stone Shot which is like a shot gunner and Power Stars which is sort of like a machine gunner. My objective is to create a game centred around building/casting spells dynamically to overcoming environmental puzzles and combat other players. It’s currently only tested on Chrome. I believe clicks don’t register on FF. Please let me know if you have any suggestions or ideas on the gameplay. I know there’s a lot to do but but I'm just focusing on making the gameplay good for now. Next things I want to add: - Players hands in and animated when throwing and casting spells. - A number of elements that can be combined together, for example stone and fire to create a fireball. Issue I’m having: The map is so terrible because most shapes I create in blender and than export don’t work without glitches. Once I export for BabylonJS, the camera can partially pass through them and physics objects may or may not collide properly. So I’ve been coping by copy-pasting the few wall shapes I have that work.
  13. Looking for BabylonJS developer to help with 3D viewer project. You can check out the current version by going to and placing objects on the screen and hitting 3D to see the viewer. Need updates, speed enhancements, other 3D functions.
  14. Hi all, I was wondering if it was possible to access variables from a previous pass in the shader, i.e color of fragment or something along those lines. I want to have something that changes color over time after an event occurs. So if I can access a time delta plus a previous color then I can slowly modify it to a new state, is this possible? *Note this is my first time working with shaders, please excuse any stupid questions 😕 Thanks.
  15. Back to the Lamps on Babylon / Open Contest! forum thread, I've commited myself to write a tutorial about my lightmap workflow. Here the demo: And here the first published version of the tutorial... but in french, for now 😄 I will soon make available an english version, don't worry. [edit] english version is out:
  16. Hi, im having a problem with the material of a Ribbon Mesh when im in wireframe mode, it appears in black all. It should be modified because it is changing the color of the mesh with colorKing, heres an example but in my code all mesh is black. In the playground, if you take a look of the sides, it has color. In my example it doesnt Help me out 😃
  17. Play "Offerlings" in your browser" For the game jam Ludum Dare 43 we decided to try out BabylonJS. We knew we wanted to create 3D game and for it to run on the web and on mobile browsers. We'd previously created our own JS engines with THREE.js as the renderer, but the time constraints of the game jam (3 days) meant we wanted to an existing game engine. We looked at other game engines that had HTML5 exports (Unity, Godot, Unreal), but none of them really worked on mobile. We're really happy with using BabylonJS, the examples were great for learning how to add various features into our game. Looking forward to the AmmoJS plugin in version 4.0! Let us know what you think of the game, and if you spot any problems.
  18. Hello, i have got a question. I am created a gui simple button and also i want to take the button properties from CSS file. I tried so many things, but i couldn't reach my aim. I need helps from masters.
  19. Hi Guys & Gals, I just wanted to let you know I'm learning 3D browser game programming in my spare time by developing something like a Model Train Simulator in BabylonJS. Thanks to the great and easy access framework of BabylonJS I've been able to develop much faster than with C++ / Direct3D 15 years ago. This project is in early stage but progressing though. I'm having some math-computations challenges on the track turnout points, but hope to have them fixed soon so that you can drive trains on more complex routes. The app supports keyboard, mouse, touch, gamepad input and also VR-headset device. Multiplayer support currently only on same device (e.g. connect 2 gamepads). Anyway, here's a teaser-screenshot of what can be called a level inspired by the "Sponza" demo. :-) Kind regards, Quintus
  20. Hi, i need to create a 3D image with the elevation data provided by google in meters unit. I don’t want to use heightmap image. I need to create it with the xyz coordinates. The elevation value coming from the dem api are in meters. I don’t know how to calculate the x and z corresponding to this elevation value in meters.Please help me with some examples.
  21. Hello, i have been started working with BJS short time ago. I couldn't understand the using rebuild method. I have one issue i think i can solve that with rebuild method but i coluldn't understand how to use it. Can somebody explain it pls?
  22. I have free camera in orthographic camera mode. I don't want camera to move at all on mouse or any other kind of input. So I tried not calling attachControl with this, camera doesn't react at all (Good!) but boxes in this scene with actions registered to action manager also do not react to mouse inputs. Second approach I tried is calling attachControl with following function: scope.registerBeforeRender(function () { // I want top view camera.rotation.x = Math.PI / 2; camera.rotation.y = Math.PI / 2; camera.rotation.z = 0; }); When I try to move ground with mouse it does move slightly. As shown in image. Help needed.
  23. Hello! I need your help. I use Angular 7 + babylonjs and added a 3D model (.obj format) to the project. The model was imported and the problem is how to position this model? BABYLON.SceneLoader.Append('../assets/models/bmw/', 'BMW_M3_GTR.obj', this.scene, scene => { // });
  24. Hello, I'm currently working on a CAD-ish program and we have chosen babylonjs as our 3D-engine. However, now we are about to implement some camera movements and we noticed that some of our meshes turns out to be really far away and therefore they have some really strange graphics artifacts. We are currently just drawing lines to visualize our models and we figured we wanted to translate the whole scene to the camera instead of moving the actual camera, basically always keep the mesh that we are looking at around origin. However, we are struggling with how the get the actual positions of the linesmeshes to be able to transform them. Here is a playground illustrating the problem: As noticed in the console all meshes drawn are located at 0,0,0. We are probably doing something wrong or have misunderstood something. Is there anyone who can help? Regards, Robert
  25. Hello you guys. I am a new user of Babylon.js. I have a project to show the co-occurrence network like this in 3D. but, I don't know how to do it. It will be very helpful if you you guys have any ideas to show me how to do this.