Search the Community

https://www.babylonjs-playground.com/#PP962K#13 I tried to make rotation from point1 to point2 to point3 in Oxy plane as you can see by coordinates, but after point2 the camera starts to choose a strange path out of Oxy. Why it happens?

Hi guys/gals. I've been working with pivotPoints, recently. http://playground.babylonjs.com/#VJMEH8#10 Right clicking on the blue box... we can easily see where its pivotPoint is located. My objective was to .position pink sphere... AT blue box pivotPoint. I needed to use an 'add' in line 52. kid1.getAbsolutePivotPoint() and kid1.getPivotPoint() - neither returns a worldSpace coordinate. Does that seem normal? I would have thought kid1.getAbsolutePivotPoint() would have returned a worldSpace coordinate... that I could use to position the pink sphere... without using .add. [ Wingy looks around for .getPivotPointInWorldSpace() ] Thanks for info. I think I'll need a couple more months of study... for http://doc.babylonjs.com/how_to/pivot3.2 @JohnK/others... if you have a moment, could you check playgrounds in that doc... to make sure they are acting as you wish them to act? Thx.

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 everyone, I want to center an element (in this case a graphics element) in the center of the screen. https://jsfiddle.net/user/adnanchang/fiddles/ As you can see from my code, I am changing the position of the graphics and bringing it to the center of the screen. I don't want that. I want to actually move the pivot/position of the stage in such a manner that the graphics then looks like it is to the center of the screen. Also, would it be possible to save the original position of the stage?

Hi all, I've been banging my head off the desk for days now and can't figure out how to go about accomplishing this. I've gotten to the point of being able to scale or rotate around a random pivot point, but only once, I need to be able to do it multiple times in a row. For example (in the GIF attached); I need to scale the box across the red line as the pivot point, and then scale the box along the blue line as the pivot point and then finally rotate the box around the green dot as the pivot point. I can do each step individually just fine, but the chaining together completely breaks as I can't figure out how to set the pivot point on the already manipulated sprite properly. Does anyone have any ideas on how to accomplish this? I really need to get this working asap and I'm at the end of my rope. Thanks.

Hello everyone. I create a sprite and set its pivot to rotate it around the center. Just wonder why not its position updated, as console log wrote its x and y position always at the center, but then it is rotating and moving. create: function { let sprite=game.create.sprite(game.world.centerX, game.world.centerY,"sprite"); sprite.pivot.y=500; }; update: function { sprite.rotation+=0.1; console.log(sprite.x); console.log(sprite.y); } Is it the way I do it improper? Can anyone help me out? Thanks.

Hello, I would like better understand pivot and how it's stored, calculated and what it affects. As it causes me troubles when I apply setTextBounds. May be someone can share link to article or tell me something? Thanks in advance

