Search the Community

Showing results for tags 'scene'.

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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 80 results

  1. Hi All I couldn't find a method to restart / reset a scene. Anyone know if there is one please? Or if there is a better way to do this. Thanks!
  2. Hi everyone So I'm back in to looking at Baylon after having to concentrate on other areas of my project first. I'm at the stage now where I'm loading a .babylon file exported from Blender, I'm attaching camera controls to the active camera (configured in blender to be Arc), and I'm using Pep instead of Hand for the interactions because Hand hates me and I don't deserve nice things. Anyway here's the issue, with the camera controls attached as so: scene.activeCamera.attachControl( canvas, false ); everything works fine in Mac safari 11.0.3 and Chrome 63.0.3239.132, but when in Firefox 58.01 the page scrolls as well as the scene when using the mouse wheel to zoom. I've tried setting that false value to true, but all that did was stop scene scrolling everywhere. The canvas element has the attribute: touch-action="none" set in the html and the similar declaration in CSS. This wouldn't be such a problem if the entire scene was the whole page, but in my case the canvas is only part of the visible page. Can someone shed some light on this please? Cheers
  3. Hi guys! I recently start a little kind-of cornell box scene, I still have some little tweaks to do before release it for everyone (... in facts, you can already grab the sources). I think this will sometimes be more useful to make some tests in this little environement rather than one with default skybox and default sphere And, in relation with this topic about reflection probe, it's precisely a scene which will be perfect to test these kind of issues. But, after many tries, I never succeed to make a playground-version of my scene. Here the correct version, on my personnal website : Here my try in the playground : As you can see, loading lightmaps texture goes wrong. Where am I wrong ? PS: we can note a huge bug in firefox, which doesn't load correcly the materials! [edit: dedicated thread]
  4. Hello! I wasn't sure what to call it but I am working on a game with my husband (terrible idea, he's a designer..) and he asked if I could create a menu screen that plays out a little scene or something. He showed me this video as an example of Mario Kart SNES (only watch the first 35 seconds of so): I am aware of how to use states and all but, I only just started using Phaser and I was trying to think out how I would create something similar to the scene played out in the example (Maybe something not so complex), also if this is possible how would I loop this scene, since a user might leave the scene playing to see the end of it? Thank you in advance for all of your help!!
  5. BABYLON Inspector Error

    I get an error when I try to run the babylon inspector with; And it only happens when I go to the GUI tab. "babylonjs": "3.1.1", "babylonjs-gui": "^3.1.1",
  6. Hi All, I'm developing an React.js APP which consists of multiple pages. One of pages contains canvas, scene and of course, engine while other pages don't. Naturally, I need to dispose scene and stop engine when I am going to leave this page while init the scene and runRenderLoop when I re-eneter this page. The related code is as follows. class Scene { constructor() { this.canvas = null; this.engine = null; this.scene = null; this.obstacles = null; } init(canvas) { this.canvas = canvas; this.engine = new BABYLON.Engine(canvas, true); this.scene = new BABYLON.Scene(this.engine); this.scene.clearColor = new BABYLON.Color3.Black(); this.obstacles = new Obstacles(this.scene); } run() { window.addEventListener("resize", () => { this.engine.resize(); }); this.engine.runRenderLoop(() => { STORE.updateFPS(String(this.engine.getFps().toFixed())); this.scene.render(); }); } stop() { STORE.toggleSceneActive(false); window.removeEventListener("resize", () => { this.engine.resize(); }); this.engine.stopRenderLoop(); this.scene.dispose(); this.engine.dispose(); } } export default class Canvas extends React.Component { render() { return ( <canvas className="main-canvas" ref={(canvas) => { if (canvas === null) { // React will call the `ref` callback when the // component is being umounted. SCENE.stop(); return; } SCENE.init(canvas);; }}> </canvas> ); } } The problem is that when I go back to this page and try to dispose the mesh of obstacle to redraw, which is BABYLON.MeshBuilder.ExtrudePolygon(). It reports error: Does anyone have any idea? What's wrong with my operations? TypeError: engine is null ./node_modules/babylonjs/dist/preview release/babylon.max.js/AbstractMesh.prototype.dispose src/visualization/browser/node_modules/babylonjs/dist/preview release/babylon.max.js:13927 13924 | this._occlusionQuery = null; 13925 | } 13926 | // Engine > 13927 | engine.wipeCaches(); 13928 | // Remove from scene 13929 | this.getScene().removeMesh(this); 13930 | if (!doNotRecurse) { ./node_modules/babylonjs/dist/preview release/babylon.max.js/Mesh.prototype.dispose src/visualization/browser/node_modules/babylonjs/dist/preview release/babylon.max.js:22773 22770 | highlightLayer.removeExcludedMesh(this); 22771 | } 22772 | } > 22773 |, doNotRecurse); 22774 | }; 22775 | /** 22776 | * Modifies the mesh geometry according to a displacement map. updateState src/visualization/browser/src/scene/obstacle.js:73 72 | if (this.mesh) { > 73 | this.mesh.dispose(); 74 | } 75 |
  7. Hello, This is more like a general question, but during the last years many things has changed, somewhere syntax, somewhere architecture. Blender has changed, babylon.js too. I would like to know what is a recommended workflow today (in 2017/2018 and future) for creation a complete and complex game scene - with all lights, shadows, camera, collisions, sounds, textures, locations, different meshes etc. ? Lets say we don't use any physics plugins, because most important things are already built-in. Also the priority is a resulting performance. Is it enough and efficient to use Blender only? I see in some examples people still do "ImportMesh" and then in a loop "meshes.forEach..." to configure imported meshes. Also some tutorials are too old because Blender has changed and I haven't found out how to enable babylon's camera-to-mesh collisions. So.. your thoughts? Everything in Blender (other tool) or import meshes one by one and continue with a plain JavaScript?
  8. Hello, I am developing a 3d page, with babylonjs, I have the scene, that I am modeling and exporting in "blender" to a babylon file. In code I am adding shadows and lights, some of these lights I need turn on an turn off whe the lamp is clicked. I create the lights like this: //Luz global light[0] = new BABYLON.DirectionalLight("LuzGlobal", new BABYLON.Vector3(0, -1, 1), scene); light[0].diffuse = new BABYLON.Color3(1, 1, 1); light[0].specular = new BABYLON.Color3(1, 1, 1); light[0].direction = new BABYLON.Vector3(0, -1, 1); light[0].position.x = 27; light[0].position.y = 28; light[0].position.z = -89; light[0].intensity = 1.0; //createLensFlare(); //Creamos las luces de las lamparas light[1] = new BABYLON.SpotLight("lampara1", scene.getMeshByName("lamp1").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); light[1].diffuse = new BABYLON.Color3(1, 1, 1); light[1].specular = new BABYLON.Color3(1, 1, 1); light[2] = new BABYLON.SpotLight("lampara2", scene.getMeshByName("lamp2").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); light[2].diffuse = new BABYLON.Color3(1, 1, 1); light[2].specular = new BABYLON.Color3(1, 1, 1); light[3] = new BABYLON.SpotLight("lampara3", scene.getMeshByName("lamp3").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); light[3].diffuse = new BABYLON.Color3(1, 1, 1); light[3].specular = new BABYLON.Color3(1, 1, 1); light[4] = new BABYLON.SpotLight("lampara4", scene.getMeshByName("lamp4").position, new BABYLON.Vector3(0, -1, 0), 0.8, 2, scene); light[4].diffuse = new BABYLON.Color3(1, 1, 1); light[4].specular = new BABYLON.Color3(1, 1, 1); And I switch the state like this: // Apagamos o prendemos la luz de la lampara 1 scene.getMeshByName("lamaparaCalle1").actionManager = new BABYLON.ActionManager(scene); scene.getMeshByName("lamaparaCalle1").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { if(light[1].isEnabled() == true){ light[1].setEnabled(false); if(scene.getMeshByName("vlsT1") != null) scene.getMeshByName("vlsT1").setEnabled(false); } else{ light[1].setEnabled(true); if(scene.getMeshByName("vlsT1") != null) scene.getMeshByName("vlsT1").setEnabled(true); } })); // Apagamos o prendemos la luz de la lampara 2 scene.getMeshByName("lamaparaCalle2").actionManager = new BABYLON.ActionManager(scene); scene.getMeshByName("lamaparaCalle2").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { if(light[2].isEnabled() == true){ light[2].setEnabled(false); if(scene.getMeshByName("vlsT2") != null) scene.getMeshByName("vlsT2").setEnabled(false); } else{ light[2].setEnabled(true); if(scene.getMeshByName("vlsT2") != null) scene.getMeshByName("vlsT2").setEnabled(true); } })); // Apagamos o prendemos la luz de la lampara 3 scene.getMeshByName("lamaparaCalle3").actionManager = new BABYLON.ActionManager(scene); scene.getMeshByName("lamaparaCalle3").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { if(light[3].isEnabled() == true){ light[3].setEnabled(false); if(scene.getMeshByName("vlsT3") != null) scene.getMeshByName("vlsT3").setEnabled(false); } else{ light[3].setEnabled(true); if(scene.getMeshByName("vlsT3") != null) scene.getMeshByName("vlsT3").setEnabled(true); } })); // Apagamos o prendemos la luz de la lampara 4 scene.getMeshByName("lamaparaCalle4").actionManager = new BABYLON.ActionManager(scene); scene.getMeshByName("lamaparaCalle4").actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, function (evt) { if(light[4].isEnabled() == true){ light[4].setEnabled(false); if(scene.getMeshByName("vlsT4") != null) scene.getMeshByName("vlsT4").setEnabled(false); } else{ light[4].setEnabled(true); if(scene.getMeshByName("vlsT4") != null) scene.getMeshByName("vlsT4").setEnabled(true); } })); But the first time that i turn off the lights the scene is paused and then continue, what is the best way to do that? maybe I am doing something wrong. the complete source is: the project path is: entorno-models/code/proyBabylon/p2/ thanks and regards
  9. hi all. I'm wondering why scene [ i ] = CreateScene ( engine [ i ] ) in my code at : is returning undefined? This is part of assigning a completely new scene / camera / etc to each programatically created canvas. Thank you! <3 ~M
  10. Is there a way to clone an imported mesh to use it in a different scene? I try to change the _scene parameter of the mesh like that : this.mesh._scene = newscene; but I got an error. It seems like I must import all my meshes twice in both of my scenes. Unfortunetly it will increase the loading time. Looking for suggestions! Thanks
  11. Hello. Is there a way to interrupt/stop BABYLON.SceneLoader.load ?
  12. Hi, Need some help with scene, skybox and camera adjustments. Scene not covering skybox. My working area 10000,10000,10000. Just rotate scene and you will see what I mean. Any help will be appreciated.
  13. Hello good day / night guys, I am new on the comunity of babylonjs , really happy to have found a great tool to make some games , i have a concern about if there is a way that according to the camera.position.y it can change the scene's properties , for example like the fog if i am underwater and change it back to less fog if i am outside the water ? i've tried this : "scene.getCameraByName("FreeCamera").position.y<=0" and "scene.getCameraByName("FreeCamera").position.y>0" , but not sure if it is okey to set it inside the : scene.registerBeforeRender ? like this : scene.registerBeforeRender(function() { if(scene.getCameraByName("FreeCamera").position.y<=0){ // properties for camera when is inside water } if(scene.getCameraByName("FreeCamera").position.y>0){ // properties for camera when is outside water } }); will this affect performance? , or there is another way to detect camera positions to change properties according to the high level ? , thanks in advance
  14. Wow... I never saw this project... when did this get here, was this always here??? Does this mean we can convert the json .babylon text file to a Binary Format ??? Is this real binary data (maybe dumb question) but it look like regular json text being written using stream writer... Does that make it binary?? I would think there would some kind of 'Byte Encoding' going on to make it binary... Dunno... What that is all about.... But looks like a VERY KOOL option to add to the toolkit... Save your scene files as binary rather than text... If thats the case... would is be possible to save Directly From Babylon Entities to this binary format instead of saving to .babylon text file then going back and converting the text file to this Babylon binary format... I can't believe I NEVER saw this project before... Must have over looked this guy Anyways... What are the advantages of this binary format vs me just pre-compressing to a .gz file ???
  15. Code: So if you try to load a scene asynchronously, do something else, start the engine using that scene, The scene will just show an empty space. However, if you take a look at the code above, go to async function createScene(config) { const { textureModifier } = config; const { height, width, color } = config; const scene = new Scene(config.engine); await importScene(config.mesh, scene); And comment 'importScene' line, the go to async function run() { // await importScene(config.mesh, scene.internal); engine.runRenderLoop(() => scene.render()); // engine.runRenderLoop(() => console.log('test')); } And uncomment 'importScene' here, it works fine. I've included a .babylon file below. foot.babylon
  16. Camera and Sprite

    I have been working tirelessly with this and really struggling to get anywhere, if anyone can offer some form of assistance I would be greatly appreciative. I have essentially set up a reel of characters (staff) as sprites organised by co'ords in three circles, 12 characters per circle, around the camera set at (0,0,0), (Radius of circles are 1.5/1.45/1.4 I have a scene built currently which is super buggy in movement as well. I need it to when the mouse hovers on the left or right side of the screen to rotate the camera continuously scrolling through the images on loop (Cant get working past following the mouse - no loop - no smooth movement as mouse movement on y axis also rotates the camera. This is my mouse movement code: var mouse = {x:0,y:0}; var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03}; function mouseMove(e){ mouse.x = e.clientX; mouse.y = e.clientY; camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed); The second main issue i'm having is that the sprites keep disappearing when rotating the camera, I'm trying to create a constant panable image reel from inside to view members of staff, there is an example i'm trying to follow and recreate found here: If anyone could tell me how to solve me mouse hover to move issue (with infinite looping) or a fix for the rendering of sprites issue it would be great! If anyone thinks they can help and needs any more code of any kinds just let me know and i''ll sort it! Thanks!
  17. Hello, I am new to Phaser. What is the best way to create scene (menu, top, settings, game itself) for puzzle game? Should I create scene manually (code) or should I use some GUI and export results as JSON file which later I can use in Phaser? Thanks in advance and I hope my question was not answered hundreds times
  18. Hi, I'm working on a medical application where anatomical 3d Models are shown in the Browser. At the moment I am working with Threejs, but I am looking for alternatives and Babylon.js looks very good, especially from a documentation perspective. But I cant find much information about loading Scenes/STLs using XHR Requests. In most tutorials they are loaded as assets directly from the webserver the app is hosted on. So my Questions are: Is it possible to load a scene from an application server which is not the webserver using http GET, including an x-auth-token in the header ? Is it possible to load the file as a binary stream, or in a small format? (Because the models often have a high poly-count) Thanks in advance :-)
  19. I am working on a project that switches between a handful of scenes. To do this I load all of my scenes at the start so you can switch between them quickly. You start out in an overall view of the area and you can click markers to go into rooms. In the rooms are more makers that are hooked up to click events. However If one of the markers in the scene is in the bottom left of the screen per say and I move to a different scene, If I would click in the bottom left of the screen the click event of the previous room triggers. How do I make sure that click events are only active for the currently active scene?
  20. Hot reloading engine

    // @flow // $FlowIgnore import * as BABYLON from 'babylonjs'; import shortid from 'shortid'; type Color = { r: number, b: number, g: number, }; export default class Scene { _scene: BABYLON.Scene; _camera: BABYLON.ArcRotateCamera; _light: BABYLON.HemisphericLight; constructor(engine: BABYLON.Engine, canvas: HTMLElement) { const scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color4(0.5, 0.8, 0.6, 0.8); const camera = new BABYLON.ArcRotateCamera('Camera', 1.5 * Math.PI, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, false); const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 1), scene); light.intensity = 0.5; const sphereMaterial = new BABYLON.StandardMaterial('texture1', scene); sphereMaterial.alpha = 1; // sphereMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5); sphereMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0.5); const boxCfg = { size: 5, updatable: true, }; const sphere = BABYLON.MeshBuilder.CreateBox('sphere1', boxCfg, scene); sphere.material = sphereMaterial; sphere.position.y = 5; this._scene = scene; this._camera = camera; this._light = light; } render = () => { this._scene.render(); } dispose = () => { this._scene.dispose(); } } import { Engine } from 'babylonjs'; import Scene from './Scene'; export default class RenderEngine { constructor(container) { this._container = container; } animate() { this._engine.runRenderLoop(this._scene.render); window.addEventListener('resize', this._engine.resize); } createScene() { this._scene = new Scene(this._engine, this._canvas); } render = () => { this._canvas = document.createElement('canvas'); this._container.appendChild(this._canvas); this._engine = new Engine(this._canvas, false); this.createScene(); this.animate(); } reRender = () => { this._engine.dispose(); this._container.removeChild(this._canvas); this.render(); } } const root = document.getElementById('root'); const engine = new RenderEngine(root); engine.render(); if ( {'./RenderEngine', () => { engine.reRender(); }); } I am currently learning babylon.js and with my set up I have hot reloading, so when any files are changed, engine.reRender() will be called. To test it out I change up color of sphereMaterial. It creates new canvas, but for some reason it still shows the old colors... Is there any way to clear out the scene and engine to load the webgl with new configuration? Thank you.
  21. Hi community, I want to propose you some addition to assetManager and sceneOptimizer. If the solution already exist, said me assetManager : 1. Get loading percent, not on x file loaded but on stream data loaded when it's possible. > for more precision and to show state if you load some big files. 2. Add "abort" function and "onAbort" callback to cancel running tasks and loading files. > Currently "clean" function delete tasks in assetManager but not abort current loads. That mean if you have a big file in loading, it don't stop. sceneOptimizer : 1. Add a starter level to try optimizing render : > I tested the current sceneOptimizer and the problem is it try the best render first. If you have an older device, the website crash and the browser reload page before that sceneOptimizer can downgrade the render. So, it's a loop without ending. 2. Create two steps to optimize render : > First : upgrading. The sceneOptimizer try to reach "x" FPS with the starter level. If it's ok, it upgrade render again until when it can't reach "x" FPS. > Second : dowgrading. If the last try (or the first try with the starter level ) not reach FPS, the sceneOptimizer downgrade until when it can reach FPS. If the sceneOptimizer reach "x" FPS, it stop. > Of course, we keep "trackerDuration" : time in milliseconds between passes. > You will can restart the sceneOptimizer when you add or change something like the current version What do you think about this ? Have a nice day !
  22. Hi, Got strange situation, one mesh, that was exported from 3d max , is not appearing in `scene.mesh` list, but it works with `scene.getMeshByName("meshName");` var mesh; mesh = scene.getMeshByName("meshName"); // Works scene.meshes.forEach((m) => { console.log(; // Doesn't appear here if( === "meshName") { mesh = m; // Never happens } }
  23. Hi guys! I have small problem, If I dispose WorldSpaceCanvas2D, material from canvas stay on the scene Example, you need look in console, you can see after disposing canvas the material on scene "myCanvas_Material" How I can dispose this material? Thanks!
  24. Hi guys! Found very usefull feature in three.js like ability to set texture as scene backgorund ( Is there something like that in Babylon? Ofcourse we can use two scenes, put texture to plane, setup orthogonal camera... but it's very uncomfortable