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

Found 238 results

  1. hi all, i can achieve the scene saving and loading, but what i expecting is i want to save the single mesh and its child instead of saving all the scene.then i want to load the saved mesh. how i can achieve this.kindly suggest me some eg and method to achieve thanks vahi
  2. 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?
  3. Hi, I am developing a game with babylon.js, and I use an isometric view (so z coordinate, is actually pointing top left of the screen, and x bottom left) : var zoom = 2; var cameraPosition = new BABYLON.Vector3(5*zoom, 4.1*zoom, 5*zoom); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.TargetCamera("camera1", cameraPosition, scene); camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA; camera.orthoTop = 2.5 * zoom; camera.orthoBottom = -2.5 * zoom; camera.orthoLeft = -5 * zoom; camera.orthoRight = 5 * zoom; Therefore, when the player wants to go up (velocity.top), the controlled mesh should increment both z, and x, which results in the following equations : if (player.velocity.top !== 0 && player.velocity.left !== 0) var d = 0.7071; // Cos(45°) else var d = 1; player.position.z += Math.sign(player.velocity.top - player.velocity.left) * d * t; player.position.x += Math.sign(player.velocity.top + player.velocity.left) * d * t; All this seems to be working fine. Now, I would like the orthographic camera to follow the player when he is moving. I can't make the camera target the player, as it breaks the isometric view : the camera doesn't move to follow the player, it rotates, and as the angle of the camera changes, the isometric view breaks. Instead, I think I need to move the bounding box of the orthographic camera to be centered on the player position. But because the camera is orthographic, the bounding box doesn't seem to be related to the same coordinates as the player : the same way position.z is an arbitrary combination of velocity.top and veloctiy.left, orthoTop should be the inverse combination of position.z and position.x. So instead, my idea was to increment the bounding box by the same amount the player moves (as the velocity is in the same direction than the bounding box). By tweaking the values, I came up with this approximate solution, which I have a hard time to understand. if (player.velocity.top !== 0 && player.velocity.left !== 0) var d = 0.35; // Cos(45°)³ else var d = 1; camera.orthoTop -= Math.sign(player.velocity.top) * d * t * .7; camera.orthoBottom -= Math.sign(player.velocity.top) * d * t * .7; camera.orthoLeft -= Math.sign(player.velocity.left) * d * t * 1.4; camera.orthoRight -= Math.sign(player.velocity.left) * d * t * 1.4; It is approximate, because it only minimizes the error of movement between the camera and the mesh. But if the player goes one direction long enough, it will eventually go out of the screen. I am pretty sure there is an explanation for all this, but can't find it. What is the correct way to make an orthographic camera follow a target in an Isometric view ? Thanks,
  4. 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
  5. 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
  6. 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)
  7. For now, I'm basically just trying to understand some of the code behind the "drag and drop" sample in the Babylon.js playground. I would eventually like to create a 3d arcade style game, starting here by being able to move the meshes around WITHOUT the camera moving. But first things first tho, I need to understand the code thats here. I've read as much of the documentation and tutorials as I could, and I didn't see any previous post really related to what I'm looking for. There's are some things I dont get with the event listeners: getGroundPosition(), onPointerDown, onPointerMove. I altered the scene and added it to my hosting. I removed everything but the sphere. http://portfolio.blenderandgame.com/draganddrop.html Posting the code here, I commented the parts of the code I dont get: With getGroundPosition(), I dont get the predicate. Not sure i entirely grasp the concept of "predicate". I know that its a callback that returns a boolean value: returns true if ground was clicked. I just dont know what purpose that boolean serves. What other piece of code is that impacting? Not sure how it ties in. I notice that if you comment that part out, so that x and y are the only parameters, then the meshes will "sink" in into the ground instead of staying on the surface. I want to understand it on a code level tho. var getGroundPosition = function () { var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh == ground; }); //?? dont understand purpose of predicate if (pickinfo.hit) { return pickinfo.pickedPoint; } return null; }I have the same question about the scene.pick predicate in onPointerDown (this one returns true if the ground was NOT what was clicked on. ) One OTHER question about this: startingPoint is assigned a value of getGroundPosition(evt). I know its passing the event. But getGroundPosition was defined WITHOUT parameters. So why is a parameter being passed to it? And what difference does that make? I've never seen an example like that with addEventListener. var onPointerDown = function (evt) { if (evt.button !== 0) { return; } var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh !== ground; }); //dont understand purpose of predicate again if (pickInfo.hit) { currentMesh = pickInfo.pickedMesh; startingPoint = getGroundPosition(evt); //dont understand why argument is passed if fucntion was defined with no parameters.. if (startingPoint) { setTimeout(function () { camera.detachControl(canvas); }, 0); } } } Because of those two questions. There is a LOT I dont get about onPointerMove. But hopefully once I understand the above, it will help me figure out the rest. Dont want to bombard with my questions here on my first post Muchas Gracias to anyone that can help. Can't get any further with this and I dont want to give up and move on. Everything else I see with regard to movement is actually just moving the camera, not translating a mesh with a static camera view. This is the only sample I've come across that actually disengages the camera (at least only when the mesh is being moved).
  8. 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?
  9. Castor GUI

    Question really for the awesome Dad72, what are the future plans for Castor GUI, if there are any at all?
  10. 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
  11. 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
  12. 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
  13. So, I'm looking for ways to create a ragdoll effect using Cannon.js, and (preferably) a skinned, imported mesh. I tried the following 2 methods: #1: Use getRotation/position/absolute.. etc on the bones, to match with the Cannon bodies. This doesn't seem to work like it does the other way around (Match Cannon body to bone position and rotation). #2: Split my model into the different body parts, so each and every limp can be used seperately. This 'can' work, but requires a lot of work, and won't look as good as on a skinned model. Here is an example of a ragdoll, shamelessly stolen from the Cannon.js Three.js Ragdoll example: http://www.babylonjs-playground.com/index.html#XVETC#3 I'm looking for creative ways of achieving this very same ragdoll effect, but with a model. Edit: Forgot to mention, press A to start the ragdoll by enabling the stepping of the Cannon world.
  14. 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
  15. Is is there any way to debug impostor of mesh. If we have BABYLON.PhysicsImpostor.BoxImpostor on some mesh, Can we debug bouning box of BoxImpostor or any other impostors, that we can see how Impostors looks like around mesh? greetings ian
  16. @RaananW Hi all, I have some simple playground. I would like to try set up purple Bridge and red Hinge, like physics hinge joint. I create this little scene with blender and export it with exporter 5.0.5. Here is a playground (in comment there is also .blender and .babylon file) http://www.babylonjs-playground.com/#MBFUI#22 Can anybody explain me how to set things right. Origion/Position of Hinge (cilinder) is in center of object HInge. Origin/Position of Bridge is in center of the bottom face of Bridge. I would like that Bridge should be vertical above Hinge. And when ball hit Bridge, the Bridge should fall down like real Bridge. I would like that pivot of Bridge should be at point of Bridge's origin/position. (or maybe origion/position of Hinge/red cilinder). Axis is x-axis. I really don't understand things? I spend all day on this example. If I understand right, I should Use HingeJoint. (Or should I use Hinge2Joint) ? mainPivot: ( I think this should be center/position/origin of Hinge connectedPivot: ? I don't understend why and what to set mainAxis: (I think should be x-axis (red Hinge object) connectedAxis: ? I don't understend why and what to set Can anybody explain connectedPivot and connectedAxis ??? greetings ian
  17. 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...
  18. I am struggling with a similar problem like in this thread, but the solution provided here seems not so ideal... I have many modules in my game, and if I use Babylon.js in any of those, I import it using: import Babylon from 'babylonjs' So there isn't any good way to include Canvas2D similarly? I understand it is somehow baked to Babylon.js, but how do I use it? I'm downloading all the dependencies from the npm, including Babylon.js. Then I bundle everything using Webpack. Ideally, I would like to use Canvas2D (for example) like this: import Babylon from 'babylonjs' import Canvas2D from 'babylonjs' Please help, I've been scratching my head for hours now...
  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. 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.
  21. Hi Team, I am working on 2D house planners. I have following design. Created using boxes: http://www.babylonjs-playground.com/#SUXKHY#7 However the edges/border of design looks broken when camera is positioned at 200+ distance with respect to y axis of design. The only time they are visible properly is when they are viewed closely when zoomed. How can i fix this?
  22. 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?
  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(); } }