The problem Create a box fig 1 Use box.setPivotMatrix(BABYLON.Matrix.Translation(-0.5, 0.5, 0.5)); To set the pivot at the lower right front corner (shown by small grey sphere). fig 2 Position the box at (2, 0, 0) and note that it is the pivot that is positioned at (2, 0, 0). box.position = new BABYLON.Vector3(2, 0, 0); fig 3 Delete box.position and replace with box.translate(BABYLON.Axis.X, 2, BABYLON.Space.LOCAL); As you would expect since the local and world axes are in alignment you get the same result. fig 4 Now replace LOCAL with WORLD box.translate(BABYLON.Axis.X, 2, BABYLON.Space.WORLD); Since local and world axes are in alignment and translate is a vector displacement and the displacement is the same then you would expect the box to be at the same position. However it is not as is seen below. fig 5 Probable Issue Getting the position of the box for fig 2 it is at (0, 0, 0) ie the position of the pivot, the absolutePosition for the box in fig 2 is (-0.5, 0.5, 0.5) the position of the box's center in world space. So a translation in either local or world space would give the boxes position as (2, 0, 0) and its absolute position as (1.5, 0.5, 0.5) which it is for fig 3 using position and for fig 4 for translate in local space. However translation in world space gives a position of (1.5, 0.5, 0.5) and an absolutePosition of (1, 1, 1) = (1.5, 0.5, 0.5) + (-0.5, 0.5, 0.5) . It is out by the pivot vector. Tracking down translate in Mesh/babylon.abstractMesh.ts public translate(axis: Vector3, distance: number, space?: Space): AbstractMesh { var displacementVector = axis.scale(distance); if (!space || (space as any) === Space.LOCAL) { var tempV3 = this.getPositionExpressedInLocalSpace().add(displacementVector); this.setPositionWithLocalVector(tempV3); } else { this.setAbsolutePosition(this.getAbsolutePosition().add(displacementVector)); } return this; } where for Space.WORLD there is a call to 'setAbsolutePosition' the code for which is public setAbsolutePosition(absolutePosition: Vector3): AbstractMesh { if (!absolutePosition) { return; } var absolutePositionX; var absolutePositionY; var absolutePositionZ; if (absolutePosition.x === undefined) { if (arguments.length < 3) { return; } absolutePositionX = arguments[0]; absolutePositionY = arguments[1]; absolutePositionZ = arguments[2]; } else { absolutePositionX = absolutePosition.x; absolutePositionY = absolutePosition.y; absolutePositionZ = absolutePosition.z; } if (this.parent) { var invertParentWorldMatrix = this.parent.getWorldMatrix().clone(); invertParentWorldMatrix.invert(); var worldPosition = new Vector3(absolutePositionX, absolutePositionY, absolutePositionZ); this.position = Vector3.TransformCoordinates(worldPosition, invertParentWorldMatrix); } else { this.position.x = absolutePositionX; this.position.y = absolutePositionY; this.position.z = absolutePositionZ; } return this; } which takes into account a parent but not a pivot. Also it sets the absolutePosition by setting only the position. However as is seen above when using a pivot, like for the parent case, position and absolute position are different by the pivot vector. Possible Solution Would be very nervous of suggesting changes to 'setAbsolutePosition' as I would not know what else it might affect. So suggest the following change to translate - 'add(this.getPivotPoint())' - but am not submitting a PR since I am not absolutely certain this is the correct way to go. Have tried it locally and it gives me what I expect but do not know whether it affects anything else and will wait until better BJS minds than mine check it out. public translate(axis: Vector3, distance: number, space?: Space): AbstractMesh { var displacementVector = axis.scale(distance); if (!space || (space as any) === Space.LOCAL) { var tempV3 = this.getPositionExpressedInLocalSpace().add(displacementVector); this.setPositionWithLocalVector(tempV3); } else { this.setAbsolutePosition(this.getAbsolutePosition().add(displacementVector).add(this.getPivotPoint())); } return this; }

Hi I am new to phaser . I am working on a animation to rotate a glass with lid . when I rotate it ,it rotates anti cliockwise to the left . I want it turn clockwise to right . and when I try to change the pivot position the group position gets changed. Need help .

i want to zoom to player position using pixi features. According to this comment. A camera is as easy as setting container pivot point to user position and move the container position to the canvas center. How about do a little more and zoom to the user position and make it look natural? I am currently using this const scaleDelta = -0.1; const offsetX = - (user.x * scaleDelta); const offsetY = - (user.y * scaleDelta); const currentScale = container.scale.x; let nScale = currentScale + scaleDelta; container.position.x += offsetX; container.position.y += offsetY; container.scale.set(nScale); This works when I am not using a camera, but looks jumpy when I add a camera. What is the solution with a camera?

I have a scene in 3DS max, and in that scene are knobs that I want to rotate. When I export the scene from Max using the 2017 exporter the pivotMatrix is set to Null. Is it possible to have this info be populated upon export from Max or can you only control this via source code? Thanks in advance.

Hello everyone, I'm trying to get a label system which could work like https://jig.space/view?jig=v4Ga2VKw I'm using the 3ds max exporter to export the meshes and I wanted to use the pivot point as a base to place the label. Maybe there is a better way to do it. When I create my Group2D (containing a line, rectangle and text) and set the trackNode property to use the mesh, I can see that the pivot point is not used. It looks like it might not event been exported (I attached the file) since the pivotMatrix is null. Maybe I'm missing something ? Infos.babylon

