# Search the Community

Showing results for tags 'rotation'.

• ### Search By Tags

Type tags separated by commas.

### Forums

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

• 0 Replies

• 0 Views

### Interests

Found 164 results

1. ## Calculating normal of 2 vectors 180 degrees apart

Folks I am not sure whether this is a mathematical limitation or a babylon/javscript limitation (or a touslecoq limitation!). As part of the app I am developing I am comparing the normals of faces on 2 meshes in order to calculate the angle and axis of rotation required those faces. This works fine in most cases - however I found in certain cases that the rotation was seemingly random. Some investigation using the console and I determined that this occurs when the faces being compared are exactly 180 degrees apart. I have created a playground to recreate/illustrate the issue. This basically creates a mesh and rotates randomly in 3 dimensions; creates a second mesh with exactly the same rotation. calls a function to calculate the normals of a given face (0-12) for each mesh and calculate the angle between those normals and the axis of rotation (ie a vector that is 90 degrees to those normals). I call the function twice: comparing Mesh 1, Face 0 with Mesh 2, Face 2 - these faces are on opposite sides of the meshes. The angle (180 degrees) is correctly determined but the axis is calculated as (0,0,0). This I believe is the cause of the strange behaviour I have seen in my app. comparing Mesh 1, Face 0 with Mesh 2, Face 4 - these faces are on 2 perpendicular sides of the meshes and the angle (90 degrees) and axis are correctly determined See the console log for the outputs which include the vertices, normals of each selected face and the calculated angle and axis. Look out for axis = (0,0,0) for the second test. Re-run several times and it gets it wrong consistently. So ... million dollar (since pound is worthless now) question ... is there a workaround to calculate the normal to 2 vectors that are 180 degrees apart? http://www.babylonjs-playground.com/#VFKAZ#12 Cheers Rich
2. ## Homing missile... again

Hi this topic is related to this one but it's not necessary to read it. So ThÃ©o SabattiÃ© and I are trying to make a game in which the player controlls an airplane flying around a planet and is followed by an homing missile. To make the missile chase the player, we use plane :The plane is attached to the missile and the plane normal is the right vector of the missile. If the player is on the right side of the plane the missile rotate to the right (but stays tangent to the sphere) and if the player is on the left side it rotate to the left. This works at the begening but eventually it fails. And we don't get why. Does anyone know why ? Thanks Here is the playground version : http://www.babylonjs-playground.com/#1XZ4XZ#25
3. ## [Rotation, Quaternion] mesh tangent to a sphere

Hi everyone ! I am making a game with a friend (mazelpomme): The player controls an airplane. It rotates around a sphere and missiles try to touch it, so missiles align themself with the player. To align missiles on player, we worked with Cross product, Dot product with the down missile's vector and the vector "missile to sphere's center" (@see uploaded images) currently, our code is: missile.lookAt(Player.getInstance().getAbsolutePosition()); var missiletoCenter : BABYLON.Vector3 = missile.getAbsolutePosition().negate(); var missileDown : BABYLON.Vector3 = missile.down.getAbsolutePosition().subtract(missile.getAbsolutePosition()); var angle : number = Math.acos(BABYLON.Vector3.Dot(missiletoCenter.normalize(), missileDown.normalize())); var axis : BABYLON.Vector3 = BABYLON.Vector3.Cross(missiletoCenter, missileDown); missile.rotate(axis, angle); sphere center position is x0, y0, z0 We didn't undestand why that didn't work because we reproduced the same in unity and that worked. (missile.down is a missile's child placed on down missile's axis) Has someone an idea? Can you help us? Thanks ThÃ©o & mazelpomme
4. ## lookAt doesn't change rotation param

