Search the Community

I'm using the `deviceorientation` event to get phone rotation data. And I'm noticing that at least on my device the rotation data is very "jumpy". That is it can look something like this: 0 -10 0 1 2 4 40 20 Have not had a change to try the Gyroscope API but I imagine it has the same limitation. My question is, does any one know of a technique to smooth of the rotation data. So in the above example, it would be `0, 0, 1, 2, 4, 20`. The use case is that when a user rotates the phone to the left/right, the app would apply a force vector. But with jumpy data like the above, the result isn't a smooth experience.

Hey all! I am both new to Babylon and these forums! I want to make a First Person Camera that moves in a direction based on its rotation (e.i. like a forward/backwards functionality with W/S). Only problem is I don't know how to do this without maybe physics engines enabled or making a bunch of really janky movements. I want something like Unity's Transform.forward. How do I achieve this?

Hi everyone! I used the json and atlas file for using spine in pixi.js But the rotated pieces of image are not converted to correctly. So i wanna rotate some pieces in the programming Thanks.

Hello there! I'm working with this example (asteroids movement): LINK There is a strange behaviour that blows my brain out. It can be better seen on the attached video. All I've done was a small rotation and then just pressed UP cursor key. As you can see with the help of turned on debugger velocity vector rotates during fly until it reaches bottom-right corner of the bounding box. Also it force ship to fly wrong, it can be noticed even without debugger. Expected that velocity vector to be applied directly to where ship's nose is (or more correctly, ship have to move to the opposite side the engines work vector; see the picture). What can be the solution of this problems? Seems velocityFromRotation() function works not as expected. Or there is something been lost. Best regards, Nick Rimer 2019-11-01 12-02-08.mp4

Hello everybody, I am new to Phaser and thought why not start with Phaser 3. My program dynamically changes the rotation of a box and I wanted the collider to rotate as well, but I didn't find how to archive this. var config = { type: Phaser.AUTO, width: 800, height: 600, //window.innerHeight; physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: true } }, scene: { preload: preload, create: create, update: update } }; //... function create() { //... blockAU = blocks.create(200, 200, 'block'); //... } function update() { //... if(rotateLeft) blockAU.angle -= 1; else blockAU.angle += 1; blockAU.refreshBody(); //... } I didn't find examples for this, and the API and Docs where pretty confusing. Maybe I am using the wrong terminology when searching. I really hope you can help me with this

Guys, I need help. How to turn the mesh towards the point given by the vector? What method of rotation is needed here? Rotations is my weakness..

Hello, I am trying to imitate a rotating part (a.k.a. "windmill" please see this youtube video) using the Matter physics engine's constraint. I have tested a body shape made with PhysicsEditor and that of simple image shape (just a thin rectangle). The windmill made with PhysicsEditor keeps on rotating and it does not seem to stop until you give another collision to the body. Here is a codepen to demonstrate. https://codepen.io/BeFiveINFO/pen/EdQgdq Please try pressing space key for a second. Is there any way to control the behaviour of the body shape made with PhysicsEditor? Thank you for your help in advance!

I'm totally stumped here. Why is one mesh spinning like crazy but the other standing still? Playground: https://playground.babylonjs.com/#6FB40P

Hello everybody! Hope everyone is going well in the Babylon community ! My issue is simple : I use the mesh.rotate() function in order to rotate a mesh in the BABYLON.Space.WORLD. The function works great and my mesh rotate exactly how I want. The mesh.rotate() function use quaternion and so the rotation attribute is set to Vector0. But when the rotation is hover I would like to have the euler rotation back! To do so I use the mesh.rotationQuaternion.toEulerAngles() function But if I set the mesh.rotation = mesh.rotationQuaternion.toEulerAngles(); Then the mesh is rotating again on my screen like if the euler angles I get from the quaternion wasn't right. There is a lot of topics in this forum concerning this toEulerAngles function but after hours of reading and testing (even changing ZYX, YXZ orders), nothing is working! Is there an other way to get the euler rotation vector back from the quaternion? Or maybe a simplier way to rotate mesh around a world axis? Thanks for your help!

I'd like to use sprites with 3D look (using light sources which cast shadows), and pre-render them from 3D models to 2D images for sprites. For sprite rotations (think Asteroids ship rotating), I thought I'd pre-render multiple frames for the different rotation angles, and select the frame which matches the rotation angle. I cannot figure out how to best handle this in Phaser Arcade Physics. If I try to use body.angularvelocity which seems to set sprite.rotation, the framework rotates the currently active frame, which messes up the shadow directions. Is there some way to override the body rotation handling so that it would switch frames (and update body dimensions) instead of rotating the single frame? Any other alternatives?