Hi everyone! I'm still learning and I think I got in way over my head. I'm trying to have a turret that will fire from multiple guns while facing the cursor. This means that the bullet reset-point keeps changing, but since I'm pivoting the sprite group, the coordinates are always staying the same! What do I do to get coordinates that update on every frame, which I can then use as bullet spawning point? Edit: Link removed

In the second part of last year I was involved in many a topic related to pivots and I suggested a number of ways to solve the various but similar problems. http://www.html5gamedevs.com/topic/26327-set-pivot-on-rotatedscaled-mesh/ http://www.html5gamedevs.com/topic/26327-set-pivot-on-rotatedscaled-mesh/ http://www.html5gamedevs.com/topic/26032-dont-change-the-mesh-position-when-setting-the-pivot/ http://www.html5gamedevs.com/topic/17207-rotating-a-mesh-around-a-pivot/ Recently I needed to return to pivots and realised that I had never really understood them. My re-visiting them has gained me some new insight into pivots and manipulating them in a much simpler way than before. Quite possibly in another year's time I will discover there is still a better way than I have now found. For the time being I would like to share my new found understanding and hope it might help some of you. So if you are trying out pivots and want to know of a fairly straightforward technique to use them read on http://babylonjsguide.github.io/advanced/Pivots

I notice if I pan, rotate a bit, then scale and do that whole sequence a few times, the pivot point starts to shift which is noticeable when rotating. Is there a way to prevent the pivot point moving? I'm trying it out here www.punkoffice.com/scan/cat_kasey (use right-click to pan)

http://www.babylonjs-playground.com/#147HRL#5 Hello, hello, good day to you sirs and mams, I'm a newb, i'm a newb. I'll try and keep it simple and straight forward, at a minimum my playground is (simple and straight forward). when I search for pivot, three options seem to come up, along with confusion: 1. the setPivotMatrix method 2. create a mesh where you want your pivot point to be and parent to it 3. world this or that and setting world so, i've experimented with OPTION 1, setPivotMatrix, and i can't find the connection between this and a pivot point, I assume this is a mathematicians version of pivot as opposed to a physicists pivot, if someone could please describe in a sentence what setPivotMatrix is, it would be greatly appreciated. On the other hand if it could be shown in a simple playground that this has something to do with a "pivot" that to would be greatly appreciated. Before you say that's easy and show me a sphere rotating around another sphere where the pivot is the one rotating please read: from wikipedia: "Pivot may refer to: Pivot, the point of rotation in a lever system More generally, the center point of any rotational system Pivot joint, a kind of joint between bones in the body Pivot turn, a dance move" for OPTION 2 parenting it works great with a single mesh you want to rotate around a point, but will it work with clones and rotating each clone another Math.PI/6? here is my playground: http://www.babylonjs-playground.com/#147HRL#5 OPTION 3 is beyond me thank you for looking reading thinking, maybe even writing have a lovely day, or if night, then sweet dreams

Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens. The tweening library that I'm using is Tween.js ( https://github.com/tweenjs/tween.js/ ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged. According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js ), which is what prompted my current, albeit unsatisfactory, solution. To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution. This code example is no longer able to set the x position in v4: new TWEEN.Tween(stage.position) .to({ x: value }, 500) .start(); However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target. This code example using onUpdate() works with v4: var temporaryObject = { x: stage.position.x }; new TWEEN.Tween(temporaryObject) .to({ x: value }, 500) .onUpdate(function() { stage.position.x = this.x; }) .start(); Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.

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: http://www.babylonjs-playground.com/#H7V1D Could someone please tell me what i am doing wrong (I am really bad with Matrix Everything ) Thanks,

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 http://www.babylonjs-playground.com/#1J7LGZ 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.

