Search code examples
3drotationbabylonjs

How can I manually rotate a 3D sphere based on x and y positions?


This is my first BabylonJS project and I'm stuck on understanding rotations of a sphere. Also, this is my first 3D project ever so I can't say I'm very good at this.

I'm working on a pool/snooker game developed in 2d with PixiJS (so there's a fixed camera) and now I want 3D animated balls just like Miniclip's 8 Ball Pool. Miniclip is using spritesheets to simulate 3D rotation.

I came to the conclusion that integrating BabylonJS will solve this request and it almost did excepting the balls rotations which will have to be solved manually, since the spheres will follow the 2D balls coordinates, X and Y (Z is fixed on zero). Just like here: https://zippy.gfycat.com/ShorttermFortunateFanworms.webm

I found this tutorial and it works excellent in Unity, exactly what I needed, but it doesn't work in my project. http://kwarp.blogspot.com/2015/07/unity-rotate-3d-ball-using-2d-physics.html

I think the problem is where the quaternion needs to be multiplied with a vector, I'm not sure. Also tried this with no result. http://www.html5gamedevs.com/topic/32934-multiply-a-vector3-times-a-quaternion/#comment-188880

Can someone please help me with this?

I created something similar here, based on the mouse coordinates. The earth should rotate while the mouse is moved. https://www.babylonjs-playground.com/#0HCCW7#29

PS: I did search and investigated a lot of topics and solutions but none worked or maybe it's beyond my capacity of understanding quaternions and math.


Solution

  • I managed to solve this by converting the rotation vector to quaternion, multipling it and the converting the final result into euler angles https://www.babylonjs-playground.com/#0HCCW7#44