Simple: I need the Rotation Matrix from the default Arcrotate Camera. I read somewhere in the forum, i need to decompose the Camera Matrix, i can' t find it anymore. Subquestion: It is possible to grab the data via mouseevents ? Thanks' Playground: https://www.babylonjs-playground.com/#SQP9E0

When I create a hexagonal prism for SPS, it does not seem to recognize the rotation. I have been rotating the particles en masse after creation, but I gotta believe I am just doing it wrong. https://www.babylonjs-playground.com/#YI6D05#2 The "shapes" have no color. The particles are colored. To save memory, I must have "updatable" set to false. This makes my work-around harder. Advice requested.

Hey everyone I'm back! I have a mesh that rotates around the Y axis whenever I click and drag along the screen: var currRotationY = 0, currPositionX = 0, clicked = false, originalRotation; canvas.addEventListener("pointerdown", function(evt) { currPositionX = evt.clientX; currRotationY = player.mesh.rotation.y; originalRotation = player.axis.rads; clicked = true; }); canvas.addEventListener("pointermove", function(evt) { if (!clicked) return; //player.mesh is my mesh player.mesh.rotation.y = currRotationY + (evt.clientX - currPositionX) / 500.0; }); canvas.addEventListener("pointerup", function(evt) { clicked = false; }); Whenever my mesh completes a 360deg turn, its rotation.y value continues to grow beyond Math.PI*2. I'd like it to be reset to 0 whenever that happens.

