threejs how to rotate around object’s own center,instead of world center

by

If your mesh is not rotating around its center, it is because the geometry vertices are offset from the origin.

You can automate repositioning by using a bounding box to define a reasonable center, and then offset the mesh’s position like so:

var box = new THREE.Box3().setFromObject( mesh );
box.center( mesh.position ); // this re-sets the mesh position
mesh.position.multiplyScalar( - 1 );

Then add the mesh to a pivot object:

var pivot = new THREE.Group();
scene.add( pivot );
pivot.add( mesh );

In your animation loop, rotate the pivot;

pivot.rotation.y += 0.01;

EDIT: A different solution is to translate the geometry vertices so the geometry is centered around, or near, the origin:

geometry.translate( distX, distY, distZ );

Or, alternatively, you could just call:

geometry.center();

which centers the vertices of the geometry for you based on the geometry’s bounding box.

three.js r.97

More Related Contents:

  1. Three.js camera tilt up or down and keep horizon level
  2. Component of a quaternion rotation around an axis
  3. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  4. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
  5. Python list rotation [duplicate]
  6. THREE.js Ray Intersect fails by adding div
  7. Android: Bitmaps loaded from gallery are rotated in ImageView
  8. Get element -moz-transform:rotate value in jQuery
  9. Screen orientation lock
  10. Transparent objects in Three.js
  11. Rotating BufferedImage instances
  12. Further understanding setRetainInstance(true)
  13. Three.js / WebGL – transparent planes hiding other planes behind them
  14. Rendering a transparent shell
  15. Android Two finger rotation
  16. three.js – Adjusting opacity of individual particles
  17. Rotate an image in C++ without using OpenCV functions
  18. three.js transparent object occlusion
  19. Rotate JLabel or ImageIcon on Java Swing
  20. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  21. How to avoid restarting activity when orientation changes on Android
  22. UIImageView Gestures (Zoom, Rotate) Question
  23. Three.js add an object to a group but keep global position/rotation/scale as it was
  24. iOS: How to run a function after Device has Rotated (Swift)
  25. Python Array Rotation
  26. UITabBarController Rotation Issues in ios 6
  27. Get bounds of rotated rectangle
  28. Rotate Point around pivot Point repeatedly
  29. Why do shaders have to be in html file for webgl program?
  30. iOS 6 UITabBarController supported orientation with current UINavigation controller

Leave a Comment