Search the Community

Hello, I'm new to Babylon.js. I was wondering is there a way to trigger event when camera and mesh intersects? I tried put camera in to a box, and when these two meshes(camera container and object) met I want to trigger some events, but it's not working as I thought. camera mesh collisions event | Babylon.js Playground (babylonjs.com) Is there any other possible solution? Thanks!

Hi everybody, so i'm trying to create an online game using Babylon.js but have run into a problem thats got me a little stumped so hoping someone here would be willing to help me out. Please bear with me on this one, i'm a complete newbie with babylon as i've only every worked with THREE.js. Right now my game consists of a scene compromising of multiple meshes with multiple users represented as avatars (created from basic circle geometry for the moment) loaded into an environment. What I want to do is highlight the outline of these avatars ONLY when they are occluded by any other object, meaning that when they are not occluded they look normal with no highlight but when behind an object their highlighted silhouette can be seen by others (including yourself as you can see your own avatar). This is very akin to effects used in many other video games (see example below). ) Thus far, based on some googling and forum browsing (https://stackoverflow.com/questions/59807160/babylonjs-outline-through-walls & https://forum.babylonjs.com/t/highlight-through-objects/8002/4) I've figured out how to highlight the outline of objects using Babylon.HighlighLayer and I know that i can render objects above others via RenderingGroups but I can't seem to figure out how to use them in conjunction to create the effect I want. The best i've managed to do is get the highlighted avatar render above everything but I need just the silhouette not the entire mesh. I'm also constrained by the fact that my scene has many meshes in it that are loaded dynamically and i'm also trying to keep things as optimal as possible. Can't afford to use very computationally expensive procedures. Anybody know of the best way to approach this? Would greatly appreciate any advice or assistance you can provide.Thanks!

Hi, I'm trying to replicate the camera movement from a typical FPS game. I want the camera to follow the player's mouse, without the need to click at all. Here's what I've got so far: var lastMove = 0;oldx = 0,oldy = 0,mousemovemethod = function (e) { if(Date.now() - lastMove > 40) { if (e.pageX < oldx) { camera.rotation.y -= .1; } else if (e.pageX > oldx) { camera.rotation.y += .1; } if (e.pageY < oldy) { camera.rotation.x -= .1; } else if (e.pageY > oldy) { camera.rotation.x += .1; } oldx = e.pageX; oldy = e.pageY; lastMove = Date.now(); }}document.addEventListener('mousemove', mousemovemethod);The camera movement is rough and intermittent. I'd like it to be smooth with a bit of easing. Here's a link to the full code: http://www.babylonjs-playground.com/#WM1VE My question: How can I smooth out the rotation code above, or is there a better way? Solution: camera.cameraRotation.ycamera.cameraRotation.x cameraRotation provides the smooth transition I was looking for.

Hi everyone, I am looking for the measurement of the 'idleRotationSpeed' in AutoRotationBehavior. camera.autoRotationBehavior.idleRotationSpeed = 10; is that 'radians per second'? Thanks

Hi, I'm new to babylon environment, and stuck with a problem were i have to save/download latest scene from the render loop. i am using a custom 3D model exported from blender, the customization and texture implementations are works fine, but while saving/downloading the scene i can't find any texture or color which i added to the scene (i can see it in canvas but not in the serialized file). I'm using SceneSerializer.Serialize(scene); method for saving the scene, please help me to fix this issue. PS: I'm using babylon version 4.2.0 (npm package)

This is strictly for educational purposes only Since Flash is pretty much being deprecated in most browsers so is Habbo. Since there's retro versions, most of Habbo's assets are available on the internet. I've been using Pixi for now to create a 2D loading screen, which I did successfully. Then it occurred to me that Pixi is mostly just a renderer, and doesn't support 3D the same way as Three or Babylon does. Problem is that, I found coding of 2D UI elements in both Three and Babylon really difficult compared to Pixi. In Habbo it's really minimal what is going to be 2.5D / 3D as only the rooms, avatars and furni are, the rest is basically 2D GUI. So this is how I've done it for now https://gist.github.com/marcus-sa/7993baa14e6301c762747142e55cb5cf Some questions: Is Habbo; 2D with projecting, 2.5D or 3D, and would it be enough to use Pixi only? If no: Would it be possible to extend Pixi with Three or Babylon when there's going to be rendered 2.5D /3D objects? If it's truly 2D with projecting, should I just use Phaser instead? What would be best to do?