I think I may be using rotation incorrectly, but I'm not sure what I'm doing wrong. I'd ask a more specific question, but I truly have no idea how to narrow things down. So either I have a small stupid bug somewhere (could be...) or just a fundamental misunderstanding of something 3D, in which case I hope someone in this forum can point it out. I've got a multiplayer first person shooter where the game client sends its keystrokes and camera rotation to the server. This is used to rotate the player's mesh (which is just a cube with a red face for forward) and then move the player around. The player is not limited to moving along the ground, and can in fact just look up into the sky and press forward and fly around... so I guess they're a little more like space ships that can strafe than true first person shooter characters. Everything looked like it was working perfectly until I started comparing the client predicted positions to the server authoritative positions. Now I don't mean to drag anyone down the rabbit hole of netcode, and I strongly suspect my bug is something very basic relating to rotating a mesh and then trying to move it forward (or left, or right, or backwards). To rotate the camera, I'm just capturing mouse movement and multiplying by a mouseSensitivity input.onmousemove = (e) => { if (input.isPointerLocked) { camera.rotation.y += e.movementX * mouseSensitivity camera.rotation.x += e.movementY * mouseSensitivity } } I'm not sure if that is correct, but it looks and feels like a first person shooter. Every frame the client produces a command that looks like this: { forward: <Boolean> input.frameState.forward, backward: <Boolean> input.frameState.backward, left: <Boolean> input.frameState.left, right: <Boolean> input.frameState.right, rotationX: <Float32> camera.rotation.x, rotationY: <Float32> camera.rotation.y, rotationZ: <Float32> camera.rotation.z, delta: <Float32> deltaTime } This contains the state of the movement-related keys, and how long they've been held down (determinism note: holding 'W' for 0.187 seconds at speed 100 is a deterministic calculation which can be repeated by server and client to get the same result). It also contains the camera rotation, which I'm wondering if this correct..? I'd like to note that I've used this type of command structure in several games and that it is truly deterministic, but that I've never done this in 3D, so perhaps my error is just the rotation. The actual movement logic move(command) { // rotate the mesh to the same rotation as the camera mesh.rotation.x = command.rotationX mesh.rotation.y = command.rotationY mesh.rotation.z = command.rotationZ // unit vector of our movement let unit = BABYLON.Vector3.Zero() if (command.forward) { unit.z += 1 } if (command.backward) { unit.z -= 1 } if (command.left) { unit.x -= 1 } if (command.right) { unit.x += 1 } unit.normalize() // rotating the unit vector to the context of this entity let heading = mesh.getDirection(unit) // full vector, movement and magnitude let velocityCoef = speed * command.delta let velocity = heading.multiplyByFloats(velocityCoef, velocityCoef, velocityCoef) // move mesh.position.x += velocity.x mesh.position.y += velocity.y mesh.position.z += velocity.z let y = ground.getHeightAtCoordinates(mesh.position.x, mesh.position.z) // added a little padding to keep the cube off of the ground if (mesh.position.y < y + 1) { mesh.position.y = y + 1 } } So the mesh gets rotated instantly to the rotation specified in the command. The command's rotation is just the camera's rotation. Is this a mistake..? Is copying the values of the camera's rotation vector TO the player mesh rotation not in fact what I should be doing to get the player to face in the same direction as the camera? After that I do that unit vector stuff which encompasses what I consider to be first person-style movement with strafes: forward, backward, left, and right. The direction the mesh actually moves when all is said and done is calculated by mesh.getDirection, and then multiplied by the velocity. I worry about both the above ideas, because I've been combing this forum looking for babylon first person shooter examples, and they're all different from this and from one another. None of them copy the camera's rotation vector on the player, and none of them use getDirection. I see other people using matrices, local/global thingies, getfrontposition, and other properties of cameras. I feel like I'm missing something. And yet, my game SEEMS to work pretty well. It wasn't even until I started integrating the clientside prediciton layer that I started to notice that there were tiny inconsistencies with the positions of objects. When moving the mouse and rotating the camera, there are no clientside prediction errors. If the client predicts that rotationX is 0.1234, the server always agrees. This is no surprise because the camera rotation is in fact client authoritative. When hitting W A S D or the arrow keys in any combination without rotating the camera, there are no clientside prediction errors. The length of any key press is known. The client produces its own local version of the movement. The server then receives the identical command and moves the player by an identical amount. At some point the client will receive a snapshot of server data that contains the state of the gameworld after having factored in the aforementioned command, at which point the client will know if the movement it predicted a few frames ago lined up with the server authoritative movement. This is the actual hard part of clientside prediction and I'm pleased to say it is working and even supports collisions with the terrain mesh. It isn't even the case that it sometimes has a mild error -- it literally never has an error, and this should be expected given that there are no collisions between players, so there's never any unknown state to the client that could potentially cause it miscalculate a position. However when moving the mouse AND holding any of the movement keys, the predictions are incorrect every frame! Because of the way this engine is put together the position gets reconciled, and it recovers. But what is throwing off the deterministic calculation? A.) rotate a mesh to a specific XYZ, B.) find a forward vector C.) move a specific distance along that vector. I'm clearly not doing A->B->C otherwise it would be deterministic and there would be no error. I tried to recreate the movement code without a network, and got even more confused because setting the xyz of a mesh.rotation and then using mesh.getDirection to attempt to move it forward produced no turning in the BJS playground, the sphere just kept moving in one direction: https://playground.babylonjs.com/#LD0IDK#2. There are two spheres, one remains stationary, the other one is moved 3 steps by 3 commands each of which rotates the mesh before moving it forward. It ends up going straight, which I don't understand given that it is being rotated and that it moves in the direction it is facing (or that was my intention). So perhaps therein lines the issue, though if this playground doesn't work how does my game even do anything at all... Here's a gif of what the camera controls and cube players look like (all of the visible cubes are bots that are sending random commands tho, so never-mind they crazy directions that they're facing).

Hello there. ? I have a sprite which rotates. And i have a healthbar added to that sprite as a child. My problem is: The healthbar does what children are supposed to do! But i don't want that! ? How to keep child sprites from rotating with their parent? I want it to always stay at the same position relative to the parents anchor. I'm not talking about fixing its angle - that can be done by simply setting it to the negative angle of its parent each time it rotates (at least i don't know any other way). I'm talking about its position. Is there a fixedToCamera equivalent for sprites? If not, some math would be cool, too. EDIT: I guess this could work with groups. But is there another way?

Hi, I'm having some trouble with my emitter that is used as spray particles for a fire extinguisher. I've set the emitX and emitY to position relative to the player's front arm and set the emitter.rotation = frontArm.rotation. The problem I'm having is that when the arm rotates the particle's emit location is moved. I've attached some screenshots and code to show what I mean. I'm sure it is something simple that I'm missing but I've searched on the forums for quite a while and can't seem to find a solution. Any help would be appreciated. FireSim.test = { create: function() { this.game.stage.backgroundColor = "#d36a6a"; this.waterSpray = this.game.add.emitter(0, 0);// (x, y, max particles) this.waterSpray.makeParticles('whiteParticle', '', 5000, true, false); this.waterSpray.maxParticleScale = 5; this.waterSpray.minParticleScale = 1; this.waterSpray.flow(1000, 100, 50, -1, false); this.waterSpray.minParticleSpeed.setTo(400); this.waterSpray.maxParticleSpeed.setTo(800); this.waterSpray.setYSpeed(-30, 30); this.waterSpray.gravity = 0; this.frontArm = this.game.add.sprite(150, 100, 'frontArm5'); }, update: function() { if(this.game.physics.arcade.angleToPointer(this.frontArm.world) < 1) //only move the arms towards the mouse angle if it is less than 1. This prevents erratic movement when the mouse pointer is positioned behind the player { this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm.world); } this.waterSpray.emitX = this.frontArm.world.x + 270; this.waterSpray.emitY = this.frontArm.world.y + 160; this.waterSpray.rotation = this.frontArm.rotation; if (this.game.input.activePointer.isDown) { this.waterSpray.on = true; } else { this.waterSpray.on = false; } }, };

Hello evryone Sorry in advance for my bad english; I wanna ask somthing about .ArcRotateCamera (); I want to make camera with locked position behind the player when the player moving but if player stand on the place he can moving around with the camera and when he again start moving the camera smoothly rotating to the locked position. I wondered if I will make somehow the camera will checking position.z of the player then camera will be calculate position behind the player. Here is my player how move in game for better understending: http://www.babylonjs-playground.com/#TGA1QA By the way I only want some tips or show me a way how I can make this work out I want to fully understand how javascript and babylon.js works. Thank you.

I know I can't stop gimbal lock but I'd like to avoid the circumstances where it occurs in my application i.e. when a lookAt() call returns a vector close to the zenith. Basically I'd like to clamp the rotational pitch from 0 to 85 degrees, rather than allowing it to ever reach 90 degrees. I see the lookAt method has an optional parameter for pitchCor (pitch correction) but that doesn't seem to do what I want. What I'm thinking at the moment is I need to test the lookAt result to see of it's >= 85 degrees pitch and if so then clamp the pitch back to 85 degrees (without altering yaw) before applying the rotation to my mesh, but I'm a bit lost how to achieve that or if there's a better way. EDIT Here's a PG http://www.babylonjs-playground.com/#NM5LIX Basically as the lookAt() approaches the zenith I want to clamp the pitch input (even though it's not accurate this way) in order to eliminate the unnaturally fast spin. I hope this makes sense.

Hello guys, I use the UniversalCamera in my project. On my mobile device it works really well and does what I want it to do, except for the left and right rotation. When I wipe up and down, the camera moves much faster than left and right. I have already tried the camera. angularSensibility, but it has no visible effect. for example, if I use the Gyro camera and press on the screen, I can control the camera very well and would like to have such a behaviour with the UniversalCamera. Did I miss something or is there a value I need to adjust? I would like to double the speed of mobile devices (the device differentiation is already taken over by my framework). Then it has a smooth user behavior. I look forward to your answers. :-)

I have a "Gun" object and a "Bullet" object, and I'm trying to adjust the offset at which the bullet should start from the gun, but I'm getting an unexpected margin which I can't find where it's getting from. This extra margin/distance happens when I fire the gun to the right or down, but it converts into a negative margin/distance when I shoot to the left or up. The second problem is that the text "pium pium" get's horizontally/vertically out of it's body depending of the angle. Here is a demo of the problem: http://plnkr.co/edit/dOLK0j1qOEphv2nLLJKE?p=preview

Hi, there. How to make a FreeCamera rotate only by Alpha rotation? Only longitudinal? I want to turn off a Beta rotation (up and down rotation of camera). Thanks.

Hi, I am trying to rotate a mesh with a custom pivot, using setPivotMatrix function. In the sample below, the pivot (red box) "seems" to be in the right position, but the rotation done is not as expected (green and grey box should be superposed on the corner). I dont understand the setPivotMatrix http://www.babylonjs-playground.com/#4FNAXM#2 Why the pivot point (red box) is not inside the green box in this sample ? I just would like something like : X X [X] X X X Where [x] is the superposed part of the 2 meshes. Thanks

Hey guys, I got a question about the WebVrFreeCamera. How can I animate the rotation of a WebVrFreeCam? I would like to click on a button to direct the users gaze to something important. Hence the animation. THANK YOU FOR ANY TIP there is a code snippet: https://playground.babylonjs.com/#UXXVST

Does anyone know how to rotate a sprite from it's current rotation? I'm having a Math brain fart. Here is my Sandbox example of the issue: http://phaser.io/sandbox/HhWNhhmR/play The sprite rotates around it's center when you drag it, but it always snaps to the mouse. How can we rotate it from where it currently is? I would love to have it respond in a similar way that PropellerJS works. As a bonus, it would be awesome to add the inertia and stepped angle constraints. Thanks!

I have a sprite and a body that both rotate towards the pointer. On collision, though, the sprite sometimes gets turned away from the body. The body continues to point towards the mouse but the sprite does not (see image, definitely not the worst that it can be). I haven't found a way to fix this, anyone know how?