Search the Community

Showing results for tags 'camera'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 277 results

  1. Hi, I am developping a virtual environment using webVRcamera to render it with HTC Vive Headset. I have no problems to see the scene into HTC Vive, however, I cannot move, the controllers do not work. I have tested this playground and there I can't move too. How could I solve it? Thanks!
  2. I am creating a script that will move a box along the vector in front of the center of the camera: Apart from the textures not loading, why does this script seem to not process the collision of the box falling onto the larger box in BJS Playground? The box upon which the smaller box falls seems to flicker, then disappear entirely after the smaller box lands. It works fine on my server. Also, is there a more elegant way to accomplish this in BJS?
  3. Hi, I have animation of camera target (works only if some other property like alpha is animated at the same time) PG. If I switch tabs and wait a bit and come back to playground, alpha animation jumps to last frame as expected but target is moved to correct position but focus of camera stacks at last target positon before tab swicth. probably related to the same issue described here:
  4. You can easily see what's the issue in this video I recorded : error.avi The problem is that once the camera starts following the player, speed increases and the collisions of the tilemap just doesn't work. My idea is to create a simple platformer, but I want very pixelated textures, so I "zoomed" by rescaling both, the player sprite and the layer of the tilemap. This is the code I'm using : And here is the whole project folder : test_game.7z Does anyone has any idea of why this could be happening ?
  5. Is it possible to add a physics impostor to a free camera with cannon.js that allows it to collide with rigid bodies just like any other mesh that has a physics impostor? I also need the free camera to maintain the standard keyboard/mouse controls.
  6. Hi, I have a few issues with VirtualJoysticksCamera: 1. Z-index: It can't be reliably used in a user's UI as it draws a 2d canvas which will ether cover html elements or will get buried under. 2. When Babylon scene gets destroyed, the canvas created by VirtualJoystick class remains attached to html (camera.detachControl() has no effect). 3. I couldn't get the UI of VirtualJoystick (the circles) to show. I'd gladly use Universal Camera for all scenarios, but it doesn't provide adequate controls for touch devices (you can't look up and down). Has anyone got a chance to successfully implement FPS-like cameras (move-forward/back, move-sideways, look-up, look-down, rotate) on a touch device?
  7. Hi, I have object that is moving around circle, PG. I would like to move camera in specific angle (beta, alpha, radius) to target so it always show front face of target. Any ideas how to calculate correct alpha, as beta and radius is maintained auto by camera.
  8. i just had a problem to calculate the camera position to fit all kinds of size of meshes. this pg make the mesh in the center of the screen (you can change the ground size), but not working on mobile devices. don't know why.
  9. Hi, I have created the object on Babylon Js and can able to rotate and view the object using arc rotate camera. My requirement is: 1. I positioned the camera on some position. 2. When the user click and move the mouse on canvas, can able to rotate the object. I have done the above things Whenever the user release the mouse on canvas while rotating, the camera back to the default position of initial stage.----> This is my requirement. Can anyone help on this?
  10. babylon js

    Hi, I have created the object on Babylon Js and can able to rotate and view the object using arc rotate camera. My requirement is: 1. I positioned the camera on some position. 2. When the user click and move the mouse on canvas, can able to rotate the object. I have done the above things Whenever the user release the mouse on canvas while rotating, the camera back to the default position of initial stage.----> This is my requirement. Can anyone help on this?
  11. Hi, I used feature that you can pass mesh as target for camera, so camera will move together with it. Playground also older example from different topic. It was working fine but lately I upgraded to git version of babylonjs, and this feature stoped to work. (In some cases it doesn't work at all, sometimes it works if you use animation to change the position of target mesh). If you rotate the camera it will jump to the correct position but it doesn't react on position changes of mesh. Is it bug or something changed in api?
  12. Hi there, I'm new here. First of all: Thank you to all of you guys contributing to Babylon.js, it's an amazing project! I'm using it mainly to set up interactive 3D visualizations for scientific purposes and it works like a charm! Here's my question: So far I mainly use the ArcRotateCamera. There's nothing wrong with that camera, but the restriction that I cannot rotate over the 'north/South Pole' is something that bothers me, because it limits the exploration possibilities of the user. Further, although one can see the target from any position around it, one cannot see the target in all possible orientations. I would like a camera with trackball-like controls for the rotation around the target, meaning that in whichever position the camera is, I want to be able to rotate it around the two independent directions orthogonal to the line connecting target and camera position. Is it possible to create such a behavior by customizing the UniversalCamera? Or if not, what would be the simplest way to implement such a camera? Another idea would be to use a static camera and to attach custom mouse controls to rotate the target in the preferred way. But I don't know if this creates any drawbacks in terms of rendering performance. Does it? Thanks a lot!
  13. In games and, player control is implemented with the mouse. The player is always in the center of the screen and moves in the direction the mouse cursor points to. Phaser.js offers us control only through the keyboard, as there Perhaps someone already implemented control such as in and using phaser.js? Maybe someone has code samples?
  14. Hello everyone! I'm new with babylon.js and now I'm trying to make a third person shooter game. The idea is to make an ArcRotateCamera that is able to perform unlimited alpha rotation. However, I'm struggling with the mouse cursor as it has a limited movement (that is the border of the browser), making an unlimited alpha rotation impossible. Is there any way to make it possible? Thank you in advance
  15. Hello! I am new in Webgl programming, and I am having trubel with moving the camera. I try to create a maze game, and I use three.js and box2D.js. The problem is that the camera is looking from above into the mazze, while I am trying to make it part of the maze (I mean looking like you are trying to escape from the maze). Could anyone, please, help me? I haven't found any ideeas on the web....
  16. Hi, I am trying to move mesh relative to ArcRotateCamera alpha value. Basically it should move the same direction as mouse is moving (up, down, left, right) , works fine with 0 angle but different angles need to flip x/z and change their directions. What the best way to calculate direction vector from angle and 0 angle direction? Working example: (angle 0) Not working: (angle 55) I tried to rotate vector using: const matrix = BABYLON.Matrix.RotationAxis(BABYLON.Axis.Y, camera.alpha); const movement = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(x, 0, z), matrix);
  17. I'm trying to make game resize appropriately to size of the window/screen. Everything's working out great, except for the tilemap. It seems like the rendering bounds are not updated. (typescript) onResize() {; var newWidth = window.innerWidth / 3; var newHeight = window.innerHeight / 3;, newHeight); = Phaser.ScaleManager.SHOW_ALL; //need to call this to apply new size?, newHeight); for (var i = 0; i < this.tilemap.layer.length; i++) { this.tilemap.layer[i].width = newWidth; this.tilemap.layer[i].resizeFrame(this.tilemap, newWidth, newHeight); this.tilemap.layer[i].crop(new Phaser.Rectangle(0, 0, newWidth, newHeight), false); this.tilemap.layer[i].updateCrop(); }, Phaser.Camera.FOLLOW_TOPDOWN, 0.8, 0.8); } As you can see I've tried everything, I would've expected resizeFrame or crop to do something, but unfortunately they don't. Do note that the rest of the game updates the size correctly, as the fish get rendered in the widened area just fine. Any ideas how to update the tilemap to the new size? Thanks!
  18. Hi, I used to add mesh as camera.setTarget so camera follows mesh. But in t.ds file only Vector3 is allowed as target. But example with mesh as target works: Typings are wrong or I am doing something wrongly?
  19. I used to have a function that center the player sprite in the camera, like this (in the camera class): centerOver: function(sprite) { const vx = sprite.x - (this.width / 2) - this.x; const vy = sprite.y - (this.height / 2) - this.y; this.translate(vx, vy); }, translate: function(vx, vy) { this.x += vx; this.y += vy; } So that the player can be in the middle of the screen and the camera follows the player smoothly. vx, vy are the horizontal velocity and vertical velocity. with and height is the camera's width and height, and this.x, this.y represent the top, left position of the camera in the map. But now I am developing a MMO game. The player's position is no more smooth all the time. It may occasionally jump a bit when the latency is too high, but I still want the player to be in the center of the camera. What should I do?
  20. Hi, I wonder what is the best way to get only these meshes which are visible by camera at the moment. I know there is octree implementation in babylon, but Im not sure how to use it. I've seen this but still have problems to make it work. If someone could explain (write a piece of code or pseudo code) how to make it. Lets say I have 5 cubes on my scene and a free camera. I would like to have a function that would return meshes which are visible in a viewport of my camera. Thank you, Regards V.
  21. Hi, I'd like to know if there is any way to tell a camera to only render when I want it to. I have a setup with two cameras, where one of them shows the entire scene from above and the other shows only a small segment of the scene. I'd like to be able to render the camera that shows the complete scene from above only when something changed (I decide when a [significant] change happend, not BJS) so I can have better performance on the second camera which only shows a small portion of the whole scene. My scene is rather big so that I have some serious performance problems when the complete scene is rendered on every frame. I'm aware that I could use two planes with dynamic textures rendered from the two cameras and set the refreshrate on the renderTargetTexture, but as it is now I have two cameras with different viewports set and would like to keep it this way (don't want to change too much code). I hope my question is clear and there is a way to accomplish this without using dynamic textures.
  22. Hey I have just started on using babylon. I started using it together with your Unity exporter. I made the camera go from perspective to orthographics and I got a runtime error : Uncaught TypeError: Cannot set property 'orthoTop' of undefined In this line this._camera.orthoTop = n, as part of n.prototype.updateOrthographicSize = function() { if (0 !== this._orthoSize) { var e = this.scene.getEngine().getRenderingCanvasClientRect() , t = e.width / e.height , n = this._orthoSize , i = n * t; this._camera.orthoTop = n, this._camera.orthoBottom = -n, this._camera.orthoLeft = -i, this._camera.orthoRight = i } } , manager.js
  23. Hello, I'm creating a game composed by a map (created with Tiled) and, at the bottom, a menu with a list of building. The list of building is draggable horizontaly (to see all buildings). To drag all buildings at the same time I add all the buiding's sprite in a graphics component. I also put a black background with alpha to 0.25. Every component has a fixedOnCamera to true. Here is my BuildingMenu class TypeScript code: public static create(game: Phaser.Game) { let background =, 0); background.beginFill(0x000000, 0.25); background.drawRect(0, game.height - 64, game.width , 64); background.endFill(); background.fixedToCamera = true; let buildings = ["building1", "building1"....]; let bounds = new Phaser.Rectangle(-game.width / 2, game.height - 64, game.width, 64); this.buildingsGroup =, game.height - 64); buildings.forEach((building, index) => { let spriteBuilding = game.add.sprite(index * (64 + 2), 0, building.getName()); spriteBuilding.width = 64; spriteBuilding.height = 64; spriteBuilding.fixedToCamera = true; //this.buildingsGroup.addChild(spriteBuilding); }); this.buildingsGroup.width = game.width; this.buildingsGroup.height = 64; this.buildingsGroup.inputEnabled = true; this.buildingsGroup.input.allowHorizontalDrag = true; this.buildingsGroup.input.allowVerticalDrag = false; this.buildingsGroup.input.enableDrag(false, false, false, 100, bounds); this.buildingsGroup.fixedToCamera = true; } public static update(game: Phaser.Game) { += 1 } My problem is when I uncomment the line "this.buildingsGroup.addChild(spriteBuilding)" item are affected by the camera but can be dragged of course. The background is not affected.... I can't figure out why... Can anybody help?
  24. I'm trying to attach the ray I put in my scene to my active camera so I can move around the camera and have the ray hit whatever my camera is looking at. I've been able to get the ray into my scene, and have it hit something, but haven't been able to figure out how to attach it to my camera so it follows it. My best attempt was trying to create a box, attach it my camera as it's parent and then attach the ray to that box using rayhelper.attachtomesh but my ray is no longer visible when doing this. Any help please.
  25. Hi, I have scene with 2 objects and ArcRotateCamera on it. I choose it as I need to rotate around object and it does it job good. Now I want to create animation that changes camera target to second (fly to it) and than orbit around it. Is it possible with ArcRotateCamera or I should chose another camera as the base? Thx