Three.js camera tilt up or down and keep horizon level

by

In three.js, an object’s orientation can be specified by its Euler rotation vector object.rotation. The three components of the rotation vector represent the rotation in radians around the object’s internal x-axis, y-axis, and z-axis respectively.

The order in which the rotations are performed is specified by object.rotation.order. The default order is “XYZ” — rotation around the x-axis occurs first, then the y-axis, then the z-axis.

Rotations are performed with respect to the object’s internal coordinate system — not the world coordinate system. This is important. So, for example, after the x-rotation occurs, the object’s y- and z- axes will generally no longer be aligned with the world axes. Rotations specified in this way are not unique.

So, for example, if in code you specify,

camera.rotation.y = y_radians;  // Y first
camera.rotation.x = x_radians;  // X second
camera.rotation.z = 0;

the rotations are applied in the object’s rotation.order, not in the order you specified them.

In your case, you may find it more intuitive to set rotation.order to “YXZ”, which is equivalent to “heading, pitch, and roll”.

For more information about Euler angles, see the Wikipedia article. Three.js follows the Tait–Bryan convention, as explained in the article.

three.js r.61

More Related Contents:

  1. Why does an image captured using camera intent gets rotated on some devices on Android?
  2. threejs how to rotate around object’s own center,instead of world center
  3. Rotating phone quickly 180 degrees, camera preview turns upside down
  4. three.js set and read camera look vector
  5. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  6. Activity restart on rotation Android
  7. HTML5 Canvas Rotate Image
  8. Strange behavior with android orientation sensor
  9. Three.js – Width of view
  10. python pygame.camera.init() NO vidcapture
  11. How to draw an overlay on a SurfaceView used by Camera on Android?
  12. How to capture an image and store it with the native Android Camera
  13. Converting 3D position to 2d screen position [r69!]
  14. OpenCV Python rotate image by X degrees around specific point
  15. How to find the unicode of the subscript alphabet?
  16. Changing three.js background to transparent or other color
  17. artifacts when rendering both sides of a transparent object with three.js
  18. rotate a .gif image on google maps api v3?
  19. Moving forward after angle change. Pygame
  20. How to render Android’s YUV-NV21 camera image on the background in libgdx with OpenGLES 2.0 in real-time?
  21. Get file path of image on Android
  22. Captured Photo orientation is changing in android
  23. Rotating Image on A canvas in android
  24. Java – Rotating array
  25. Capturing and storing a picture taken with the Camera into a local database / PhoneGap / Cordova / iOS
  26. Android: detect brightness (amount of light) in phone’s surroundings using the camera?
  27. How to use camera flash/led as torch on a Samsung Galaxy Tab?
  28. Outline object (normal scale + stencil mask) three.js
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Camera Preview Stretched on Few Android Devices

Leave a Comment