I have multiple camera facing different views. I have set my arcRotateCamera to its target. Is there anyway I can disable the screen panning in the arcRotateCamera component in ReactApp.

Hi, I need some help deciding which is the best 3D web game framework. I'm looking for something that has good mobile support native touch/virtual joystick support preferably. I have worked with playcanvas but there's no good mobile fps example, most of them use a secondary joy stick for camera control and it runs on very low fps on my device ( https://playcanv.as/p/deRCEGms/ ), although it has quite a lot of examples for pc FPS games. I really like playcanvas so if anyone has any examples/templates/ideas to help me make it mobile friendly that would be appreciated. Does anyone have any suggestions or frameworks?

Howdy friends! I'm proud to share my first production WebGL project: https://cash.me/reps (Scroll down to enter the game mode) Uses: GLTF assets Metallic Roughness Physics Camera Movements Force Touch on compatible devices Screenshots: Huge thanks to the community for helping answer my questions as I got up to speed! Especially @Deltakosh @bghgary @donmccurdy and @Wingnut

Hello, I am experiminting with the Virtual Joysticks Camera and I have a scene that is relatively large. when I use the left joystick to move the camera it moves really slow, I can't figure out how to change the speed of the left joystick. The right joystick(camera rotation) rotates just fine. Thanks for the help!

For my capstone software project we are making the game quarto using reactjs and babylonjs. We have the scene set up, but we are importing multiple .glb files and while they cast shadows on themselves and on the ground, we cannot make the shadows cast from the pieces to the board. I feel like there is something that should be obvious. We have changed the directional light source. We have changed the ability of both pieces and board to cast and receive shadows. We have overlayed a shadowOnly material object over the board itself. Nothing has worked so far. The meshes are created and textured in blender before being exported as .glb files. here is our code, we don't have a playground because of local objects: import React, { Component } from 'react'; import * as BABYLON from 'babylonjs'; import BabylonScene from './BabylonScene'; import * as BABYLON_LOADER from 'babylonjs-loaders'; import sadObject from '../objects/tallLightFlatSquare.glb'; import yayObject from '../objects/tallLightHoleCylinder.glb'; import slightlyHappierObject from '../objects/gameBoard.glb'; import plainPlane from '../objects/thePlainPlane.glb'; import shortDarkFlatCylinder from '../objects/shortDarkFlatCylinder.glb'; import { PositionGizmo, ShadowGenerator } from 'babylonjs'; export default class Viewer extends Component { onSceneMount = (e) => { const { canvas, scene, engine } = e; // This creates and positions a free camera (non-mesh) var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 90, BABYLON.Vector3.Zero(), scene); /*camera.lowerBetaLimit = 0.1; camera.upperBetaLimit = (Math.PI / 2) * 0.9;*/ camera.lowerRadiusLimit = 10; camera.upperRadiusLimit = 150; camera.attachControl(canvas); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) //const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); //var pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 1, 0), scene); var pointLight = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(-1, -2, -1), scene); pointLight.position = new BABYLON.Vector3(20, 40, 20); var shadowGenerator = new BABYLON.ShadowGenerator(1024, pointLight); // Default intensity is 1. Let's dim the light a small amount //light.intensity = 2.7; pointLight.intensity = 10; // Our built-in 'sphere' shape. Params: name, subdivs, size, scene // const sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene); // Move the sphere upward 1/2 its height // sphere.position.y = 1; //Ground object // var ground = BABYLON.Mesh.CreateGround("ground", 15, 15, 1, scene, false); // var groundMaterial = new BABYLON.StandardMaterial("ground", scene); // groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.1, 0.1); // groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0); // ground.material = groundMaterial; // ground.receiveShadows = true; //Board Positions var board4 = new BABYLON.Vector3(-3.69, 0.069, 1.2); var board5 = new BABYLON.Vector3(-3.69, 0.069, -1.2); var board15 = new BABYLON.Vector3(3.73, 0.069, -3.85); //importing the board object BABYLON.SceneLoader.ImportMesh("", slightlyHappierObject, "", scene, (newMeshes, particleSystems, skeletons) => { var board = newMeshes[0]; board.scaling = new BABYLON.Vector3(0.5, 0.5, 0.5); board.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(board); shadowGenerator.addShadowCaster(board, true); //var shadowBoard = board.clone("shadowBoard"); //shadowBoard.material = new BABYLON.ShadowOnlyMaterial("shadowBoi", scene); // shadowBoard.position = new BABYLON.Vector3(0, .0001, 0); //shadowBoard.receiveShadows = true; } ) //importing a piece BABYLON.SceneLoader.ImportMesh("",shortDarkFlatCylinder, "", scene, (newMeshes, particleSystems, skeletons) => { var tallWhiteFlatSquare = newMeshes[0]; tallWhiteFlatSquare.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(tallWhiteFlatSquare); tallWhiteFlatSquare.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4); tallWhiteFlatSquare.position = board5; var alsoTallWhiteFlatSquare = tallWhiteFlatSquare.clone("tallWhiteFlatSquare2"); alsoTallWhiteFlatSquare.receiveShadows = true; alsoTallWhiteFlatSquare.position = board4; shadowGenerator.getShadowMap().renderList.push(alsoTallWhiteFlatSquare); shadowGenerator.addShadowCaster(tallWhiteFlatSquare, true); shadowGenerator.addShadowCaster(alsoTallWhiteFlatSquare, true); }); //this is also importing a piece BABYLON.SceneLoader.ImportMesh("", yayObject, "", scene, (newMeshes, particleSystems, skeletons)=> { var yayLookingBoy = newMeshes[0]; yayLookingBoy.scaling = new BABYLON.Vector3(0.4, 0.4, 0.4); yayLookingBoy.position = board15; shadowGenerator.getShadowMap().renderList.push(yayLookingBoy); shadowGenerator.addShadowCaster(yayLookingBoy, true); }); //heck if I know engine.runRenderLoop(() => { if (scene) { scene.render(); } }); } render() { return ( <BabylonScene onSceneMount={this.onSceneMount} /> ) } }

I can't find castor.gui.min.js on Babylon's page. Chrome said the page cannot be reached"http://www.babylon.actifgames.com/demoCastorGUI/castorGUI.min.js" Please where can I find it

I'm not sure if this should be posted in https://forum.babylonjs.com/ or https://www.html5gamedevs.com/ so I'm posting on both. I have seen several posts and solutions to similar questions with the blender to babylon exporter (exporter V6.2.0, blender version 2.8) I've exported many animations from 3DS Max, but I'm fairly new to blender. I'm studying the Action editor, but obviously I'm not understanding something very fundamental. Basically, the issue is that the position of objects is different between the animation in blender and the .babylon I've read that you need to check "Only Currently Assigned Actions" or put a hyphen in the Action name. Autolaunch animations for each object. Apply transforms to each object. Set the location to where the object should be rotated about. Parent the objects to each other. Don't parent empties because you can set an empty to "Auto launch animations" All these things have helped tremendously. I'm still missing or not understanding something though. I've done my homework, but haven't figured it out. Any help would be greatly appreciated. Here is the playground link showing the issue. https://playground.babylonjs.com/#R82EL4#2 Here is a link to the .blend and .babylon files in dropbox https://www.dropbox.com/sh/fjdk4urwfckc5m9/AAAuDbBmwFtA466gAOylY7mTa?dl=0 In the world tab, Only Currently Assigned Actions is checked. Applied rotation and scale of parts. I set the location to where I want the part to rotate about. I select the redCube (Axis 1). Frame 10 I insert a LRS key. redCubeAction is created in the action editor Scrub to frame 40. rotate the redCube by -45 degrees on the x axis. and insert another key. The animation runs in blender and the .babylon as expected. All is good so far. I didn't bake the animation. It doesn't seem to make a difference. I select the blue cube (axis3) which is parented to the redCube. Click on New in the action editor. "Action" is created. I scrub to 50 and make a LRS key with blueCube selected. I scrub to 80, rotate blueCube along the X axis by +45 degrees and make another key. The robot is kind of squat there. The blueCube is at the end of the Red cube as a good robot should be. I play the animation in Blender and it runs as expected, but in the .babylon file, the blueCube is raised up a bit. Does anyone know why this happens and what I can do to prevent it? robotBlenderForForum.blend robotAnimation.babylon

Hi coders, I have a JSON data coming through some API. This data is List of objects. For example... [{ "rackid": "rack_1", "components": { "cpu_nodes": [ { "name": "cn1", "state": "idle", "power_status": "Up" }, { "name": "cn2", "state": "idle", "power_status": "Up" }, { "name": "cn3", "state": "idle", "power_status": "Up" }, { "name": "cn4", "state": "idle", "power_status": "Up" } ], "service_nodes": 2, "login_nodes": 1, "master_nodes": 2 } }] This could have any number of objects in the list. And also I have models ready for each components in incoming data as .babylon. Now I want to render the meshes using above data. For this will require to call BABYLON.SceneLoader.ImportMesh() inside a for loop. But it's not working for me what can I do?

Hello everybody. I'm trying to make a thin mattress (a simple parallelepiped with textures) roll up. The first try was with a curve path ( a spiral shape) linked to the mesh, animated and modelled in blender, but the result in babylon js didn't preserve the deformation infos. The mattress was still, it didn't move except for a translation on the X axes, and inspecting the scene i could see the spiral in the meshes but not the information about the animation. So i tried with armatures cause i read that it's well supported in babylon js. With a simple curve animation of the bones the model's behaviour was the same as in blender, so it was performing in a great way. But, when i elaborated the bones structure to simulate the roll up, doing a spiral, the model was fine in blender but in babylon js it started behaving in a messed up way. My question is, is that an impossible type of armature animation to achieve cause it's not what a bone structure is supposed to do, or am i missing some exporting setting/modelling steps? In alternative, as far as you know, is there a way to achieve that kind of animation? I'm sorry but I wasn't able to attach a photo of the behaviour cause an error occurred "/var/www/html/uploads/monthly_2019_09 could not be created. Please contact us for assistance." Thank you so much for the eventual support, have a great day! Arianna

http://babylonjs-playground.com/#RC9CZ Hello, I'm currently developing a small game and need to rotate a mesh to a point. I want to set the rotation of a mesh to face a specific point in the "3D-Room". I hope anyone can get this cylinder in the playground to face to (0|0|0). Thanks a lot, Josh

Hi there, I am a total noob when it comes to Babylon but I am trying my best here :D. I cannot find an example of how to make an imported mesh (using BABYLON.SceneLoader.ImportMesh )transparent. I have played around with couple of examples with spheres and changing their alpha and sphere that have a texture assigned to them and then changing it to be transparent, but how does one do this when the file that you are loading using the importMesh is a Babylon file with all the textures, when I use mesh.material.alpha = 0.5, it makes the material transparent but the texture just goes white, I cannot see through it to the mesh behind it.

Hello, BabylonJS is fantasic. Thank you mr @Deltakosh and mr @davrous. Research: Augmented Reality making rapid advancements this year. GIS AR, Multi-Marker AR, TableTop AR - 3D on flat surfaces... Happening fast. Babylon is my 3D home. So I must ask: Is AR porting a priority for upcoming versions of BabylonJS. And if not, can it be? I looked at wishlist and roadmap. Found milestone/5 with no mention of AR: https://github.com/BabylonJS/Babylon.js/milestone/5 Here is link with history I'd follow: https://uploadvr.com/ar-js-efficient-augmented-reality-for-the-web/ Seems to be lineage of successful AR examples: https://github.com/opencv/opencv_contrib/tree/master/modules/aruco https://github.com/artoolkit/jsartoolkit5 https://github.com/jeromeetienne/ar.js For AR -> Babylon is most promising to me. How would one go about such a feature? Thanks,

Hi, I'm building a crowd simulation (using Aggregate Dynamics for Dense Crowd Simulation, if it meters) and as for now I have 100 moving agents and one target in the middle. What I'm trying to do is to create a heatmap so I can see and analyze which paths are the most common for them to use, any ideas how to do it with Babylon? I'm quite new to it, this is my first project using Babylon, maybe there are some build in tools for that purposes? Tried to google it but no success. Thanks for any kind of advice!

Hi) I use this example https://www.babylonjs-playground.com/#72C7CT#3. But in this example we have all trajectory in first step. I tried to change this example for my question: https://www.babylonjs-playground.com/#X0MDYG. In this example I see animation of the last segment of my all path. How can I change this situation and see animation from my first point to the last. This situation occurs when we initially do not know the entire trajectory. We only know the current and previous trajectory node. Could anybody help me?