Edit : problem solved, look below ______ lookAt works well on the view. But the parameter rotation doesn't change staying at 0,0,0. And I need it after to calculate the vector forward in local space of a mesh to moveWithCollision : var forwards = new BABYLON.Vector3(parseFloat(Math.sin(character.rotation.y)) / speedCharacter, gravity, parseFloat(Math.cos(character.rotation.y)) / speedCharacter); forwards.negate(); character.moveWithCollisions(forwards); In the playground, I don't know how to display text to debug and Jsfiddle doesn't work so I paste my code here : <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #renderCanvas { width: 100%; height: 95%; min-height: 95%; } </style> </head> <body> <div id="info"> aaa </div> <canvas id="renderCanvas"></canvas> <script src="http://cdn.babylonjs.com/2-4/babylon.js"></script> <script> var info = document.getElementById('info'); var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene); var cube = BABYLON.Mesh.CreateBox("Box", 1, scene); var cube2 = BABYLON.Mesh.CreateBox("Box2", 1, scene); cube.position.x = -5; var material = new BABYLON.StandardMaterial("default", scene); material.emissiveColor = new BABYLON.Color3(0.3, 0.3, 0.5); cube.material = material; var material2 = new BABYLON.StandardMaterial("default2", scene); material2.emissiveColor = new BABYLON.Color3(0.5, 0.3, 0.3); cube2.material = material2; scene.beforeRender = function() { }; // Render loop var renderLoop = function () { cube.lookAt(cube2.position); cube2.position.z += 0.01; info.innerHTML = cube.rotation; // !!! display 0,0,0 everytime !!! scene.render(); }; // Launch render loop engine.runRenderLoop(renderLoop); </script> </body> </html> Thank you
5. ## No more rotate on infiniteDistance

I used to use skybox.rotate(BABYLON.Axis.X, 1.0, BABYLON.Space.PIVOT) to rotate skybox, but now in 2.5-alpha it no longer works, BABYLON.Space is missing PIVOT and rotation doesn't work on mesh that is set infiniteDistance. I don't want to resort to moving the skybox with the camera via code, is there a new way to approach this? Thanks!
6. ## How To Align Torus With Tube?

Hi All I am new to BabylonJS and have been playing with the library for a few days now and am absolutely loving it! A big thumbs up to the team/community that have developed this amazing library. My 3D geometry is rusty, hence im having problems resolving what many will see as a simple 3D transformation. My scene has a simple tube created from a path that was created using a bezier curve. Along the path trajectory I want to render a series of torus shapes, each torus needs to be aligned with the tube axis. I have created a simple program that creates; the bezier curve path, the tube and adds the torus shapes along the trajectory. Without attempting to rotate the torus shapes I get the following result (which is expected): (see attachement 1) Playground Code: http://www.babylonjs-playground.com/#1PSZDF#23 To fix this problem (i.e. rotate the torus to align with the trajectory of the tube) I have an idea but do not know how to code this using the Babylon JS API - here is my idea for aligning the torus to the tube: a ) the bezier path trajectory has a series of vertices that can be used for defining a vector/axis and position for the Torus to be positioned. b ) the tube mesh (end region) has a series of vertices that can be used to define a plane for aligning the Torus with the Tube. (see attachement 2) Use the above vertices to define a plane / axis for orientaton - e.g. if adding the torus at start of the tube mesh then you could: 1 ) create vector for defining axis of trajectory (i.e. use bezier path points (1) and (2) for defining the vector) 2 ) create a plane for aligning the torus (i.e. use bezier path point (1) and end tube mesh points (a) and (b) for defining the plane) i.e. (see attachement 3) Using the above it should now be possible to orientate the Torus to the specified plane. The only problem is: a ) I dont know how to reference the end tube mesh points b ) I dont know which API calls I should use to orientate the torus to the specified plane/vector c ) Im guessing there is probably an easier method for solving my problem If anyone can help me out with this challenge I would appreciate it (possibly update the playground code to illustrate what needs to be done?). Thanks in advance Rolento
7. ## Parent object rotation problem

