Three JS Pivot point

by

I wouldn’t recommend updating the vertices, because you’ll run into trouble with the normals (unless you keep them up-to-date, too). Basically, it’s a lot of hassle to perform an action for which the transformation matrices were intended.

You came pretty close by translating, rotating, and un-translating, so you were on the right track. There are some built-in methods which can help make this super easy.

// obj - your object (THREE.Object3D or derived)
// point - the point of rotation (THREE.Vector3)
// axis - the axis of rotation (normalized THREE.Vector3)
// theta - radian value of rotation
// pointIsWorld - boolean indicating the point is in world coordinates (default = false)
function rotateAboutPoint(obj, point, axis, theta, pointIsWorld){
    pointIsWorld = (pointIsWorld === undefined)? false : pointIsWorld;

    if(pointIsWorld){
        obj.parent.localToWorld(obj.position); // compensate for world coordinate
    }

    obj.position.sub(point); // remove the offset
    obj.position.applyAxisAngle(axis, theta); // rotate the POSITION
    obj.position.add(point); // re-add the offset

    if(pointIsWorld){
        obj.parent.worldToLocal(obj.position); // undo world coordinates compensation
    }

    obj.rotateOnAxis(axis, theta); // rotate the OBJECT
}

After this method completes, the rotation/position IS persisted. The next time you call the method, it will transform the object from its current state to wherever your inputs define next.

Also note the compensation for using world coordinates. This allows you to use a point in either world coordinates or local space by converting the object’s position vector into the correct coordinate system. It’s probably best to use it this way any time your point and object are in different coordinate systems, though your observations may differ.

More Related Contents:

  1. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  2. “Cross origin requests are only supported for HTTP.” error when loading a local file
  3. THREE.js generate UV coordinate
  4. Three.js – Orthographic camera
  5. Drawing a line with three.js dynamically
  6. THREE.js : 2xMeshes using same vector as position
  7. How to rotate a 3D object on axis three.js?
  8. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  9. Thickness of lines using THREE.LineBasicMaterial
  10. Using textures in THREE.js
  11. How to stop a requestAnimationFrame recursion/loop?
  12. Three JS – Find all points where a mesh intersects a plane
  13. How to get the absolute position of a vertex in three.js?
  14. Is it possible to enable unbounded number of renderers in THREE.js?
  15. Any way to get a bounding box from a three.js Object3D?
  16. Three.js Projector and Ray objects
  17. How to detect collision in three.js?
  18. Three.js – Geometry on top of another
  19. Three.js/WebGL: Large spheres appear broken at intersection
  20. Convert 2:1 equirectangular panorama to cube map
  21. Three.js cube with different texture on each face
  22. Three.js and loading a cross-domain image
  23. How to save canvas animation as gif or webm?
  24. How to create a custom mesh on THREE.JS?
  25. Detect clicked object in THREE.js
  26. Determine if a mesh is visible on the viewport according to current camera
  27. How to render clipped surfaces as solid objects
  28. Threejs: assign different colors to each vertex in a geometry
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Switch threejs controls ( from TrackBall to FlyControls and vice versa)

Leave a Comment