Search the Community

Hello! I am new to programming in Babylon.js, and have for the past few hours been trying to lowering the rotation speed of the camera. I've tried setting panningSensibility, angularSensibility, maxCameraSpeed and cameraAcceleration (the last two don't seem to apply to ArcRotateCamera), but to no avail. Is there something I am missing?

Hello people, I have the next problem, I'm making a little game with phaser 3, and I getting a strange behavior with the camera. I have a tiled map, 640x640, and a little sprite of 16px. So I'm trying that the camera focus the player a little closer and follow the player, but.... 1) When I try to zoom the camera to see the player, (passing a integer 2, 3 o 4 to the setZoom method) the camera distances itself more from the sprite, instead of get closer . With setZoom (1): With setZoom (2): 2) If I try to put a slower value, as 0.1, 0.4, the zoom get the camera closer it works, but if I use the startFollow method that makes the camera follow the player, make the screen black (I think it's because focus somewhere else out of the map, but this is an expeted behavior: API Documentation ), if I don't use the startFollow, and update ScrollX, and ScrollY, it do it alright. (I get the effect that i want) but everything is working diferent from the expected behavior: the documentation says that higher values make the camera zoom in, no zoom out, also in this way, I have another problem, a new cam that I use has minimap, do not work if I use a decimal value for the zoom ON THE MAIN camera. I have this config for phaser: var config = { type: Phaser.AUTO, parent: 'phaser-example', width: 640, height: 640, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 0 } } }, scene: { preload: preload, create: create, update: update } }; At the end of the create method I have : this.cameras.main.setZoom(2); //this.cameras.main.setSize(1000); I try to change the camera size, because if I use a higher zoom, the "square" or size of the camera became smaller. **** I writting this from another machine, but I will update with Screenshoot and more code

Hi, Does Babylon have any common Documentations/Widget_UI/Settings for switching between cameras and control panel (debug/fullscreen)? Is there any simple playground showcase how to include those widgerts like on this picture? Or should/must we hack (code) how it is made greetings

Can anybody explain what is difference between WebVRFreeCamera vs VRDeviceOrientationFreeCamera Why should we use WebVRFreeCamera? Greetings Ian

Hey guys, I thought I'd post this for anyone to use. I wrote this function for Away3D, and I just ported it to TypeScript to see if it would work with Babylon. Basically, you run the moveCamera function in your render loop. It takes a FreeCamera and a target mesh and follows the object around using easing. Mostly like the ArcRotate camera but it doesn't have a set distance. It sets a "goal" for (x,y,z) and eases to it. So you can use this to follow a character around or a ball, etc. Anyway, here's the code in TS. If this is useful to anyone I can take the time to create a fork and submit a PR? module cameras {export class CameraFollow {public radius:number = 12;public CAMERA_SPEED = 0.05;public MAX_CAMERA_SPEED:number = 20;public orbit:number = 0;public height:number=3;constructor() {}private getRadians (degrees):number {return degrees * Math.PI / 180;}public moveCamera(camera:BABYLON.FreeCamera, cameraTarget:BABYLON.AbstractMesh) {if (!cameraTarget)return;if (!camera)return;var radians:number = this.getRadians(cameraTarget.rotation.y - this.orbit);var targetX:number = cameraTarget.position.x + Math.sin(radians) * this.radius;var targetZ:number = cameraTarget.position.z + Math.cos(radians) * this.radius;var dx:number = targetX - camera.position.x;var dy:number = (cameraTarget.position.y + this.height) - camera.position.y;var dz:number = (targetZ) - camera.position.z;var vx:number = dx * this.CAMERA_SPEED * 2;//this is set to .05var vy:number = dy * this.CAMERA_SPEED;var vz:number = dz * this.CAMERA_SPEED * 2;if (vx > this.MAX_CAMERA_SPEED || vx < -this.MAX_CAMERA_SPEED) {vx = vx < 1 ? -this.MAX_CAMERA_SPEED : this.MAX_CAMERA_SPEED; //max speed is 40}if (vy > this.MAX_CAMERA_SPEED || vy < -this.MAX_CAMERA_SPEED) {vy = vy < 1 ? -this.MAX_CAMERA_SPEED : this.MAX_CAMERA_SPEED;}if (vz > this.MAX_CAMERA_SPEED || vz < -this.MAX_CAMERA_SPEED) {vz = vz < 1 ? -this.MAX_CAMERA_SPEED : this.MAX_CAMERA_SPEED;}camera.position = new BABYLON.Vector3(camera.position.x + vx, camera.position.y + vy, camera.position.z + vz);camera.setTarget(cameraTarget.position);}}}

