0

Using Threejs, I want to create a tube between two points that have x, y, z coordinates. I don't want to rely on some equation to generate points for a fancy curve. This documentation confuses me. I have scoured the Web for examples; no luck. I have experiment to no avail. For one thing, I don't understand the relationship between the points that I want to provide and the parameter 10 used here: const path = new CustomSinCurve( 10 ); Can you have a tube without having a curve? Much obliged for any help!

Scott Pendleton
  • 1,021
  • 3
  • 16
  • 32
  • The 10 seems to be the scale of that particular curve (try different values to see the effects). Note that the function you want to use needs a path (the curve), the tube beeing extruded along it. So you first need to figure out how to create a 3d curve connecting the two points you want and then pass that curve as the path. – Bob__ Apr 12 '23 at 22:26
  • Related: https://stackoverflow.com/questions/40348802/aligning-a-cylinder-to-a-vector – WestLangley Apr 12 '23 at 22:50
  • A tube without a curve? Do you mean [a cylinder](https://threejs.org/docs/?q=Cylinder#api/en/geometries/CylinderGeometry)? – M - Apr 12 '23 at 23:51
  • Have a look: https://discourse.threejs.org/t/how-to-update-the-endpoints-of-a-cylinder/49853/3 – prisoner849 Apr 13 '23 at 06:56
  • Trouble with a cylinder is that it is generated by specifying its dimensions, whereas I have starting and ending coordinates (x, y, z). I'm going to withdraw this question and state my actual goal: I need to model pipes that curve in all different directions, and I have anywhere from 20 to 200 coordinates defining the path of the pipe. I have passed all those coordinates into a constructor for a THREE.Line successfully, but I don't want a line. When you zoom in on a line, it doesn't get bigger. I need a tube, but I don't see how to pass it my list of coordinates. – Scott Pendleton Apr 13 '23 at 14:16
  • Use Fat Lines then: https://threejs.org/examples/?q=fat#webgl_lines_fat – prisoner849 Apr 13 '23 at 14:51
  • Fat Lines are definitely an improvement. Yet, despite your example's origination on the threejs.org website, I can find no documentation nor mention of fat lines. Because the example is loaded from an iFrame, I can't view the source code that generates the fat lines. – Scott Pendleton Apr 13 '23 at 17:41
  • This three-year-old post https://discourse.threejs.org/t/import-line2-linegeometry-and-linematerial/13570 indicates that fat lines require additional js files. Instead of going that route, I want to return to my original plan to use a tube. What I need is example code for feeding an array of coordinates into a tube constructor. – Scott Pendleton Apr 13 '23 at 17:53
  • Maybe you’re looking for a spline? https://threejs.org/examples/?q=spline#webgl_geometry_extrude_splines – M - Apr 14 '23 at 07:54

1 Answers1

0

Here is the code that solved the problem:

for (var i = 0; i < MyXYXarray.length; i++) {
    aPoints.push(new THREE.Vector3(MyXYXarray[i][0], MyXYXarray[i][1], MyXYXarray[i][2]));
}
const pipeSpline = new THREE.CatmullRomCurve3(aPoints);
const tubeGeometry = new THREE.TubeGeometry(pipeSpline, 100, 25, 10, false);
const wireframeMaterial = new THREE.MeshBasicMaterial({ color: 0x99ccff, opacity: 1, wireframe: true, transparent: true });
var mesh = new THREE.Mesh(tubeGeometry, wireframeMaterial);
mesh.scale.set(params.scale, params.scale, params.scale);
var parent = new THREE.Object3D();
parent.add(mesh);
var scene.add(parent);
Scott Pendleton
  • 1,021
  • 3
  • 16
  • 32