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 231 results

  1. Hi, I'm new to babylon.js and would like to make a surface with 2D heatmap and 3d bar charts on the heatmap. I already got good example for the 3d bar chart, but struggling with the heat map. I think I would get it, but need some help - how to start? Draw 2D on the surface? On the ground?
  2. Hi Team, I have got a demo for 2D planner here DEMO 1 : http://www.babylonjs-playground.com/#SUXKHY#28 The yellow box meshes are draggable horizontally and vertically(go give it a try....). Now, I wanted to prevent dragging over the places where yellow box already exist(prevent collision of yellow box). In order to do that, I have made some changes in demo 1 to implement moveWithCollisions : Demo 2(using moveWithCollisions) - http://www.babylonjs-playground.com/#SUXKHY#32 Changes done: 1) Used checkCollisions and set ellipsoid(equal to width,height,depth of box) for yellow boxes: At Line : 39 - 40 box.checkCollisions = true; box.ellipsoid = new BABYLON.Vector3(sWidth, sHeight, sDepth); 2) set gravity to scene and gravity with ellipsoid to camera(not sure if this is needed as i want prevent collision among yellow boxes): At Line : 72-75 scene.gravity = new BABYLON.Vector3(0, -9.81, 0); camera1.applyGravity = true; camera1.ellipsoid = new BABYLON.Vector3(1, 1, 1); 3) enable collision for scene and camera At Line : 76-77 scene.collisionsEnabled = true; camera1.checkCollisions = true; 4) For horizontal dragging, moveWithCollisions for translating x instead of setting position.x (commented that code, line 194) : At Line : 195 currentMesh.moveWithCollisions(new BABYLON.Vector3(currentMesh.minxpos + Math.round((currentCursorXPosition - currentMesh.minxpos) / horizontalSlotWidth) * horizontalSlotWidth, currentMesh.position.Y, currentMesh.position.Z)); 4) For vertical dragging, Use moveWithCollisions for translating z instead of setting position.z (commented that code, line 201) : At Line : 202 currentMesh.moveWithCollisions(new BABYLON.Vector3(currentMesh.position.Z, currentMesh.position.Y, currentMesh.minzpos + Math.round((currentCursorZPosition - currentMesh.minzpos) / verticalSlotHeight) * verticalSlotHeight)); However, the dragging is completely gone now. what am i missing here
  3. Hi Team. I was checking the action manager page over here in order to attach the event on edge/border pick . I wanted to scale(set height,width,depth based on vertex picked) the mesh(box object) when user picks borders and drag it. something like https://jqueryui.com/resizable/ Any idea how this should be handled.
  4. 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...
  5. 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...
  6. 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
  7. 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?
  8. 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.
  9. 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?
  10. 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?
  11. 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(); } }
  12. 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(); } }
  13. The following functionality applies the current vertices' positions to the same vertices(No change to the mesh). var arr = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind); for (var i = 0; i <mesh.getTotalVertices(); i = i++){ var fx = arr[i * 3 + 0]; var fy = arr[i * 3 + 1]; var fz = arr[i * 3 + 2]; arr[i * 3 + 0] = fx; arr[i * 3 + 1] = fy; arr[i * 3 + 2] = fz; } mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, arr); I'm unsure as to how to apply a random noise, that still takes into account the vertices that are on the same position? If I use something like fx/fy/fz + a random value, the faces split up, and creates holes in the mesh.
  14. Let's say I have a material with the following properties: var ref = new BABYLON.CubeTexture("skybox", scene); var mat = new BABYLON.PBRMaterial("PBR", scene); mat.albedoTexture = new BABYLON.Texture("a.png", scene); mat.reflectionTexture = ref; mat.microSurface = .4; //mat.diffuseTexture = new BABYLON.Texture("s.png", scene); //mat.reflectivityColor = new BABYLON.Color3.FromHexString("#eeeeee"); //mat.albedoTexture.hasAlpha = true; //materialGloss.albedoColor = new BABYLON.Color3.FromHexString("#f00001"); Is it possible to have a texture on top of the reflecting surface? Preferably with an alpha channel. What about multiple textures layered on top of each other, like a dirt map on top of a logo?
  15. Hi Guys, I am working on 2D house planners. I have successfully rendered the design using json data structure i have. http://www.babylonjs-playground.com/#SUXKHY#4 However i am struggling with following things: 1) positioning camera in such a way that design lies exactly in between the screen. currently its on top right corner of screen. 2) zoom in zoom out should work with respect to cursor position. I.e. if i am having cursor on left side of planner, then that part should be focused(start coming to center) when zoomed in. Any help would be appreciated.
  16. Hi Team, I am having following code to create box(and also similar code to create planes in some cases): var box = BABYLON.MeshBuilder.CreateBox("box1", {width: sWidth, height: sHeight, depth: sDepth,updatable:true}, scene); box.enableEdgesRendering(); box.edgesWidth = 2.0; box.edgesColor = new BABYLON.Color4(0, 0, 1, 1); This creates solid edges on box/mesh. Is there any way to make dashed lines instead of solid ones.
  17. Hi Folks, I am downloading the snippet from http://www.babylonjs-playground.com/#55SNLC#9 using zip option. So that i can include it in my project and start working on it. However i am getting the error on load itself: 'Cannot read property 'isVerticesDataPresent' of undefined.' Nor do attached camera works. any help would be appreciated. Thanks..!
  18. Hello! As my profile states I am new here and rather new with Babylon.js as well. I found its ease of use and performance (over Three.js) good reasons to work on it. Currently, I have been working on a voxel game (i.e. minecraft-ish) and I have been using Three.js, as there are so many libraries already out there for voxels. On the other hand, pretty much nothing for Babylon. For this reason, I would like to fill the void and, perhaps, find someone who is interested in helping out on the quest. I started with creating a small library for creating snow (called `voxel-snow`) and called it `babylon-voxel-snow` (https://github.com/Nesh108/babylon-voxel-snow/). The idea is to make the transition from Three.js to Babylon.js as easy and as painless as possible for people (like me) who have been using it for their voxel projects. Adding the prefix `babylon-`, would make it extremely easy to find the counter part for Babylon. Here are some other voxel libraries which are currently only in Three.js: ☑ Voxel Snow (https://github.com/shama/voxel-snow) --> Babylon Voxel Snow (https://github.com/Nesh108/babylon-voxel-snow/) ☐ Minecraft skin (https://github.com/maxogden/minecraft-skin) ☑ Voxel walk (https://github.com/flyswatter/voxel-walk) --> Babylon Voxel Player (https://github.com/Nesh108/babylon-voxel-player) ☐ Voxel creature (https://github.com/substack/voxel-creature) ☑ Voxel critter (https://github.com/shama/voxel-critter) -> Babylon Voxel Critter (https://github.com/Nesh108/babylon-voxel-critter) ☐ Voxel builder (https://github.com/maxogden/voxel-builder) -> Unneeded as it can be imported with the Babylon Voxel Critter ☐ Voxel use (https://github.com/voxel/voxel-use) ☐ Voxel mine (https://github.com/voxel/voxel-mine) ☐ Voxel carry (https://github.com/voxel/voxel-carry) ☐ Voxel chest (https://github.com/voxel/voxel-chest) ☐ Voxel inventory creative (https://github.com/voxel/voxel-inventory-creative) ☐ Voxel items (https://github.com/jeromeetienne/voxel-items) ☑ Voxel clouds (https://github.com/shama/voxel-clouds) --> Babylon Voxel Clouds (https://github.com/Nesh108/babylon-voxel-clouds) ☑ Voxel skybox --> Babylon Voxel Skybox (https://github.com/Nesh108/babylon-voxel-skybox/) As I go, I will try to slowly implement them for Babylon, so hit me up if anyone would like to help out
  19. Hi Team, I have a requirement to create a custom shaped rectangle. I am using Lines2D as the shape may not be standard rectangle. however the lines are not rendering for rectangle. http://www.babylonjs-playground.com/#2AVSFH#259 My goal is to make this rectangle as container and other objects which are represented as lines can be dragged and dropped on it. Any help would be appreciated. Thanks..!!
  20. I am having trouble enabling zoom in zoom out feature in 2d scene. what am i doing wrong here: http://www.babylonjs-playground.com/#2WHFP1
  21. Hi Team, I am trying to create a custom design to give look and feel on modelling a house in 2D(we have implemented this in some other js currently). The requirement for same are: 1) Walls should be constructed using small rectangular segments. horizontal one having dimension 2*8 and vertical 2*6.In attachment they are represented using dashed lines. 2) these small rectangles should have ability to add components as children elements. In attachment, you can see some segments have darker shade or some object being added to it. Please let me know what is the correct approach i should use. Thanks.
  22. Hi Team, I am working on a project to create 2D editor for house modelling. So far, i have created a demo showing a tube as rectangle. http://www.babylonjs-playground.com/#7EJ4CM#2 My goal is to use the rectangle as object like walls where certain objects like doors,windows etc can be dragged and dropped. Everything in 2D. So i wanted to know: 1) how to change circular tube to square shaped ones. so that the edges gives look and fill of wall. 2) how to allow users to resize rectangle by stretching edges/sides of rectangle. 3) option to drag and drop certain objects on rectangles edges.
  23. This is my current setup: .Player presses the Mouse button .A Ray is fired using Babylon and the players camera The intersection point (vector3) is sent to the server The server uses Cannon to do it's own intersection testing (Using the player's head hitbox(Same location as the camera client-side) as the origin point, and the vector3 from the client as the target point. Now, if I wanted the server to be a bit more authoritative when it comes to hit detection, I shouldn't send the point from Babylon, but rather a 'fire' command, and, somehow, calculate a point that Cannon can use for it's own testing. The server is aware of the position of the origin vector, and has the rotation of the player's physics body. Now, my math is worse than bad, so: Would it be possible to calculate a point, a fixed distance away, using only the origin vector and the direction in which the point should be placed? I've seen various posts and discussions about it, but I really don't quite get it. Oh. And I know aimbotting isn't impossible to prevent, but I feel like the above method, that I already use, makes a bit too easy to achieve.
  24. This is a (sort of) port of the Three.js vehicle demo using Cannon.js, in case someone is looking for vehicle physics or just want to play with it. I made some weird choices like sperating the renderLoop and the postStep, and some quesswork here and there. And some options are left out, but can easily be added by looking at the Cannon.js docs or logging the vehicle object itself. This includes ConnectionPoints, which wheels steer, back or front wheels etc. Just play with the options, and press the "Run with Options" in the bottom of the Dat.GUI. http://www.babylonjs-playground.com/#1PX171#9 WASD to drive around. Space to brake.
  25. Hi Team. We have developed the platform for designing 2d models of buildings and work spaces. However, we were thinking to migrate from existing js to babylon for two reasons: to improve usability in designing and support to 3d model rendering. Our use cases are something like this.and i have already started working on it. so i will post the query for each topic. 1) a 2dplayground with just zoom in zoom out effect. I am using below code. which has both rotation and zoom effect. var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, true); I have seen a solution in one of the topic to detachControl for removing rotation effect. However that also removes zooming. I want to only keep zoom in zoom and no rotation pertaining to workspace. 2) Option to add elements to scene from panel. user can drag and drop elements like lines,circles on predefined shape/rectangular model available in space. What would the best case to allow users to only drag and drop on certain edges of the rectangle. 3) I have another example where i am trying to create basic solid line in rectangle. which throws some error: http://www.babylonjs-playground.com/#272WI1#90 Thanks for Help in Advance, MasterDon