Hello! I have a problem with parent mesh rotation. Scene has two objects which will be rotation around center of bottom object. If bottom object placed on scene center then objects rotation correctly. But if replace bottom object then stranges begin... I create parrent mesh for object and try to rotate it. http://www.babylonjs-playground.com/#1KU02Z#0 Please tell me where I wrong?
8. ## Rotate a mesh about a given axis

What is the way to rotate a mesh about a given axis? For example I have a triangle whose vertices are (0,0,0), (1,0,0), (0,0,-1) and I want to rotate it about the axis z = -0,5, x = 0 . How can I achieve that?
9. ## Rotate body position with sprite angle

Hi everyone, I have an animated sprite of a meteorite with it's tail. I need that the collisions are only for the rock and to be able to rotate the sprite with the movement direction. If I setup the body size like this: this.anchor.set(.55, .55); this.body.setSize(110, 110, 400, 350); The graphic and body collision is fine if the angle of rotation is 0. But I need to rotate the sprite around the anchor point and then the body is not on the desired position of the sprite. How can I fix this?
10. ## constraints on mesh rotation

is there a simple way to limit the amount of rotation of a mesh? I have a throttle in my project and I have it setup so that I can click and drag it to rotate the lever on the x axis(Thanks to Wingnut and others in this forum). I want to limit the amount that it can be rotated no matter how much the drag, but I am getting odd results. Is there a way that I can use a clamp to lock the rotation into a certain angle? PS... to move the throttle, you click and drag from the cylinder objects on the left or right http://www.babylonjs-playground.com/#2DHIAE#0 Thanks in advance
11. ## P2 Space Shooter Dogfight AI Rotation

I'm trying to make a 2d space game involving a sort of space dogfight between the player and some ai bots. I need help with the enemy ship automatically rotating towards the player, but not being exactly pointed towards the ship 24/7. I want the enemy ship to have some "lag" in its response to the player's movement so it's more realistic. Right now I have a model which is not realistic and would probably be too hard for the player to win: update: function(){ //blah blah var tempAngle = Math.atan2(fightSprites.player.y-fightSprites.enemy[i].y, fightSprites.player.x - fightSprites.enemy[i].x); //gets angle between player and enemy fightSprites.enemy[i].body.rotation = tempAngle + (3.141/2); //too precise }
12. ## How to rotate mesh A slowly to match orientation of mesh B

I may be doing this wrong, so tell me if you have a better idea for a solution to my problem. I am creating a toy hockey game and my toys keep falling over smashing into each other and the puck. My theory was to use a upright null player (positioned under the ice and therefore invisible to the viewer) as the correct orientation. I would check the orientation of the real player, and if he was on his side I would stop his x,y,z velocity and SLOWLY rotate him to match the null player orientation. Once his position is upright (like upon mesh creation) he will resume his chasing of the puck. Make sense? Or does my solution sound goofy? In this playground, how would you make body2 rotate slowly to match the rotational value of body1? http://www.babylonjs-playground.com/#3HNIJ#7 Thanks for any tips! Having fun with this.
13. ## Mesh not rotating

Hey everyone, I'm currently facing the problem, that whenever I try to rotate a Mesh using the .rotation property, it won't rotate at all. It only works via the rotate() method. Example: m.rotate(BABYLON.Axis.X, Math.PI/4, BABYLON.Space.WORLD); //works m.rotation.x = Math.PI/4; //won't work m.rotation = new BABYLON.Vector3(Math.PI/4, 0, 0); //won't work The code gets executed from an event handler. Changing scale and position works no problem btw. I also checked several .babylon models, which all had the same problem. I feel like I'm missing something big, since this is such a basic feature. Any Help is much appreciated!

15. ## Determine cube face facing camera after rotation

