Rotating and Scaling 3D Objects in HTML5 – BabylonJS Series part 3

BabylonJS Series by David Catuhe (@DeltaKosh):

Learn WebGL and Babylon.js at your own pace

Feel free to check out our online course 3D Programming with WebGL and Babylon.js for Beginners on Zenva Academy. The course covers the Babylon.js framework and explains all you need to get started with using this fantastic library in new or existing projects.

What you could expect

This time you are going to learn how to move and rotate any kind of objects that you created in our last tutorialElements

Final result

How can I do this ?

For this scene, we won’t change anything in the structure: changes are only on the scene file, in the function called “createSceneTuto”. As usual, we are beginning the function by writing basic elements of a scene:

Then create as much boxes as you want:

As we seen earlier, you can now position all the boxes on the scene

And now, with the same ease of coding, you can rotate on all axes, and rescale in any size! For example:

  • Rotation (angles are in radians)
  • Scaling

Another Babylon’s feature is moving an object, relatively to another by creating a link between two meshes. This link implies that all parent transformations (position/rotation/scaling)will be combined with the child’s transformations.

Published by

David Catuhe

David Catuhe is technical evangelist lead at Microsoft France. He defines himself as a geek. He loves to develop with JavaScript and HTML5 but also with DirectX, C#, C++ or even Kinect (He wrote a book about it which is available on Amazon).David has a blog called Eternal Coding where he writes about HTML5, Windows, Kinect and 3D Development.

Share this article