How can I add a Texture to the following sample https://www.babylonjs-playground.com/#4GBWI5 I tried the following code: mat = new BABYLON.StandardMaterial("", scene); mat.diffuseTexture = new BABYLON.Texture("textures/texture.jpg", scene); // mat.diffuseColor = new BABYLON.Color3(1, 1, 1); //mat.diffuseTexture.hasAlpha = true; build.material = mat; I get the following error: .WebGL-0x7f8fa201c400]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

Guys, I need help. How to turn the mesh towards the point given by the vector? What method of rotation is needed here? Rotations is my weakness..

Hello! I've been dabbling in Babylon for a month or so now, and things are going well, but I'm getting caught up on this one problem: I have several avatars in a row. They all have jetpacks, but there should only be one active any time. I've parented the emitter fountain objects to each of the avatar's hip bones and then offset it so that it's behind the avatar roughly in the location of the jetpack on the mesh. It works fine for the avatar at (0,0) but the fountain doesn't seem to move when i translate each of the avatars into their final positions Isn't that what parenting does? It does rotate gently as my avatar moves in it's idle animation, so I know it's attached. Even if I don't set the position of the fountain, it still doesn't move along the x axis when my avatar does. I've tried to approximate my scene using the playground here: https://www.babylonjs-playground.com/#424Q55#2 The Rabbits are structurally a bit different from my meshes in terms of skeleton and my avatar's have no submeshes like the Rabbit does. You can see that although there are 6 different emitters, they're all at the same place. I've turned on the visiblity of the fountain so you can see it if you rotate the scene behind the avatars. A related problem I'm having (even when the avatar is at 0,0) is that when i rotate an avatar and animate it, the emitter follows the path of the avatar as if it wasn't rotate at all. Am I parenting incorrectly or missing a step? I know setting position changes the world position, but it seems like with the parenting, the x position should still change as the parent does. Thanks for any help you can provide!

