three.js – how do I rotate a cylinder around a specific point?

by

I am assuming that what you mean is that you want an object to rotate around a specific point within it’s geometry.

For example, the cylinderGeometry rotates around it’s center. Suppose you want it to rotate around its end.

What you need to do is translate the cylinder geometry right after it is created so that the desired point within the geometry is now at the origin.

geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, cylinderHeight/2, 0 ) );

EDIT: You can now do this, instead:

geometry.translate( 0, cylinderHeight/2, 0 ); // three.js r.72

Now, when you rotate the cylinder, it will now rotate around its end, rather than its middle.

The end that it is rotating around will also be located at the position you have set for the cylinder mesh.

Obviously, you can do this with any geometry, not just cylinders.

More Related Contents:

  1. How to change the zOrder of object with Threejs?
  2. Transparent objects in Threejs
  3. Mouse / Canvas X, Y to Three.js World X, Y, Z
  4. How does the calculation of the light model work in a shader program?
  5. Transparent objects in Three.js
  6. Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?
  7. Display wireframe and solid color
  8. artifacts when rendering both sides of a transparent object with three.js
  9. THREE.JS: Get object size with respect to camera and object position on screen
  10. three.js – Adjusting opacity of individual particles
  11. Three.js – Can I ‘apply’ position, rotation, and scale to the geometry?
  12. Outline object (normal scale + stencil mask) three.js
  13. How to use multiple materials in a Three.js cube?
  14. Three.js Rotate Texture
  15. How to implement a ShaderToy shader in three.js?
  16. “Cross origin requests are only supported for HTTP.” error when loading a local file
  17. THREE.js generate UV coordinate
  18. Three.js – Orthographic camera
  19. Drawing a line with three.js dynamically
  20. How to rotate a 3D object on axis three.js?
  21. Thickness of lines using THREE.LineBasicMaterial
  22. threejs how to rotate around object’s own center,instead of world center
  23. Using textures in THREE.js
  24. Is it possible to enable unbounded number of renderers in THREE.js?
  25. Any way to get a bounding box from a three.js Object3D?
  26. Three JS Pivot point
  27. Convert 2:1 equirectangular panorama to cube map
  28. Detect clicked object in THREE.js
  29. How to render clipped surfaces as solid objects
  30. Why do shaders have to be in html file for webgl program?

Leave a Comment