preface
After the little demo, camera and lights, it’s time to move on to elemental objects and materials. But I’m going to jump ahead and talk about the spatial coordinate system in BabylonJS. Because when I showed you the demo, the x,y, and z axes were a little messy, and I tried them out.
This chapter will also be easier.
Left hand Cartesian coordinates
Because threejs uses right-handed Cartesian coordinates. So these two are kind of inverting.
Let’s talk about Cartesian coordinates.
In the original two dimensional rectangular coordinate system, add another coordinate axis perpendicular to X-axis and Y-axis, called z-axis, the z-axis is orthogonal to the origin with X-axis and Y-axis. As shown in the figure below, those that meet the right hand rule are called right-handed, and those that do not are left-handed.
The right-handed rule: Holding the Z-axis in the right hand, when the four fingers of the right hand are rotated from the X-axis to the Y-axis at a π/2 Angle, the thumb points to the z-axis. [Same with the left hand rule]
Simply said, is not consistent with the right hand coordinate system, are coordinate system, do not take the left hand to set.
Babylonjs in practice
You can see that holding the z-axis, your hand goes from y to x, so this is a left-handed coordinate system.
Babylonjs coordinate details
In the picture above, why is this Angle of view? Y-up.
It’s all about perspective. Just adjust the camera.
So why is ground in the Tib plane?
If you look at the CreateGround function, you will see that there is no configuration item on which surface it is on.
In other words, it’s on the Xz plane by default, but on the XY plane. Rotate 90 degrees about the x axis.
ground.rotation.x = - Math.PI / 2;
ground.rotation = new BABYLON.Vector3(- Math.PI / 2, 0, 0)