Search the Community

Showing results for tags 'rotate'.

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

  1. I have an ArcCamera with a root object as it's target. I'm going for a 3rd person or "over the shoulder camera". I want the root to rotate on the y axis when the ArcCamera moves on the alpha axis. I'm currently doing something like: It seems like the alpha is at a lower magnitude than what the rotation vector expects. I can rotate the camera like 3 times around the root before it rotates completely
  2. This might be due to a lack of general understanding - however I would like to know if there is a way (within bablyonjs) to convert a rotation (e.g. rotation.x = a, rotation.y = b, rotation.z = c) to a quaternion (axis of rotation, and an angle for rotation around that axis; e.g. x,y,z,w). According to the babylonjs docs; they seem to be exclusive of each other; e.g. if you set the AbstractMesh.rotate property (quaternion) then the .rotation property is automatically set to the Zero vector & vice versa. Basic rotation around each of the three axes (e.g. .rotation) is easier for most people (e.g. users of my code) to understand (compared to quaternions) but some other software that I'm trying to integrate with works better with quaternions. Rotation matrix seems to have the same problem (e.g. setting the .rotation property doesn't affect it). I converted some C++ code from cocos2dx into JS to convert a rotation matrix to a quaternion: However this also doesn't give me a the desired result (because BJS is returning an identity matrix I think). Any Thoughts?
  3. Is there any way to rotate sprite (concretely coin) along z-axis? It is 3d efect but maybe achievable in canvas and phaser by setting scale or other properties. Ultimate efect I want to achieve can be done by such spritesheet:
  4. Hi guys, i've bring this example with Pixijs and i've done a test. I put the canvas inside a div (#content), this div has transform: perspective(900px) and rotate(20deg). The hit area is not ok, 'cause has the old coordinates without calculate perspective. (see attachment) So, how can i get the new coords to pass to hitarea ? Thanks
  5. Hi, i have just started to study three.js and i am having some trouble to write a function that takes as arguments an object position (Vector3) and a time in milliseconds, and gradually rotate the camera to face it in that time. Substantially a lerp version of the builtin lookAt method. First i've tried using tweenjs to get smooth rotate transition. For the start and end parameters i've created a dummy object and set its position, rotation and quaternion the same as the camera, then i have use the lookAt function on it to face towards the object and i've stored its quaternion in a new variable "targetQuaternion". Then i have used this variable as the target parameter in the TWEEN.Tween method to update camera.quaternion. I've tried before with quaternions to avoid gymbal lock and then with rotation, but none works fine. function rotateCameraToObject(object3D, time) { var cameraPosition = camera.position.clone(); // camera original position var cameraRotation = camera.rotation.clone(); // camera original rotation var cameraQuaternion = camera.quaternion.clone(); // camera original quaternion var dummyObject = new THREE.Object3D(); // dummy object // set dummyObject's position, rotation and quaternion the same as the camera dummyObject.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z); dummyObject.rotation.set(cameraRotation.x, cameraRotation.y, cameraRotation.z); dummyObject.quaternion.set(cameraQuaternion.x, cameraQuaternion.y, cameraQuaternion.z); // lookAt object3D dummyObject.lookAt(object3D); // store its quaternion in a variable var targetQuaternion = dummyObject.quaternion.clone(); // tween start object var tweenStart = { x: cameraQuaternion.x, y: cameraQuaternion.y, z: cameraQuaternion.z, w: cameraQuaternion.w }; //tween target object var tweenTarget = { x: targetQuaternion.x, y: targetQuaternion.y, z: targetQuaternion.z, w: targetQuaternion.w }; // tween stuff var tween = new TWEEN.Tween(tweenStart).to(tweenTarget, time); tween.onUpdate(function() { camera.quaternion.x = tweenStart.x; camera.quaternion.y = tweenStart.y; camera.quaternion.z = tweenStart.z; camera.quaternion.w = tweenStart.w; }); tween.start();}So this does not work. I've also tried another approach, computing the angle between camera vector and object vector and use that angle as target rotation: function rotateCameraToObject(object3D, time) { // camera original position var cameraPosition = camera.position.clone(); // object3D position var objectPosition = object3D.position.clone(); // direction vector from camera towards object3D var direction = objectPosition.sub(cameraPosition); // compute Euler angle var angle = new THREE.Euler(); angle.setFromVector3(direction); /* * tween stuff */ var start = { x: camera.rotation.clone().x, y: camera.rotation.clone().y, z: camera.rotation.clone().z, } var end = { x: angle._x, y: angle._y, z: angle._z, } var tween = new TWEEN.Tween(start).to(end, time); tween.onUpdate(function() { camera.rotation.y = start.x; camera.rotation.y = start.y; camera.rotation.y = start.z; }); tween.start(); }This doesn't work neither, eventually camera rotate towards the object but the rotation is not right. Any help? What is the correct way to have a lerp rotate function for the camera? Thanks in advance!
  6. I have searched these forums high and low. And i see alot of people ask about rotating a mesh around a set pivot point. They seem to have success, but i don't. I think the pivots were messed in the file i got, but regardless, in Babylon i want to set them. When i set: BABYLON.Matrix.TranslationToRef(middle.x, middle.y, middle.z, currentMesh.getPivotMatrix());It moves the mesh on me. I haven't even rotated it yet, and the mesh changes its position. If i move the mesh back to its original position after this, the pivot is not correct. Heres my playground attempt: Could someone please tell me what i am doing wrong (I am really bad with Matrix Everything ) Thanks,
  7. Might be a bug or it could my expectations (again). However the problem could be at the root of people having difficulties placing pivots. If you rotate a parent them translate its child using LOCAL axes the child moves and positions as you would expect. However if you rotate a parent then translate its child using WORLD or use position the child moves again in the direction of LOCAL axes but distances depend on the rotation of the parent. The PG shows the effect. The cylinders mark the positions of the child mesh (the pilot) as it and the parent (sphere) move. The red cylinder marks the expected final position following the final move of -2 in the direction of the world x axis. The pilot meshes show the actual positions. Commenting out the pilot and sphere moves and uncommenting them in turn will show the sequence.
  8. Hello guys, I am using the sprite for a shot from a gun effect. How I can rotate Y axis of a sprite? I need somthing like on screenshot. My sprite: It screen I did in the photoshop to give an opportunity to understand what I need
  9. Hi, To describe my questions I would like to offer this pics What I try to do (simplified): steering a cube indirect with html sliders (as per touch), whereby I have to interpolate the linear scale for left <-> right and up <-> down into a babylon 3D rotation solution. - The sliders are "fixed" .. If I reaches the 360 the box has turn around 360 (1 complete rotation) - If both sliders are moved in same time I want the box to spin in z as well .. if right und up the box proceed in z my questions are: 1) How to use Babylon.Tools.ToRadians correct? I not are able to compute from degree to rad If doing just var angel = Babylon.Tools.ToRadians(710); or mesh.rotation.y = Babylon.Tools.ToRadians(710); this has no effect on my stage. 2) What is best data stucture to solve? Should the normal quaternions structure do this job for this behavior? 3) How to got a fast smooth rotation? The can use the slider per touch and as per click Doing so the cube should rotate in place according to the sliders speed but needs to be able to "move" to the final rotation position if the user clicked on its own .. there should be no "the cube jumps from 0 to 170 degree" (I was thinking about the actionmanager .. ?) As tried with this mesh.rotate(new BABYLON.Vector3(0, 1, 0), angle_inDegree); I only got the new added rotation angle not the interpolated delta between old and new rotation position. I would be thankful for some solutions and answers. With best regards, Stefan
  10. The main reason for the playground is to produce an example for the guide on BJS that I am writing to show how translate, rotate, parent and setPivot can be used. After various struggles due to mistakes and lack of knowledge I have come up with this where you steer(?) the car (which has a set forward speed) with keys A and D Issues are : The response to the keys only happens if after clicking on run the canvas is clicked on immediately afterwards ( and sometimes you have to do this again before it works) While a key is pressed down it interferes with the rendering (too much going on?) If you think too much is going on then have a look back at earlier versions #10 for example. It would be nice to have solutions to these problems but if not then as I can show the parts of the code I wanted to without the key control I will probably just go for a predetermined path for the car to follow.
  11. 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!
  12. I'd like to manually rotate my ArcRotateCamera around the target by code, taking into account the radius of the camera. It should imitate how it works with user control when camera.attachControl(canvas, true). e.g. something like camera.setRotation(Math.PI, 0, 0) - which doesn't exist. How do I do that?
  13. 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!
  14. Hello, I'm currently developing a small game and need to rotate a mesh to a point. I want to set the rotation of a mesh to face a specific point in the "3D-Room". I hope anyone can get this cylinder in the playground to face to (0|0|0). Thanks a lot, Josh
  15. I cant solve this problem: What i want to do is to create an FSP camera attached to a character and move character + camera with mouse ad keys. PS: I already read all similar posts but nothing really useful. Details (my thoughts): 1) Lock mouse in browser (v) 2) move camera with mouse: Works with free camera, if i parent mesh to camera, but in this way mesh moves not in regular way and i cant apply gravity, etc... I assume i should use FollowCamera, but in this way i cant move it with mouse anymore Maybe i will need create a new type of camera? (Becouse the idea is that the camera should be attached to mesh in some point and should be movable by mouse) 3) Mesh should move forward/backward/left/right accordingly to camera direction 4)If you need, here you are my stupid code: function CharacterController(character, scene){ //keys variables var forwardKey; var backwardKey; var leftwardKey; var rightwardKey; //settings var inAir = true; var speed = 5; var jumpHeight = 300; var runSpeed; var crouchSpeed; //gravity settings var mass; var friction; var restitution; //var controller; var camera; /*LOCAL FUNCTIONS*/ //create new following camera /*var attachCamera = function(target){ //create following camera var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(5, 50, 45), scene); = target; // target any mesh or object with a "position" Vector3 camera.radius = 15; // how far from the object to follow camera.heightOffset = 8; // how high above the object to place the camera camera.rotationOffset = 180; // the viewing angle camera.cameraAcceleration = 0.05 // how fast to move camera.maxCameraSpeed = 20 // speed limit scene.activeCamera = camera; return camera; };*/ var attachCamera = function() { var cam = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene); cam.attachControl(scene.getEngine().getRenderingCanvas()); // Remap keys to move with ZQSD cam.keysUp = [87]; // W cam.keysDown = [83]; // S cam.keysLeft = [65]; // A cam.keysRight = [68]; // D cam.speed = 1; cam.inertia = 0.5; cam.angularSensibility = 1000; scene.activeCamera = cam; return cam; } //create custom physic settings for character var setCustomPhysicsState = function(newMass, newFriction, newRestitution){ character.setPhysicsState(BABYLON.PhysicsEngine.SphereImpostor, { mass: newMass, friction: newFriction, restitution: newRestitution }); }; //manage inputs var initPlayerActions = function(){ var forward = false; var turnLeft = false; var turnRight = false; scene.actionManager = new BABYLON.ActionManager(scene); scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) { switch(evt.sourceEvent.keyCode){ //space button case 32: //character.jump(); break; //w button case 87: forward = true; break; //a button case 65: turnLeft = true; break; //d button case 68: turnRight = true; break; //s button case 83: //character.moveBackward(); break; } })); scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyUpTrigger, function (evt) { switch(evt.sourceEvent.keyCode){ //space button case 32: //character.jump(); break; //w button case 87: forward = false; break; //a button case 65: turnLeft = false; break; //d button case 68: turnRight = false; break; //s button case 83: //character.moveBackward(); break; } })); scene.registerBeforeRender(function () { if(forward){ //player.position.z += 0.1; /*var forwards = new BABYLON.Vector3(parseFloat(Math.sin(player.rotation.y)) / speed, 0, parseFloat(Math.cos(player.rotation.y)) / speed); forwards.negate(); player.moveWithCollisions(forwards);*/ var posX = Math.sin(character.rotation.y) / speed; var posZ = Math.cos(character.rotation.y) / speed; //console.log(posX, posZ); character.position.x += posX; character.position.z += posZ; } if (turnLeft){ character.rotation.y += 0.1; } if (turnRight){ character.rotation.y -= 0.1 } }); }; var LockMousePointer = function() { // Request pointer lock var canvas = scene.getEngine().getRenderingCanvas(); // On click event, request pointer lock canvas.addEventListener("click", function(evt) { canvas.requestPointerLock = canvas.requestPointerLock || canvas.msRequestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock; if (canvas.requestPointerLock) { canvas.requestPointerLock(); } }, false); // Event listener when the pointerlock is updated (or removed by pressing ESC for example). var pointerlockchange = function (event) { controlEnabled = ( document.mozPointerLockElement === canvas || document.webkitPointerLockElement === canvas || document.msPointerLockElement === canvas || document.pointerLockElement === canvas); // If the user is alreday locked if (!controlEnabled) { camera.detachControl(canvas); } else { camera.attachControl(canvas); } }; // Attach events to the document document.addEventListener("pointerlockchange", pointerlockchange, false); document.addEventListener("mspointerlockchange", pointerlockchange, false); document.addEventListener("mozpointerlockchange", pointerlockchange, false); document.addEventListener("webkitpointerlockchange", pointerlockchange, false); } /*window.addEventListener("mousemove", function () { // We try to pick an object var pickResult = scene.pick(scene.pointerX, scene.pointerY); camera.rotationOffset += scene.pointerX/1000; console.log(scene.pointerX); //console.log(scene.pointerY); });*/ /*END LOCAL FUNCTIONS*/ var init = function(){ mass = 10; friction = 50; restitution = 0; LockMousePointer(); camera = attachCamera(character); character.position.z = 10; character.parent = camera; setCustomPhysicsState(mass, friction, restitution); //initPlayerActions(); }; init(); }
  16. Hi guys, i've been scratching my head the past 5 hours, couldn't get past this Step1: Basically, i have a cube rotating along the x-axis: Step2: I want that same cube, to pivot around the origin: The problem is, in Step2, the cube isn't rotating (along it's x-axis) like in Step1. I guess my question is, how do I combine both Step1 and Step2?
  17. 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)
  18. In this example I set a parent to the ground and then rotate it. I would expect that the absolute position of the ground would change but it doesn't... The weirder thing is that getAbsolutePosition returns always the same vector - the vector it returned first time I called it. For instance in this example the absolute position does change according to the rotation but after I get an absolute position for the first time it doesn't change. Am I missing something?
  19. Hey guys, I want to edit the loading Object in the following code. I want to rotate it or to set the vertices and normals. I tried it with "this" . BABYLON.SceneLoader.Load(document.getElementById("path").value, document.getElementById("name").value, engine, function (scene) { // Ground var ground = BABYLON.Mesh.CreateGround("ground", 15,15, 1, scene, false); var groundMaterial = new BABYLON.StandardMaterial("ground", scene); groundMaterial.specularColor = BABYLON.Color3.Black(); ground.material = groundMaterial; //ground.rotation.x += Math.PI/2 ; //ground.rotation.y += Math.PI/2 ; // Light var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(, 1, ), scene); //newScene light1.intensity = 0.4 ; var cam = new BABYLON.VirtualJoysticksCamera("VJC",new BABYLON.Vector3(, 4, -10) , scene); //Attach a camera to the scene and the canvas scene.activeCamera = cam; cam.attachControl(canvas, false); //this.rotation.y -= 35;<---- ? // Render engine.runRenderLoop(function () { scene.render(); }); // Resize window.addEventListener("resize", function () { engine.resize(); }); }); // Babylon loader
  20. Hi everybody, Here's my problem. I have a group, which I scale or rotate. Now if I drag a sprite in it, the sprite moves totally wrong. Its shift is scaled and rotated too! var gr = ;var sp = gr.create( 100, 100, 'face' ) ;gr.scale.x = -2 ;sp.enableInput = true ;sp.input.enableDrag( true ) ; Say, if the group is flipped by group.scale.x = -1, the sprite motion will be mirrored: the sprite and the cursor go different directions. Looks more like a bug of dragging. I'd appreciate any practical advice or workarounds. I have a big tree of nested groups, do I need to implement a multistage cast of the input coordinates? Thank you.
  21. I attach video example in blender. If we have box position (0,0,0) and if I set origion("Pivot") of box to (0,4,0) and if I rotate box about X axis I get this resoult (see video). How can I do this with Babylon.js? Can answare to this question with babylon.js code? Greetings Cand Kazam_screencast_00000.mp4
  22. Hi, I just started learning babylonjs i have some doubts please help me I am simply making a rubix cube using MeshBox, i just simply want to rotate each block as you know what we did in Rubix Cube now my problem if i use animation for rotating 90 degree like this animationBoxY = new BABYLON.Animation("myAnimation", "rotation.y", 160, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); animationBoxX = new BABYLON.Animation("myAnimation", "rotation.x", 160, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keys = []; keys.push({ frame : 0, value : 0 }); keys.push({ frame : 100, value : Math.PI/2 }); animationBoxY.setKeys(keys); animationBoxX.setKeys(keys); window.addEventListener("keydown", handleKeyDown, false); function handleKeyDown(evt){ if (evt.keyCode==65){ Box1.animations.push(animationBoxY); scene.beginAnimation(Box1, 0, 400, true); } if (evt.keyCode==68){ Box1Copy.animations.push(animationBoxX); scene.beginAnimation(Box1Copy, 0, 110, true); } by doing this i had two problem 1. hear both the animation got combined means it's moving diagonally instead of particularly X or Y 2. if i animate in x then y so animation for y is starting with from start not the position where it was last(hope you got what I'm saying) i also tried rotation like this box1.position.x = -2; but this is not auto rotation i want that when i press a key it will rotate 90/-90 degree like in rubix cube Please help me I'm pretty new hear
  23. If I rotate a mesh using the rotate() function the Mesh.rotation value is set to zero. Bug or expected behavior ? See Regards
  24. I'm trying to develop a globe in three.js. Pretty much got everything I want working but I'm have trouble getting a camera to rotate from one position to another when I click a button. I know that the cordinates are correct because if I use some simple code the camera jumps to the new position when I do this camera.position.set(posX,posY,posZ); camera.lookAt(new THREE.Vector3(0,0,0)); So give that my destination is correct I struggling to understand why the following function that uses tween.js doesn't work. I'd appreciate any help as I'm really struggling with this var from = { x : camera.position.x, y : camera.position.y, z : camera.position.z }; var to = { x : posX, y : posY, z : posZ }; var tween = new TWEEN.Tween(from) .to(to,600) .easing(TWEEN.Easing.Linear.None) .onUpdate(function () { camera.position.set(this.x, this.y, this.z); camera.lookAt(new THREE.Vector3(0,0,0)); }) .onComplete(function () { camera.lookAt(new THREE.Vector3(0,0,0)); }) .start(); Many thanks
  25. Hi, I want a 'Plane' which always should look at Camera, iam using ArcRotateCamera; Note: The Idea is, i have a 3d Building and placed Escalator symols(Plane with escalator symbol as texture) on the floor, these escalator symbols always need to look at the camera. Thanks,