CODEWITHSUNDEEP
javascriptthree.js
Sergey Kraev
Sergey Kraev

Reputation: 148

How to rotate THREE.TubeGeometry segments?

I've created a flat THREE.TubeGeometry with radiusSegments = 2, which when added to the scene is perpendicular to the ground:

enter image description here

Is it possible to rotate each tube segment so that they would be parallel to the ground?

JSFiddle example.

var points = [];
for (var i = 0; i < 5; i++) {
   var randomY = i*5/2*10 + -50;
   var randomX = 15*Math.sin(5*i);
   points.push(new THREE.Vector3(randomX, randomY, 0));
}
var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), 64, 6, 2, false);
tubeMesh = createMesh(tubeGeometry);
scene.add(tubeMesh);

Upvotes: 0

Views: 405

Answers (1)

juagicre
juagicre

Reputation: 1074

My recommendation for you is to use a custom flat geometry (not the TubeGeometry!) and calculate the vertices where you want them to be (not to rotate!).

Methodology to get your geometry is something like:

  1. Create random points (here some math is needed in order to have them where you want them to be, but this is the funny part!)
  2. Get spline points from each curve
  3. Triangulate over them

If you decide to go forward with your code here the change to have it parallel to the plane. Add to generateTube function, after the tubeMesh creation:

tubeMesh.rotateY(Math.PI/2);

Upvotes: 1

Related Questions