Hello everyone, http://babylonjs-playground.com/#RZGEH#0 In the example above, on the left should be exactly what's on the right. But, the mesh should stay in place, I don't want to change its position to compensate for the new pivot point. ajustPosition bellow should be 0. var offsetUnit=2; var ajustPosition=offsetUnit; var box1 = BABYLON.Mesh.CreateBox("box1", 2, scene); box1.position.z = -2+ajustPosition; box1.setPivotMatrix(BABYLON.Matrix.Translation(0, 0, -offsetUnit)); How to set the pivot point and keeping the mesh in place without changing its position?

Hi guys, Dragging a sprite, the pivot does not change position, How I can update the pivot of other Sprites? http://phaser.io/sandbox/Uwipmwxr/play if I move the "topLeft" sprite, I want the "topRight" sprite move the same distance upward based on the central point like rectangle if I move the "topLeft" sprite, I want the "bottomLeft" sprite move the same distance to the left based on the central point like rectangle PD: I want to simulate Fabric.js with pivots, check my example => http://codepen.io/jdnichollsc/pen/KgdRvV Can somebody help me? Thanks in advance, Nicholls

Hi guys, Dragging a sprite, the pivot does not change position, How I can update the pivot of other Sprites? http://phaser.io/sandbox/Uwipmwxr/play if I move the "topLeft" sprite, I want the "topRight" sprite move the same distance upward based on the central point like rectangle if I move the "topLeft" sprite, I want the "bottomLeft" sprite move the same distance to the left based on the central point like rectangle PD: I want to simulate Fabric.js in Phaser, check my example => http://codepen.io/jdnichollsc/pen/KgdRvV Can somebody help me? This is a plugin for Phaser Thanks in advance, Nicholls

Hello! I tried setting a sprite to pivot around another sprite, only to realize that it's rotating and one side always faces the other sprite. Is there a way to make a sprite circle a point, while staying static (without rotating)? I haven't found anything useful online. Thank you.

Hi all! I'm trying to make a sprite pivot, as simple as that. However, it won't work and I'm not sure if I'm missing something. I checked the tutorials/examples and I can't see the problem: http://kresimir.majic.eu/games/single_state/pivot.html I'm kinda stuck, so any help would be greatly appreciated! Thanks!

This is a problem which I've been struggling for too long now. Probably my approach is completely wrong, and my knowledge of matrices are lacking. Scenario: Two parent meshes in a scene Each parent has one so called connector mesh as a child Both parents have a pivotMatrix which is not equal to Matrix.Identity() Both child connectors have a pivotMatrix which is not equal to Matrix.Identity() Problem Moving the second parent in such a way that both child connectors have the same global position. Unfortunately this does not come out okay, because the pivotMatrix is 'messing' things up. What have I tried The models are made using 3DS Max and then exported to .babylon. When I apply a ResetXForm within 3DS Max on the connectors it all works fine, and the models connect at the right position. Unfortunately I do not have the possibility to do this for all the models I have. I've tried using this piece of code (TypeScript): let subject: BABYLON.Mesh = <BABYLON.Mesh>con2.parent; let con1pos: BABYLON.Vector3 = con1.getAbsolutePosition(); let con2pos: BABYLON.Vector3 = con2.getAbsolutePosition(); let pos2: BABYLON.Vector3 = subject.getAbsolutePosition(); subject.setAbsolutePosition(pos2.add(con1pos.subtract(con2pos))); What I would really like is a way to make the pivotMatrix == Matrix.Identity() and have the mesh/geometry stay at the same position. Because before I can move these, I also need to rotate the subject, in such a way that con2 faces the exact opposite direction as con1. And I am pretty sure that the pivotMatrix is going to mess up that as well. Edit: I've created two playgrounds. http://www.babylonjs-playground.com/#1UMJXS#0 (3ds max export where the connectors have an altered pivot) http://www.babylonjs-playground.com/#1UMJXS#1 (3ds max export where the connectors are reset using resetXform) I was very convinced that I did get values using the getPivotMatrix() method, but checking today, I was horribly wrong. Apparently that data is not output by the babylon 3ds max exporter. Which gives me the feeling there is little I can do about it. Perhaps the exporter needs to be adjusted so that the adjusted pivot matrix gets exported as well