Search the Community

Showing results for tags 'babylon.js'.



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

Found 246 results

  1. Hello, I'm a new here, but I'm very exited with Babylon.js. I started my project with it, and already dealt with several problems (mostly connected with blender export). Thanks of the community and this wonderful forum But I reached a point that I can't proceed, have dug for a while, but didn't found a solution. When I clone a mesh, it is fine on laptop, but on iPad the result is not cloned object, but instance of it. I read on the forum that I should use computeBonesUsingShaders = false, ( http://www.babylonjs-playground.com/#GTHTR#1 ). I did it that way, and it is fine. But another problem arise - the cloned object doesn't show colors of the materials. Probably the best way to explain is an example. Here is it: http://www.babylonjs-playground.com/#GTHTR#20 My question is how to add colors to the cloned mesh? There are materials for t-shirt, socks, hair, etc. But all are missing. Thanks in advance.
  2. Hello It is possible turn off parent rotation ? var box = BABYLON.MeshBuilder.CreateBox("box1", 1, scene); var sphere = BABYLON.MeshBuilder.CreateSphere("sphere1", 1, scene); box.parent = sphere;
  3. Helo i have a list of element populated form user database and i want to make their 3d representation in webgl or babylon.js I want to changing the object color depending to the user data from list I mean to set color green for object were there id or name are present in this list and set red for those absent How can i make this please ?
  4. Hello! I try to implement jumping without included physics plugin. I've read so many topics, but without the result I want. Here is a demo - http://www.babylonjs-playground.com/#YBAGYL Please press RUN, left click to enable moving with arrows and mouse - try to jump with Shift on the red box - you will fall down through it, but I want to stay ON it. I think I've enabled all checkCollicions, gravity etc, but still no luck. What am I missing? Maybe my jumping implementation is bad. At this moment I don't want to use a physics plugin because I think it's an overhead for me - I need moving and jumping only from a character at the moment.
  5. Hello every body I have question about using variables and "this". I am autodidact and I really like code and last 2 week I am trying make "simple" game but I am stuck. Here is my question : If I create js file and make there function: function Box(scene){ this.scene = scene; this.box = BABYLON.Mesh.CreateBox("box", 0.32, this.scene); this.boxMat = new BABYLON.StandardMaterial("mat",this.scene); this.boxMat.diffuseColor = new BABYLON.Color3(10,1,1); this.box.material = this.boxMat; }; And I have other js file whit other function which contains mesh like a sphere for example and now I want to use "this.box.position.x " in function where is the sphere. Is it possible ? I tried like function call() but it didnĀ“t worked. I treid search in google some exampels and without success. Sorry for my bad English. Have a nice evening .
  6. Hello, A new upcoming startup is looking for a freelancer developer (for a really cool job). Skills: 3D graphics (Three.js / Babylon.js or any other alternative) Extras: React Node.js TypeScript ES6/ES7 Redux or any other alternative jobs@designwithfriends.com or PM for details
  7. Hi Team, I am working on a floor planner. I have implemented freewall drawing feature using ribbons. I am also setting the borders to freewall using enable edge rendering. This works fine for individual ribbons. however, there can be a situation where multiple freewalls are connected to each other. in this case, i want borders to come for complete path and not individually. i tried merging the meshes using `BABYLON.Mesh.MergeMeshes` . however, the borders are coming still individual Something similiar to freewalls fro, homestyler (https://www.homestyler.com/floorplan/?&lang=en_US). what is the best way to implement something close to this.
  8. Hi. I am babylon.js beginner. I am developing obj.file viewer using babylon.js By the way, when loading obj.file, DefaultLodingscreen separeted form canvas. this is static screen: this is loadingscreen. I will wait good resolution. best regards.
  9. I'm completely in the dark when it comes to creating meshes from scratch. I figured it out as far as positions, indices, applying vertex data...I have this basic example, creating a barn-wall style pentagon from 5 x,y,z primitive vertex arrays - var v2pent = (v3s, mesh) => { // clockwise from tl, 0 1 4, 1 3 4, 1 2 3 var vtxdt = new BABYLON.VertexData vtxdt.positions = _.flatten(_.map([0,1,4,1,3,4,1,2,3], i => v3s[i])) vtxdt.indices = [0,1,2,3,4,5,6,7,8] // these two lines added to try to debug, no help // vtxdt.normals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1] // vtxdt.uvs = _.flatten(_.map([0,1,4,1,3,4,1,2,3], i => [v3s[i][0],v3s[i][1]] )) var mesh = mesh || new BABYLON.Mesh('t1', scene) vtxdt.applyToMesh(mesh, true) return mesh } It sort of works, but the meshes are always dark gray to black (not picking up light?), and more importantly right now, not coming up when they're the foreground-most mesh when calling scene.pick - the other pentagon wall behind it will pick it up first! Help very much appreciated - I've read pretty much all the relevant docs and am totally confused. I don't know if its the uv and/or normal calculation, or if there's some helper function in the library to generate those for me (besides just ComputeNormals)? Is it something I could solve with BABYLON.Mesh.DOUBLESIDE, or an equivalent? The material used in this case is the following by the way: var wallMaterial = new BABYLON.TriPlanarMaterial("metal", scene); wallMaterial.tileSize = 12; wallMaterial.diffuseTextureX = metalTexture; wallMaterial.diffuseTextureZ = metalTexture; wallMaterial.backFaceCulling = false; (copy and pasted from my issue here https://github.com/BabylonJS/Babylon.js/issues/2735)
  10. Playground DEMO: https://playground.babylonjs.com/#Z88Q4W#2 Hi, this is my first post in this forum. I started with bjs a few weeks ago and I love it! I played around with the tutorials and while creating a small project I detected an issue with collision detection (intersects.Mesh). The sphere's in my demo have different colors, representing their life count. In my example I want to detect the life of an object when being hit by the ShotCylinder and reduce the LifeCount by 1. Now when I hit the object in my console it decreases the life constantly. How can I stop the life from dropping ? (Maybe stop the collision, I only need the detection once) It seems like the collision seems to survive the dipose(). Maybe someone could help me. Hope my code readable, I am not a professional coder please keep that in mind! Have a great day ! Nils
  11. I'm looking for ways to optimize a scene I created in the Playground. This scene is based on previous work from another thread, I just added some objects and logic to mimic a small game. It uses native CannonJS for the PFS-camera and movement of the monster models. I used the code and model from the instances demo. From line 16, you can turn on and off physics for the monsters, skeletal animations, the skybox, trees, shadows, procedural textures(grass), and whether or not the monsters should lookAt and follow the player. As well as specify the amount of trees + the range and amount of monsters. https://www.babylonjs-playground.com/#FZZV7K#23 I'm only hitting around ~30 FPS with this example. Is a scene such as this too heavy for WebGL and browsers? The trees are instances, so unless I clone and merge them, I don't see what could be changed there. Maybe a smaller, compressed texture. The monster models all have skeletons and animations, so no instances or merging can be used here. Disabling physics seems to give some FPS boost, so maybe using a worker would do some good in this example. I'll give this a try, and see what effect it has on overall performance. Here's a minimized version, with most things stripped, and 50 monsters without animations. https://www.babylonjs-playground.com/#FZZV7K#24
  12. Hi Team, I am creating arrows using ribbon http://www.babylonjs-playground.com/#I22AB#4 Using material, I am trying to set the color to the arrows. however i am failing here. what am i missing?
  13. Castor GUI

    Question really for the awesome Dad72, what are the future plans for Castor GUI, if there are any at all?
  14. Fixed FreeCamera position

    Hey guys, is there a posibility to fix the FreeCamera's position. So the camera won't move on key-press. I just want to rotate the camera on key-press. Thanks in advanced Benji
  15. On the mobile side, such as iPhone6, how do I move the camera (should not be "wasd"), and the mouse can not control the camera rotation thanks
  16. How to read the model from the cache, let it show, rather than in the case of caching to reload the model, so very costly performance
  17. Hi Everyone, I am working on 2D planner. I have this demo http://www.babylonjs-playground.com/#SUXKHY#378I am facing following issue: 1) As you can see i have created custom mesh (window object named w1) on top left corner of design. The code is at line 369,370. This window object have y index greater than another slot element(green slots) on top of which it lies. So there is no collision. I am aware that mesh border rendering flickers when the borders of mesh collides with each other.but i am ensuring that it is not colliding with object below it. how can i fix flickering ? 2) The text(W1) is created on top of plane having default white color. this plane hides green slots which are behind them. I have tried setting alpha property to make the plane transparent. however it is also changing transparency for text on it. How can i fix this line 138
  18. Issue in mesh dragging

    Hi Team, I am doing a good progress for migrating 2D planner to use babylon js. Here is the playground for same: http://www.babylonjs-playground.com/#SUXKHY#24 I am having couple of issues here, There: 1) as you can see the boxes with yellow faces depicts certain walls that are draggable in respective rows and columns. However horizontal walls can not be dragged to the last slot in its current room row and vertical slot is not draggable on top most slot in its column. what am i missing here? The code for horizontal draggable to right is on line : 183 The code for vertical draggable to top is on line : 196 2) How can i avoid dragging element to position where there is already a wall with yellow faces. 3) There is some code which is causing the page to become unresponsive.This do not happen consistently but i can see the high memory uses in chrome task manager. Any help would be appreciated. Thank you for stopping by...
  19. I have used below code to disable rotation. camera1.inputs.attached['pointers'].detachControl(canvas); This removes all pointers events. 1) However i would like to only remove rotation feature only. and click + drag should be binded for panning feature(which is on cntrl+click+drag now) 2) how can extend the control keys for zoom and panning feature. i was hoping to implement something like this: A : Pan left D : Pan right W : pan front S : pan back And also over
  20. error in hosted project

    Hi Team, I have hosted one of the playground code. Here is the link to hosted URL(i have also left the debugger so that any one can play around): 2D-engine-worldspace However i am getting following errors there: Error 1: d._cacheNode.getInnerPosToRef is not a function at WorldSpaceCanvas2D.Group2D._bindCacheTarget (babylon.js:94301) at WorldSpaceCanvas2D.Group2D.applyCachedTexture (babylon.js:93634) at new WorldSpaceCanvas2D (babylon.js:100564) at createScene (2denginescrrenspace.html:58) at 2denginescrrenspace.html:73 for below code: canvas= new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(200, 200), { id: "WorldSpaceCanvas", renderScaleFactor : 4 //worldPosition: new BABYLON.Vector3(0, 0, 200), //worldRotation: BABYLON.Quaternion.RotationYawPitchRoll(0, 0, 0), //enableInteraction: true }); Error 2: Uncaught Error: Parent renderCanvas of mainRect_58_54.1 doesn't have a valid owner! at Rectangle2D.Prim2DBase [as constructor] (babylon.js:89031) at Rectangle2D.RenderablePrim2D [as constructor] (babylon.js:92644) at Rectangle2D.Shape2D [as constructor] (babylon.js:93235) at new Rectangle2D (babylon.js:95191) at createBox (2denginescrrenspace.html:38) at flytrapdatascreenspace.js:464 for code: var box = new BABYLON.Rectangle2D({ id: "mainRect_"+posX+"_"+posY, parent: canvas, x: posX, y: posZ, width: sWidth, height: sDepth, fill: "#404080FF", border: "#FFFFFFFF", borderThickness: 0.2, children: [ ]}); return box; I have downloaded babylon js from version builder. What am i missing here?
  21. Let's use this PG as an example: http://www.babylonjs-playground.com/#1PX171%2323 (WASD keys). Driving forward makes the camera follow the vehcile properly from a distance behind it. Now, when you go backward, the camera shifts direction and follows the vehicle from the rear end. I do not want this particular functionality in my example. I've looked through PG's, and they don't seem to have this issue. Another example is the Distraction Demo: https://www.babylonjs.com/demos/distraction/distraction.html I don't see any changes to the FollowCamera code base between these two versions of Babylon, and even if I use the same (default) settings, the weirdness remain. Is there any way to keep the camera fixed, without having to recreate a followcamera myself?
  22. I have rendered a 2d scene using one of the json data. For this, I have used 2d rectangles to implement the walls of home planner. http://www.babylonjs-playground.com/#2WHFP1#7 However the zoom in zoom out feature isn't working despite setting arcrotatecam and cameras setposition and target. What am i missing here? If it doesn't work, I was hoping to implement scaling(as suggested in one of the post by @Wingnut) and re positioning element when user is scrolling in and out. But not sure whats the best way to re position all the elements though. Any help and suggestion would be great.. Thanks.
  23. Hello, I cannot find an answer by google. Maybe do you know how to solve this problem or what does it mean this message in the console: Live Demo /// <reference path="../babylon.d.ts" /> namespace MATERIALS { export class Basics { /* * Public members */ /* * Private members */ private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; private _camera: BABYLON.ArcRotateCamera; private _light: BABYLON.PointLight; constructor(canvas: HTMLCanvasElement) { // Engine this._engine = new BABYLON.Engine(canvas); // Scene this._scene = new BABYLON.Scene(this._engine); this._scene.fogEnabled = true; // Fog is enabled in the scene this._scene.fogMode = BABYLON.Scene.FOGMODE_EXP; // Linear fog this._scene.fogColor = new BABYLON.Color3(1, 1, 1); // White this._scene.fogDensity = 0.005; // Camera this._camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 150, BABYLON.Vector3.Zero(), this._scene); this._camera.attachControl(canvas); // Light this._light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), this._scene); this._light.intensity = 1; } /** * Runs the engine render loop */ public runRenderLoop(): void { this._engine.runRenderLoop(() => { this._scene.render(); }); } /** * Creates a scene with a plane and 6 spheres */ public createScene(): void { /** * Meshes */ // Plane var plane = this._createPlane(); // Spheres var spheres = this._createSpheres(); // Skybox var skybox = this._createSkybox(); /** * Mirror texture */ // Mirror texture var mirrorTexture = new BABYLON.MirrorTexture("mirrorTexture", 1024, this._scene); mirrorTexture.mirrorPlane = BABYLON.Plane.FromPositionAndNormal(new BABYLON.Vector3(0, -5, 0), new BABYLON.Vector3(0, -1, 0)); // Set meshes and remove plane + skybox for (var i = 0; i < spheres.length; i++) { mirrorTexture.renderList.push(spheres[i]); } // Apply mirror texture (<BABYLON.StandardMaterial>plane.material).reflectionTexture = mirrorTexture; } /** * Creates a plane with a normal map texture */ private _createPlane(): BABYLON.Mesh { var material = new BABYLON.StandardMaterial("planeMaterial", this._scene); material.diffuseTexture = this._configureTexture(new BABYLON.Texture("floor_diffuse.PNG", this._scene)); material.bumpTexture = this._configureTexture(new BABYLON.Texture("floor_bump.PNG", this._scene)); material.fogEnabled = false; var plane = BABYLON.Mesh.CreatePlane("plane", 150, this._scene); plane.material = material; plane.position.y -= 5; plane.rotation.x = Math.PI / 2; return plane; } /** * Creates 7 spheres with different materials */ private _createSpheres(): BABYLON.Mesh[] { var spheres: BABYLON.Mesh[] = []; var initialX = 70; for (var i = 0; i < 7; i++) { var sphere = BABYLON.Mesh.CreateSphere("sphere" + i, 10, 9, this._scene); sphere.position.x = (initialX -= 15); sphere.material = new BABYLON.StandardMaterial("sphereMaterial" + i, this._scene); (<BABYLON.StandardMaterial>sphere.material).fogEnabled = true; spheres.push(sphere); } // Material 1 (diffuse color) var material1 = <BABYLON.StandardMaterial>spheres[0].material; material1.diffuseColor = new BABYLON.Color3(1, 0, 0); // Material 2 (Texture with alpha) var material2 = <BABYLON.StandardMaterial>spheres[1].material; material2.diffuseTexture = new BABYLON.Texture("cloud.png", this._scene); material2.diffuseTexture.hasAlpha = true; // Material 3 (Alpha) var material3 = <BABYLON.StandardMaterial>spheres[2].material; material3.specularColor = new BABYLON.Color3(0, 1, 0); material3.specularPower = 10; material3.useSpecularOverAlpha = true; material3.alpha = 0.5; // Mateiral 4 (back face culling) var material4 = <BABYLON.StandardMaterial>spheres[3].material; material4.diffuseTexture = material2.diffuseTexture; material4.backFaceCulling = false; // Material 5 (textures repeat) var material5 = <BABYLON.StandardMaterial>spheres[4].material; material5.diffuseTexture = this._configureTexture(new BABYLON.Texture("cloud.png", this._scene)); material5.diffuseTexture.hasAlpha = true; // Material 6 (texture) var material6 = <BABYLON.StandardMaterial>spheres[5].material; material6.diffuseTexture = new BABYLON.Texture("floor_ao.PNG", this._scene); // Material 7 (share the same material as the plane) spheres[6].material = this._scene.getMeshByName("plane").material; return spheres; } private _createSkybox(): BABYLON.Mesh { var material = new BABYLON.StandardMaterial("skyboxMaterial", this._scene); material.reflectionTexture = new BABYLON.CubeTexture("skybox/TropicalSunnyDay", this._scene); material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; material.backFaceCulling = false; material.fogEnabled = false; var skybox = BABYLON.Mesh.CreateBox("skybox", 300, this._scene); skybox.material = material; return skybox; } /* * Configures a given texture * Changes the uv scaling */ private _configureTexture(texture: BABYLON.Texture): BABYLON.Texture { texture.vScale = texture.uScale = 5; return texture; } } window.onload = () => { let canvas = <HTMLCanvasElement>document.getElementById("renderCanvas"); let materials = new Basics(canvas); materials.createScene(); materials.runRenderLoop(); } }
  24. Hello, How do you think why the attachControl doesn't work in this code? /// <reference path="../babylon.d.ts" /> namespace LOADING { export class LoadScene { /* * Public members */ public camera: BABYLON.ArcRotateCamera; public light: BABYLON.PointLight; /* * Private members */ private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; constructor(canvas: HTMLCanvasElement) { // Engine this._engine = new BABYLON.Engine(canvas); // Scene this._scene = new BABYLON.Scene(this._engine); // Camera this.camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 30, BABYLON.Vector3.Zero(), this._scene); this.camera.attachControl(canvas, true); // Light this.light = new BABYLON.PointLight("light", new BABYLON.Vector3(20, 20, 20), this._scene); this.light.diffuse = new BABYLON.Color3(0, 1, 0); this.light.specular = new BABYLON.Color3(1, 0, 1); this.light.intensity = 1.0; /** * Load an exported scene * This static method contains 6 parameters * 1: the directory of the scene file * 2: the scene file name * 3: the Babylon.js engine * 4: a success callback, providing the new scene created by the loader * 5: progress callback, empty as default (can be null) * 6: error callback, providing the new scene created by the loader */ BABYLON.SceneLoader.Load("./", "awesome_scene.babylon", this._engine, (scene: BABYLON.Scene) => { // Success callblack this._scene = scene; // We can now access the scene.meshes array etc. // Decal the meshes to 10 units on X for (var i = 0; i < this._scene.meshes.length; i++) { console.log(this._scene.meshes[i].name); this._scene.meshes[i].position.addInPlace(new BABYLON.Vector3(10, 0, 0)); } // Just append the same scene this._appendScene(); }, () => { // Progress callback // Do something with your web page :) }, (scene: BABYLON.Scene) => { // Error callback }); } /* * Use graphs.The new parent of the light is the camera. * Then, the light's position will be the same as the camera */ public setCameraParentOfLight(): void { this.light.position = BABYLON.Vector3.Zero(); this.light.parent = this.camera; } /** * Runs the engine render loop */ public runRenderLoop(): void { this._engine.runRenderLoop(() => { this._scene.render(); }); } /** * This method appends new scene with the already existing scene * Here, we are appending the same scene at its original position */ private _appendScene(): void { BABYLON.SceneLoader.Append("./", "awesome_scene.babylon", this._scene, (scene: BABYLON.Scene) => { // Do something you want }, () => { // Progress }, (scene: BABYLON.Scene) => { // Error }); } /** * Import the skull mesh (available in the Babylon.js examples) * This methods imports meshes and only meshes. */ private _importMesh(): void { BABYLON.SceneLoader.ImportMesh("", "./", "skull.babylon", this._scene, (meshes, particles, skeletons) => { // Success callback // Here, meshes contains only one mesh: the skull (meshes[0]) // Particles array is empty // skeletons array is empty }, () => { // Progress callback }, (scene: BABYLON.Scene, e: any) => { // Do something console.log(e.message); }); } } window.onload = () => { let canvas = <HTMLCanvasElement>document.getElementById("renderCanvas"); let scene = new LoadScene(canvas); scene.runRenderLoop(); scene.setCameraParentOfLight(); } }