Search the Community

Showing results for tags 'babylonjs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 259 results

  1. how to Manipulate Tube Path Runtime

    I have created one path and I have a scenario to update that path run time and according to that path I need to update tube according to the updated path, can anyone help me for this.
  2. How to make these fantastic effect in Babylonjs (show in this picture) 1. Sword air blade (red color) 2. Slow sword and leafs motion 3. Leafs fall Thanks!
  3. AI pathfinder

    hy guys! i made a pathfinding ai algorithm on jsfiddle here http://jsfiddle.net/VP8nq/61/ , now i am trying to use it in babylonjs, but it's not working this is my PG to check what's wrong, you can drag the camera to view the maze https://www.babylonjs-playground.com/#XEFDAS#2
  4. How to create Empty Mesh/Node for Parenting? The Empty Node must have Position, & other Transform data!
  5. I wrote an interactive neural network visualization web program where people can explore the inner workings of neural networks. Here is the description page (where I mention and link to BabylonJS in the FAQ): http://miabella-llc.com/ This is the browser-based application: http://www.miabella-llc.com/ANN/
  6. Hi my friends, Recently I read the tutorial of PBRMaterial here https://doc.babylonjs.com/overviews/physically_based_rendering_master I wanna display the object exporting from Blender by Tower of Babel (TOB) However, it comes out with all-black on my object(mesh) The code is jus like the following : var texture_from_file = new BABYLON.Texture("dress.jpg", scene); var pbr = new BABYLON.PBRSpecularGlossinessMaterial("pbr", scene); for (var i = 0; i < scene.meshes.length; i++){ scene.meshes[i].material.diffuseTexture = texture_from_file; } Any advice to let me display the mesh with PBRMaterial (or similar texture) ? Thank you so much
  7. Hi, I've recently started making my new (first) game. I decided to go with ThreeJS and A-frame as framework/engine but these aren't very well prepared for game development (lack features I need) so I've switched to BabylonJS. But with my UI being created in Vue (worked well with A-frame HTML elements) there isn't any advice in Google. I've tried integrating it with my Vue component but in a console it says : I thought it is because of Canvas isn't the correct element by when I tried to log it, it prints it is. I don't know if this integration is even possible. As I said I'm new to BabylonJS and maybe I lack some knowledge.
  8. I've been looking at implementing physics into a simple scene, but I feel the documentation is out of date and thus much of the stuff you find online is out of date also. Take for example meshes, in order to activate physics on one, you now need to set the `mesh.physicsImposter` member variable, whereas almost all relevant topics call the (now redundant) function `myMesh.setPhysicsState()`. This is confounded by the fact that oimojs has documentation that fleets between Three, Babylon, and sometimes neither! Could we perhaps update the Babylon playground to contain more physics demos using Babylon 3 at the very minimum? Is anyone else finding the out of date content available online an issue? could we do something more in the documentation?
  9. Holle!~~ Translation of some keywords 【进入游戏】->【PLAY】 【瞄准方式】->【Target mode】 【重新开始】->【restart】 【重力感应】->【gravity sensor】 Sorry, My English is not so good Babylon is an excellent js game engine Play with it! thinks!!!! url:https://forreall.cn/3ds/app/zhanji/
  10. My understanding is that every instance of a material requires a separate draw call. In a scene with many similar meshes, it would be nice to have them share one material but have basic differentiation by color or transparency. Is this possible without creating many materials or looping over lots of vertex data? In other words, does the standard material shader allow for color as an attribute that can be set per mesh?
  11. Convert Unity Shader into Babylonjs

    i have one shader which is working fine with Unity Engine, now i want the same into BabylonJs Engine's Application so can any one suggested me the Tool which will help me to resolve this. i am new to shader and its implementation. i can not write shaders as frequently available in Unity so i highly require a tool which can convert that shader into javascript WebGL code.
  12. Good evening all, My name is Christopher, and I have decided to use the Babylonjs npm repo. Question Once you include the babylonjs npm library through npm install how do you activate the extensions which are included? the attached file-structure.png shows the file-tree which is created in node_modules after using npm install. I am trying to use the included gui extension specifically. Environment Angular, Node, and Express, compiled using webpack Library npm babylon js To install the npm library into my project's node_modules: npm install --save babylonjs then my component has the import statement below: import * as BABYLON from 'babylonjs'; The above statement will utilize the babylon.module.d.ts file in the attached image and babylon.max.js This lets me use the BABYLON class with types perfectly as expected. However, none of the files in the gui folder in the attached image are hooked up. How would I go about activating this extension?? Solutions I've attempted thus far 0) just a normal import of the main babylonjs module: import * as BABYLON from 'babylonjs'; All core BABYLON methods and properties are accessible. However, BABYLON.GUI gives the following typescript error: "Property 'GUI' does not exist on 'typeof BABYLON'." Which is to be expected, since none of the gui files are hooked up. 1) using CDN for everything in index.html. <head> <!-- base href="/" is used for angular2 routing --> <base href="/"> <title>some website</title> <link id="favicon" rel="icon" href="public/assets/favicon.png"> <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script> <script src="https://preview.babylonjs.com/cannon.js"></script> <script src="https://preview.babylonjs.com/oimo.js"></script> <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> </head> This works, however, is not ideal, and defeats the purpose of the npm library. Also, the typescript definition files have to be maintained separate, either through the tsconfig.json, or in the component with a ///ref tag, and is very finecky. 2) using npm for babylon, and CDN for gui. Does not work, this method throws errors, because the CDN script tag in the head of index.html is compiled before the npm module, meaning the babylon class this extension extends does not exist at that time. 3) Using a second import to try to include the BABYLON.GUI class extension. import * as BABYLON from 'babylonjs'; import 'babylonjs/preview release/gui'; there is no .module file in the gui filepath so npm doesn't find anything there, so the second import fails. I've looked everywhere, including the docs and haven't found a clear solution. So how do we activate these extensions? They are included in the npm repo so naturally the devs want us to use them, and I'd love to take advantage of them
  13. Hello This is my first Time in this forum. I am doing a scene with babylon js and I am using water material for some elements, when the mesh is created in code with createGround function it works fine, but when I import scene from blender, and add water material to any mesh, the result is not the expected. some one know what is the process to do that. thanks
  14. Cannon JS Problems

    Hi all. I'm not really new here, but technically I am since I haven't logged on in about 4 years. I need some help fixing this cannon JS playground I created. 1st thing's 1st. Why are all the spheres rendering slowly once they touch the ground of the terrain height map? I want this to run at a persistent 60 Frames Per Second. Second thing. I want to have the camera as a "player" in which he can walk all around the heightmap terrain and up NON-STEEP slopes where he slowly slides down STEEP slopes. Forgive me if I'm being a little too less descriptive. I will try my best to explain if that is the case. Anyways, thank you ALL VERY much for all the help! <3 Here is the link to the playground : https://playground.babylonjs.com/#7JDXMW#22 Mythros
  15. Hi, I was able to make scenes using vanilla javascript and BabylonJS. Now I want to refactor all in Typescript as my background is with C#. Anyone has an example how to import a class from another file including what loader do you use, I'm getting this error on the web browser: Uncaught ReferenceError: define is not defined at game.js This are extract of the files: index.html <!DOCTYPE html> <head> <script src="js/babylon.3.0.js"></script> <script src="js/hand-1.3.7.js"></script> <script src="./scripts/game.js"></script> <style> game.ts /// <reference path=".././js/babylon.3.0.d.ts"/> import { SceneUtils } from './sceneutils'; class Game { private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; private _camera: BABYLON.ArcRotateCamera; private _light: BABYLON.Light; constructor(canvasElement : string) { // Create canvas and engine this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement); this._engine = new BABYLON.Engine(this._canvas, true); } createScene() : void { console.log("Start create scene"); // create a basic BJS Scene object this._scene = new BABYLON.Scene(this._engine); // create a FreeCamera, and set its position to (x:0, y:5, z:-10) //this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene); this._camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 0, BABYLON.Vector3.Zero(), this._scene); this._camera.setPosition(new BABYLON.Vector3(0, 15, -30)); // target the camera to scene origin this._camera.setTarget(BABYLON.Vector3.Zero()); // attach the camera to the canvas this._camera.attachControl(this._canvas, false); // create a basic light, aiming 0,1,0 - meaning, to the sky this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene); // create a built-in "sphere" shape; with 16 segments and diameter of 2 let sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', {segments: 16, diameter: 2}, this._scene); // move the sphere upward 1/2 of its height sphere.position.y = 1; // create a built-in "ground" shape let ground = BABYLON.MeshBuilder.CreateGround('ground1', {width: 6, height: 6, subdivisions: 2}, this._scene); } sceneutils.ts /// <reference path=".././js/babylon.3.0.d.ts"/> export class SceneUtils { constructor(){} public SetSceneBackground(backgroundColor: string, scene): void { scene.clearColor = new BABYLON.Color3(1,0,0); } public GetCurrentBKColor(): string { return '#556789'; } } If I don't use the import declaration in game.ts, I don't get any errors and I can see my scene. However my project will have a lot of classes that I need to import in game.ts and other files. I was playing with require.js but I can't make it work. Thank you very much for your feedback!!!!!
  16. Hey guys, I'm very new to babylon JS and I've a problem with understanding how to add a mesh to the cursors movement. Here is an example: try.matterport.com. I've created a playgroud: https://www.babylonjs-playground.com/#S0BZWE The mesh is changing its size and isn't always in front off all other meshes as shown in the exampel (matterport). Can somebody give me some light? Thanks in advance Benji
  17. Funky Rendered meshes

    Hi guys , I'm fairly new to babylon and this forum. But I already like it a lot. Thanks for the knowledge that is shared over here! I'm trying to build my first little babylon experiment with a friend and we ran into a problem which we don't know how to solve. It's a small scene with a couple of skeletal animations. You can find over here: http://www.somewhere.gl/beta/AnimTest_v06.html When its done it should be looking like this, ...Reference Frame The meshes getting rendered in a funky manner/order We think it has something to do with the alphaIndexes and all our non-opaque meshes. We already searched for it an read this article: about how things are rendered, but we still don't know the best way to fix this: Some advice, best practices would be very welcome. THANKS IN ADVANCE flo PS.: Had some trouble with building a working playground. (It always said that I need to have a camera.) -- A LOT OF CODE WAS POSTED HERE --
  18. Hi there, Is there any kind of renderer.sortObjects() or renderer.depthTest() like other frameworks have? I have several transparent objects (alpha < 1.0) on the scene and sometimes renderer behaves glitchy (please see attachment). Theoretically, could write a function for sorting meshes by a distance to camera and set .alphaIndex, but it doesn't solve the problem with self-intersection like frame does c) & b). Babylon.JS 3.01, materials are PBRMaterial() with .disableDepthWrite = false and .alphaMode = 2. Any ideas? Thanks in advance!
  19. Hi there, I have one single OBJ file with several objects within. Each element has its unique name. Is it possible to load each object as a single mesh? Tried to do this: var parts = []; obj.onSuccess = function (task) { for(var i = 0; i < task.loadedMeshes.length; i++){ parts.push(task.loadedMeshes[i]); parts[parts - 1].material = uniqueMat; ... } } But it seems that each next mesh / geometry has all previous ones like an avalanche. Loading OBJ with 5 similar spheres as a test Geometry {delayLoadState: 0, _totalVertices: 266, _isDisposed: false, id: "c0d23769-a422-47c5-8060-fabd67a55b1a", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 532, _isDisposed: false, id: "e83a4890-a107-425d-969c-eea1f356e200", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 798, _isDisposed: false, id: "19b85286-2066-4ef7-9e95-bba19d906e71", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 1064, _isDisposed: false, id: "22bc102d-1acc-4fa8-9576-77a9915e666f", _engine: Engine…} main.js:254 Geometry {delayLoadState: 0, _totalVertices: 1330, _isDisposed: false, id: "3eb8eab7-1871-4fed-b484-c18fc881cb23", _engine: Engine…} main.js:234 0
  20. Hello. I'm new to BabylonJS and Blender but I've already played a little bit with both. I've downloaded a table (.3ds file) from www.steelcase.com and imported it into Blender. Then I've exported it as a .babylon file and tried to use this file in my .html. But it looks weird (because the table is build with planes I guess?) Can anyone help me to solve this?
  21. some problems...

    Hello, I'm back! , I have a scene with a .obj, it loads right, but with some problems, look at the images and see that some parts are wrong And another part are the windows that were missing half
  22. Hello, I'm making a page to see 3D objects with a .obj loader, this page has a menu that, when tight, changes the scene, So I'm just changing the location of the file and the name Code: BABYLON.SceneLoader.ImportMesh("", caminho, arquivo, scene, function (newMeshes) // caminho = way // arquivo = file These values I get from a function The problem is that when I change the scene he applies the materials of the previous scene in the current scene, what am I doing wrong? $scope.load3d = function(caminho,arquivo){ $state.go('app.interna', null, {reload: true}); var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, false); var createScene = function () { var scene = new BABYLON.Scene(engine); var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene); light.diffuse = new BABYLON.Color3(1, 1, 1); light.intensity = 0.7; light.groundColor = new BABYLON.Color3(1, 1, 1); light.direction = new BABYLON.Vector3(0, -1, 0); var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true; BABYLON.SceneLoader.ImportMesh("", caminho, arquivo, scene, function (newMeshes) { // caminho = way // arquivo = file var zeromat = new BABYLON.StandardMaterial("zeromat", scene); zeromat.emissiveTexture = new BABYLON.Texture("js/back2.jpg", scene); zeromat.wireframe = false; zeromat.backFaceCulling = true; newMeshes[0].material = zeromat; var meiomat = new BABYLON.StandardMaterial("meiomat", scene); meiomat.diffuseColor = new BABYLON.Color3(0.3,0.3,0.3); newMeshes[1].material = meiomat; camera.maxZ= 45000; camera.setPosition(new BABYLON.Vector3(7000,7000,7000)); camera.wheelPrecision = 0.1; }); // Move the light with the camera scene.registerBeforeRender(function () { }); return scene; } var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); } Sorry for my english, I'm using google translate
  23. Hello, when I try to upload a file. Stl it gives me the following error : SyntaxError: Unexpected token E in JSON at position 0 // Get the canvas element from our HTML above var canvas = document.getElementById("renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, true); BABYLON.SceneLoader.Load("js/", "stlfilestl.stl", engine, function (newScene) { console.log("reklfjsklf"); var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), newScene); newScene.activeCamera.attachControl(canvas, false); engine.runRenderLoop(function () { newScene.render(); }); });
  24. I can see through my obj, how to concert it? // Get the canvas element from our HTML below var canvas = document.querySelector("#renderCanvas"); // Load the BABYLON 3D engine var engine = new BABYLON.Engine(canvas, false); // ------------------------------------------------------------- // Here begins a function that we will 'call' just after it's built var createScene = function () { var scene = new BABYLON.Scene(engine); //Adding a light var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene); light.diffuse = new BABYLON.Color3(1, 1, 1); light.intensity = 0.6; light.groundColor = new BABYLON.Color3(1, 1, 1); light.direction = new BABYLON.Vector3(0, -1, 0); //Adding an Arc Rotate Camera var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene); camera.wheelPrecision = 100.0; camera.attachControl(canvas, false); // The first parameter can be used to specify which mesh to import. Here we import all meshes BABYLON.SceneLoader.ImportMesh("", "obj/", "teste.obj", scene, function (newMeshes) { BABYLON.OBJFileLoader.OPTIMIZE_WITH_UV = true; var zeromat = new BABYLON.StandardMaterial("zeromat", scene); zeromat.diffuseTexture = new BABYLON.Texture("obj/back2.jpg", scene); zeromat.backFaceCulling = true; zeromat.wireframe = false; scene.meshes[0].material = zeromat; var meiomat = new BABYLON.StandardMaterial("meiomat", scene); meiomat.diffuseColor = new BABYLON.Color3(0.9, 0.9, 0.9); scene.meshes[1].material = meiomat; // Set the target of the camera to the first imported mesh // camera.maxZ = 100; camera.maxZ = 0; camera.setPosition(new BABYLON.Vector3(7000,7000,7000)); camera.target = newMeshes[0]; camera.wheelPrecision = 0.1; }); // Move the light with the camera scene.registerBeforeRender(function () { }); return scene; } var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); });