three.jspathgeometrycatmull-rom-curve

How to connect two points with a tube in threejs?


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!


Solution

  • 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);