Hello everyone, I'm currently building an object viewer with BJS that utilizes a single ArcRotateCamera. I had to create manual control buttons for the camera, because apparently it can't be expected of the average web user to know how the simple concept of drag and drop works. So, I built 6 button to rotate the camera up, down, left and right and zoom in and out. The beta axis needed some special attention, because the application's state machine can have a state where upperBetaLimit and lowerBetaLimit are null, so the user can rotate past the top / bottom. This works fine with the mouse, but when the button is used and the last rotation modification moves the beta value past zero/360 degrees, the camera's z-axis (which should be fixed and not even modifiable for ArcRotateCamera) flips upside down for a split second before some sort of internal correction seems to turn it back around to normal. But that moment is very irritating and I doubt that my client will approve the app with such an ugly display bug. Any idea what might be causing it and how to get rid of it? I already tried to prevent the beta value from ever reaching exactly zero, because I expected that this was the problem, but as it turned out, that was not it. Here is the code for the up button: $('#buttonRotateUp').on('mousedown touchstart', function (e) { e.preventDefault(); if (window.camBetaRotationInterval) { clearInterval(window.camBetaRotationInterval); } $('#buttonRotateDown').removeClass('limit-reached'); if (!$(this).hasClass('pressed') && !$(this).hasClass('limit-reached')) { $(this).addClass('pressed'); var rotateStep = 0.15; // checking if the limits are not null if ((scene.activeCamera.lowerBetaLimit || scene.activeCamera.lowerBetaLimit === 0) && scene.activeCamera.upperBetaLimit && (scene.activeCamera.beta + rotateStep) > scene.activeCamera.upperBetaLimit) { $('#buttonRotateUp').addClass('limit-reached'); scene.activeCamera.beta = scene.activeCamera.upperBetaLimit; } else { if ((scene.activeCamera.beta + rotateStep) == 0.0) { scene.activeCamera.beta += (rotateStep + 0.1); } else { scene.activeCamera.beta += rotateStep; } } window.camBetaRotationInterval = setInterval(function () { var $btn = $('#buttonRotateUp'); var rotateStep = 0.015; if ($btn.hasClass('limit-reached') || ((scene.activeCamera.lowerBetaLimit || scene.activeCamera.lowerBetaLimit === 0) && scene.activeCamera.upperBetaLimit && (scene.activeCamera.beta + rotateStep) > scene.activeCamera.upperBetaLimit)) { $btn.addClass('limit-reached'); scene.activeCamera.beta = scene.activeCamera.upperBetaLimit; } else { if ((scene.activeCamera.beta + rotateStep) == 0.0) { scene.activeCamera.beta += (rotateStep + 0.01); } else { scene.activeCamera.beta += rotateStep; } } }, 25); } }).on('mouseup touchend', function (e) { e.preventDefault(); $(this).removeClass('pressed'); if (window.camBetaRotationInterval) { clearInterval(window.camBetaRotationInterval); } });

Hi I created the topic first in questions sections, but it seems to look like a bug now. so here is the original topic:

Hello there, I have been around and around trying to come up with a camera to use. After looking at the work around's to make a camera work for my purpose I then decide another camera would be better, but then as I am looking at the work around's for this other camera, I either come back to the first or on to a third. So I need to take a break cause I am getting dizzy. I thought maybe I would make a post where I just share some of my camera dreams, please feel free to share any dreams of your own. Or if you have a recommendation, you are welcome to share. This Playground is representetive of the environment that I am using: http://www.babylonjs-playground.com/#WFLKH#25 Snaps: Like the click of the mouse wheel, if an arc rotate camera had rotational snaps, when you swipe on a touch device the camera would only go to the next snap or if you swipe more aggressively the camera would settle 2 or 3 snaps away, maybe a phone vibrates when it settles on the snap. Or maybe you could enter an array of vector3's that were the only possible camera targets, with a bezier between Arc Rotate origin and target: An interesting addition to the arc rotate camera might be a camera origin at the point where the camera rotates around and a target where you want the camera to look which could be on the other side of the origin. Free Camera Up and Down with arrow keys and touch swipe: I am sure this is pretty simple with the input manager I just don't yet understand the API and too get caught up with the arc rotate camera. Rather than move forward and backward with up down arrow and swipe i want to move up and down. Does the new setpivotpoint work for cameras cause that would help me lean towards the freecam.

Hello everyone, I would like to achieve a similar demo in babylonjs effect. Click on the Digit Transform camera view. How can I add text in the babylonjs scenes tag and add a click for it after the camera event. demo URL:https://sketchfab.com/models/8d212cd674a54d18ba624c9ed8be56f7

Hi, I'm having a look at the excellent bGUI extension code. I'm wondering how Temechon did to display a vertical orthographic panel in front of the main scene. I'm just discoverying that a BJS scene has an array of active cameras : https://github.com/Temechon/bGUI/blob/master/src/GUISystem.js#L70 and meanwhile a single active camera. So I don't really get how two different cameras can be used in the same time ... I just don't get the global mechanism to tell the engine to render this, this and this with a camera and that, that and that with another one in the same scene, as I can't find in the bGUI code that there would different scenes to be rendered. Seems mysterious to me ...