Search the Community

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; }

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?

Hey everyone, I'm a little new to game development, so I really appreciate the advice! I'm just looking to understand local translations a little better. Basically what I have is 2 blender models (that I downloaded off Turbosquid) I have the distance value to my first model set to 300, and the second model set to 1, however, the model that is set to 1 is moving faster then the model set to 300: game.subject.translate(BABYLON.Axis.Y, 300, BABYLON.Space.LOCAL); unit.mesh.translate(BABYLON.Axis.Y, 1, BABYLON.Space.LOCAL); So I guess my question is, is the distance value relative to something? Both models are about the same size.

Hi, Im looking for a way to place objects relatively to other nested objects. ( objects that have a chain of parents that have been moved, rotated ). I searched the docs but couldnt find anything that could do what im looking for. Ive tried position.add / addToRef etc but they dont take object's rotation/parent chain into account. An example of what id like to do: A player turns 90 degrees in x direction. A weapon that is parented to the player, turns another "n" degrees. Now, how would i put a bullet at the tip of the weapon. ( without setting its parent = weapon ). After the bullet is created, it would move/follow objects in global space/coordinate system. in pseudo code: bullet = new Bullet();//extends Mesh. bullet.position = player.weapon.position.clone().translate(BABYLON.Axis.Z, weapon_barrel_length, BABYLON.Space.LOCAL); Note: position object doesn't have translate function, only mesh. My actual case is a bit different but this example explains it better.

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 http://www.babylonjs-playground.com/#102TBD#14 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.

Hi guys I've "nearly" completed a project and come to a stage where I have a height map and a flying steampunk ship ("yep I'm a steampunk fanatic") anyways, I have a stretched sphere surrounding the ship and I wish to use that as the collision point to the heightmap. I have used rays and it work really well but I would like more of a realistic collision i.e. When the ship hits a mountain head on, instead of going up and over the mountain I would like it to collide and to move left or right http://www.babylonjs-playground.com/#1L0CBO#2 I remember on a previous submission @RaananW made an impressive playground for a car to travel over a heightmap. which I tried to understand, however for a newbie its a little complex http://www.babylonjs-playground.com/#UGMIH#3 any help or advice would be greatly appreciated

I'm very new to Babylon.js and have spent a few days reading through the docs and forums, but I haven't been able to find a good answer for this. Let's say I have a rotating and scaled cube in my scene and I want to get the absolute position of each vertex. I found this topic for translating world coords to screen coords: http://www.html5gamedevs.com/topic/9584-converting-3d-vertex-to-2d-point-on-screen/ but so far I can only figure out how to get the position of the mesh itself, not for its vertices. In fact, even after digging around in the mesh object, I can't even find where the vertices are stored. How do I get the coordinates of a mesh's vertices so that I can translate them to screen coords so I can draw debug lines on a canvas?

I wrote some working html5 canvas code that is responsible for rendering a scrollbar. The way it does this is by: 1. Creating a sub canvas (the variable `containerCanvas`) 2. Translating the offset of that canvas so the content is shifted based on where the scroll bars are at. I thought that DisplayObjectContainer would be the object to use, but I don't see any functions to translate its content. That made me think that maybe I should be using a TilingSprite since it has the ability to translate, but I don't know how to turn arbitrary `DisplayObject`'s into a Texture, which is what the `TilingSprite` needs. 3. Draw that canvas - as an image - onto the parent canvas (the variable `ctx`). This crops the sub canvas' content to the containers' (0, 0, w, h). Since the content has already been translated, this only draws what should be seen. I've done some tests and seen that Pixi will happily render child `DisplayObjects` that are out of bounds of their parent, so I'm not sure how to crop the content. Here's the coffeescript: drawContainer = (ctx, gameState, container, offset) -> containerCanvas = $("<canvas width='#{container.rect.w}' height='#{container.rect.h}'></canvas>") containerCanvasCtx = containerCanvas[0].getContext("2d") containerCanvasCtx.translate(-container.scrollOffset.x, -container.scrollOffset.y) # how do I achieve this? for innerComponent in container.components drawComponent containerCanvasCtx, gameState, innerComponent, vec(0, 0) rect = container.rect ctx.drawImage(containerCanvas[0], offset.x + rect.x, offset.y + rect.y) drawScrollbars(ctx, container, offset)Here's the generated javascript: drawContainer = function(ctx, gameState, container, offset) { var containerCanvas, containerCanvasCtx, innerComponent, rect, _i, _len, _ref; containerCanvas = $("<canvas width='" + container.rect.w + "' height='" + container.rect.h + "'></canvas>"); containerCanvasCtx = containerCanvas[0].getContext("2d"); containerCanvasCtx.translate(-container.scrollOffset.x, -container.scrollOffset.y); //how do I achieve this? _ref = container.components; for (_i = 0, _len = _ref.length; _i < _len; _i++) { innerComponent = _ref[_i]; drawComponent(containerCanvasCtx, gameState, innerComponent, vec(0, 0)); } rect = container.rect; ctx.drawImage(containerCanvas[0], offset.x + rect.x, offset.y + rect.y); return drawScrollbars(ctx, container, offset); };