I am trying to determine the face of a cube facing toward the user after a random number of quarter rotations of a cube (I rotate the cube, not the camera that is always along the z axis). I assigned each face of the cube to a submesh and tried to check which one had a normal z value equals to -1 but the normals do not seem to be affected by the rotation (I always have the same face with a normal vector equals to (0, 0, -1) at its vertices whatever the rotation I apply and this is the face facing the user before the rotation). So is there a simple way to check the orientation of each face of a cube after a rotation to determine which one is perpendicular to the z axis and facing the user?
16. ## How to set absolute values for local rotation?

I know how to get world rotation from the rotation quaternion using the eulerAngles function. I know how to set the world rotation using the RotationYawPitchRoll function. I also want to have the option to read and set local rotation but I have no idea how to do this using the rotation quaternion. I've checked the docs and searched the forums but I can't find an example. Does anyone know if its possible to read and set absolute local rotation?
17. ## Problem with hue color shift

I am working on a project within PIXI that requires me to shift the hue of a saturated rainbow gradient in a loop so it looks like its moving. I figured this would be cut and dry, since changing the hue of said image in Photoshop make it appear as if its moving. When starting out and getting the filter in place and animating, I was perplexed by the results. The colors looked nothing like I expected nor could have predicted. You can see a little demo of what I'm talking about and seeing on codepen here. I started digging to see what could be the problem, trying different image formats and color depths to no avail. I gave a shot at another canvas solution, GLFX, and can get the proper results I expected, as also seen on codepen here. My question to you guys is whats going on here? I am suspecting either an error in PIXI or my understanding of how hue rotation should work. I tried a few different PIXI revisions and didn't spot a difference. I dug a little further and came across an article explaining the difference between HSL and CSS hue rotations and its inaccuracies here. Though, that doesn't help me fix the issue with PIXI. Anyway to fix this on my end while staying within PIXI? Thank you.
18. ## Lerping quaternions the long way

Hi there, by default it seems the ANIMATIONTYPE_QUATERNION slerps between 2 quaternions the short way (270 degrees turns into -90 for instance). If I compute the angle between the 2 quaterinon and determine that it's more than 180, how would I go about slerping it the long way? I tried looking at the code but variable names such as num1 num2 num3 num4 num5 num6 didn't really help Any help appreciated! Cheers, Quaternion.Slerp = function (left, right, amount) { var num2; var num3; var num = amount; var num4 = (((left.x * right.x) + (left.y * right.y)) + (left.z * right.z)) + (left.w * right.w); var flag = false; if (num4 < 0) { flag = true; num4 = -num4; } if (num4 > 0.999999) { num3 = 1 - num; num2 = flag ? -num : num; } else { var num5 = Math.acos(num4); var num6 = (1.0 / Math.sin(num5)); num3 = (Math.sin((1.0 - num) * num5)) * num6; num2 = flag ? ((-Math.sin(num * num5)) * num6) : ((Math.sin(num * num5)) * num6); } return new Quaternion((num3 * left.x) + (num2 * right.x), (num3 * left.y) + (num2 * right.y), (num3 * left.z) + (num2 * right.z), (num3 * left.w) + (num2 * right.w)); };
19. ## Rotation vector always zero in Babylon 2.4

Does anyone know how to get the rotation of an object in Babylon 2.4? mesh.rotation is always zero. I can't set absolute rotation either.
20. ## How to make sprite move in the direction it's facing?

I'm making a game with Asteroid like controls, but I'm in doubt about how to move the sprite in the direction it is facing. What's the easiest way to do this?
21. ## get corners of sprite after rotation

Hello everyone, I have 2 questions and I think they both deal with math. 1. How do i get the x,y, x+ width and y+ height of a sprite after setting a rotation (corners of sprite) image 1 (white background image) 2. how do i make a sprite look at the position of the mouse ( rotate to where the mouse is) I tried various version and this seems to give me the closes one var angle = Math.atan2(mouseX - (boxIMG.position.x), -(mouseY - boxIMG.position.y)); then set the rotation to that boxIMG.rotation = angle; but is not working correctly (black background image)