Rotate object on specific axis anywhere in Three.js – including outside of mesh

by

If you want to rotate an object around an arbitrary line in world space, you can use the following method. The line is specified by a 3D point and a direction vector (axis).

THREE.Object3D.prototype.rotateAroundWorldAxis = function() {

    // rotate object around axis in world space (the axis passes through point)
    // axis is assumed to be normalized
    // assumes object does not have a rotated parent

    var q = new THREE.Quaternion();

    return function rotateAroundWorldAxis( point, axis, angle ) {

        q.setFromAxisAngle( axis, angle );

        this.applyQuaternion( q );

        this.position.sub( point );
        this.position.applyQuaternion( q );
        this.position.add( point );

        return this;

    }

}();

three.js r.85

More Related Contents:

  1. Three.js – Orthographic camera
  2. Converting World coordinates to Screen coordinates in Three.js using Projection
  3. Three JS – Find all points where a mesh intersects a plane
  4. Three.js Projector and Ray objects
  5. How to render clipped surfaces as solid objects
  6. Three.js add an object to a group but keep global position/rotation/scale as it was
  7. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  8. Three.js – Width of view
  9. THREE.js : 2xMeshes using same vector as position
  10. How to find the unicode of the subscript alphabet?
  11. Multiple transparent textures on the same mesh face in Three.js
  12. How to get the absolute position of a vertex in three.js?
  13. How do you save an image from a Three.js canvas?
  14. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  15. Three.js – Geometry on top of another
  16. Three.js/WebGL: Large spheres appear broken at intersection
  17. Three.js cube with different texture on each face
  18. Three.js and loading a cross-domain image
  19. How to get object in WebGL 3d space from a mouse click coordinate
  20. How to save canvas animation as gif or webm?
  21. How to get the global/world position of a child object?
  22. Orthographic camera and selecting objects with raycast
  23. Three.JS wireframe material – all polygons vs. just edges
  24. How to create a custom mesh on THREE.JS?
  25. 3D point rotation algorithm
  26. Determine if a mesh is visible on the viewport according to current camera
  27. Threejs: assign different colors to each vertex in a geometry
  28. Random Point on a given Sphere
  29. Switch threejs controls ( from TrackBall to FlyControls and vice versa)
  30. How to toggle preserveDrawingBuffer in three.js?

Leave a Comment