How to rotate Tube Geometry?

Questions
, , , ,
1

hi,
I create a tube geometry using the THREE.TubeGeometry class. Then, we create a rotation matrix using the THREE.Matrix4 class and use the makeRotationZ method to rotate the matrix by 45 degrees (Math.PI / 4 radians). but I ddi not get what I need here my code

const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(-5, 0, 5),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(5, 0, -5),
  new THREE.Vector3(10, 0, 0)
]);const geometryg = new THREE.TubeGeometry(curve, 120, 0, 4, false);const materialg = new THREE.MeshBasicMaterial({ color: 0x00ff00,wireframe:true });const mesh = new THREE.Mesh(geometryg, materialg);
scene.add(mesh);
// Create a rotation matrix
const rotationMatrix = new THREE.Matrix4();
rotationMatrix.makeRotationX(Math.PI); // Rotate by 45 degrees

// Apply the rotation to each vertex of the tube geometry
geometryg.vertices.forEach(vertex => {
  vertex.applyMatrix4(rotationMatrix);
});

// Update the tube geometry to reflect the changes
geometryg.verticesNeedUpdate = true;

I want as shown in this picture:

Capture
Capture1042×466 179 KB

Thank you

2

If the goal is to have a tube with a square cross-section (instead of a rhombus), you can use ExtrudeGeometry instead of TubeGeometry. Define a square profile and extrude it along the curve.

https://codepen.io/boytchev/full/NWeRYLr

image

If you insist on rotating vertices, you have to make quite some changes in the code. Some of them are:

  • rotation angle of 45° is not π radians, but π/4 radians
  • rotation with a matrix rotates around a fixed axis; for a curve, each segment must be rotated around different axis, so you have to recalculate the matrix
  • the vertex property is not supported for a long time, you either use a very old Three.js version, or you borrowed old code.