Hi : I am new beginner of Babylonjs , I want to load a mesh(.obj) by typescript. Here is my code （run in playground）： class Playground { public static CreateScene(engine: BABYLON.Engine, canvas: HTMLCanvasElement): BABYLON.Scene { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, true); // This creates a light, aiming 0,1,0 - to the sky (non-mesh) var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Default intensity is 1. Let's dim the light a small amount light.intensity = 0.7; // BABYLON.SceneLoader.ImportMesh("Rabbit", "scenes/","Rabbit.babylon", scene, function (newMeshes) { BABYLON.SceneLoader.ImportMesh("Rabbit", "scenes/Box/","Box.obj", scene, function (newMeshes) { var rabbit = newMeshes[0]; if(rabbit == null) { console.log("rabbit is null") } else { rabbit.scaling = new BABYLON.Vector3(0.1,0.1,0.1); console.log("I can see the rabbit"); } // scene.beginAnimation(skeletons[0], 0, 100, true, 0.8); }); return scene; } } When I load Box.obj I got a log "rabbit is null". but when i load a Rabbit.babylon file it work good. What happened when I loaded.Obj? Who can help me load .obj Mesh By Typescript? Thank you

i have issue in 3d analog clock i have export 3d watch from blender everything done just need to work on clock function my also fucntion is also done but its not working like clock please check the video and help me out and i have this code for clock function all Object piviot point is center but clock function not working perfectly please Check and help me out please scene.registerBeforeRender(function () { var date = new Date(); var hour = date.getHours() % 12; var minute = date.getMinutes() ; var second = date.getSeconds() ; hand_sec.rotation.y = (second/60.)*minute.*Math.PI/180.; hand_min.rotation.y = (minute/60.)*360.*Math.PI/180.; hand_hour.rotation.y = (hour/12.)*360.*Math.PI/180.; }); // this is code i have add but not working 0125.webm