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 Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • 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 393 results

  1. from this playground file i managed to add 'click to play' poster frame and made a toggle bit: scene.onPointerUp = function() { if ( === true){; } else {; } but now i wonder how to add the eventListener("onended") and set currentTime to 0 again AND show the posterFrame. Any ideas?
  2. Hello everyone, here's my current project, You can protect the base from zombies in coop mode or go head to head in a deathmatch against players. Keyboard & Mouse: Move mouse to aim, click to shoot. WASD to move. Mobile/Tablet: Tap to shoot, double tap to move. (This is still a little clunky, improvements to come). Gamepad: Any button to shoot, right stick to aim, left stick to move. Tech stack: babylon.js for graphics, inferno.js for website and UI, colyseus.js for server, Agones for server orchestration. Most of the core features are done, I marked it as WIP because I'll likely add more stuff in the future. I am desperately seeking feedback for this, so please let me know what you think. I also have the page here: Thank you
  3. Hello people, I am able to play a video on Plane but unfortunately the video seems to be mirrored, as in flipped. What am I doing wrong in my script? Also, how do I make sure that the video starts playing once the page loads? var ANote0 = BABYLON.MeshBuilder.CreateBox("ANote0", { width: 140, height: 90, depth: 0.100000 }, scene); ANote0.position = new BABYLON.Vector3(180, 30, -425); var mat = new BABYLON.StandardMaterial("ANote0Mat", scene); mat.diffuseColor = new BABYLON.Color4(0, 0, 0, 1); ANote0.material = mat; var planeOpts = { height: 90, width: 140, sideOrientation: BABYLON.Mesh.BACKSIDE }; var ANote0Video = BABYLON.MeshBuilder.CreatePlane("plane", planeOpts, scene); var vidPos = (new BABYLON.Vector3(0, 0, 0.1)).addInPlace(ANote0.position); ANote0Video.position = vidPos; var ANote0VideoMat = new BABYLON.StandardMaterial("m", scene); var ANote0VideoVidTex = new BABYLON.VideoTexture("vidtex", "videos/screencast.mp4", scene); ANote0VideoMat.diffuseTexture = ANote0VideoVidTex; ANote0VideoMat.roughness = 1; ANote0VideoMat.emissiveColor = new BABYLON.Color3.White(); ANote0Video.material = ANote0VideoMat;; scene.onPointerUp = function () {; }
  4. So I have 2 files: 1. shirt.obj 2. shirt.mtl I want to load this via babylon.js: BABYLON.SceneLoader.Load(folder, fileName, $scope.engine, function (loadedScene) {...} What should I do to optimized the file loader? I have read the cache optimization from the babylon.js documentation, but none are working. Babylon Caching Docs I keep getting the model file from cache, I already put the updated model into the resources folder. How to load the new model file? What should I name my manifest file? I tried shirt.obj.manifest and shirt.babylon.manifest, both of them did not work. And what code should I insert in my script?
  5. Hi all! I built a little demo which combines the p2.js 2D physics library with 3D rendering via Babylon.js, to create a 2.5D unicycle game demo: The code is on GitHub.
  6. hortscot

    Babylonjs and Flask

    Hello, I'm pretty new to BabylonJs. I have created a few simple applications with it. What I want to do in this current project is be able to integrate babylonjs and flask microframework. I am much more familiar with python, flask and sqlalchemy etc. than I am similar javascript frameworks. I had set up some babylonjs code for visualizing a 3D model on a webpage using html, css, and javascipt only. I use ImportMesh to load the gltf (or glb) model into the scene. This works fine as I want. I have been problems migrating this to a flask app format. I tried three different ways and each time I have hit problems. I will describe each below. 1. Use ImportMesh just like I did for the 'plain' html, css and javascript: I tried to incorporate my existing html, css, and javasript files in a simple flask directory structure / simple app i.e. where my html, css, and javascript are in subdirectories to a main file - exactly how I would set up any flask app. Every time I do that I get a notification saying that the model file (.gltf or .glb) can't be found and it throws a 404 error in the console. I've tried multiple different ways to define the path to the model file but it continues to throw this error. 2. Use babylon and model html tags instead: I then got rid of the javascript file altogether and I simply used the babylon and model html tags in my html to define the model rather than trying to import the model using ImportMesh. This works fine. The issue here is when i tried to control the css and add some actions to the css (or similar in javascript) like repositioning the container when I click a button it doesn't seem to work like the tutorial showed in the documentation. 3. I then tried to define my gltf as a text string. The thinking here was if I remove the reference to an external model file it could resolve my first issue. First I converted my 0.bin file to a base 64 encoded string and included it directly in my gltf file. I then took the entire gltf file as a text string into my javascript file and essentially called the model as a text string from there rather than as an external file. I checked the file worked in the babylonjs sandbox before I did this and it was fine but when I try to run my flask app it continues to throw an error saying it can't find the 0.bin file. The issue is here that this file is no longer needed (it was orphaned in my previous step as I have described when I converted it to base64). Overall, can someone help with what I need to do to get the ImportMesh function working in my original method. I'd much prefer to use the javascript ImportMesh way to do it as I feel (rightly or wrongly) I have much more control over the scene and control over the meshes etc. when I am coding in the javascript. Thanks.
  7. Hi, I am new to babylonjs (and physics libraries in general). I have made a demo to illustrate my problem I am trying to model a square grid that behaves like there is space in the middle, as in, if an object happens to be in the middle of it, the grid should be hanging onto it. Following the example here, I have created 4 boxes, positioned 90deg to each other, added a PhysicsImpostor.BoxImpostor, and parented them under a physicsRoot with PhysicsImpostor.NoImpostor. The grid behaves like there is only one collider, right in the center of the grid. Can someone please explain what is going on there? Thank you, vinz
  8. I have water shader script which was developed using Three.js and I want to convert shader as Babylon.js Who can help me, Please let me know water-material.js
  9. 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);
  10. 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.
  11. 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.
  12. 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.
  13. 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
  14. 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!
  15. 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
  16. 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
  17. 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
  18. 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 }
  19. 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
  20. 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.
  21. 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.
  22. 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.
  23. 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:
  24. 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 😃
  25. 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.