How can i generate a tube along a list of points?

[linze99]

I have a list of points, which has the format of [lng, lat, altitude]; how can i generate a tube object with passing the list to the Threebox plugin?

[jscastro76]

Check out this example on how to generate a tube on Threebox. You only have to provide a list of coordinates as param

[linze99]

thanks alot, I have tried this example. this is my testing data:

const trace = [
      [-122.266637, 37.831245, 5],
      [-122.26672, 37.830865, 5],
      [-122.26672, 37.830865, 10],
      [-122.266969, 37.829645, 10],
    ];

this is the lines i drawed in mapbox.

but when i pass the data to threebox plugin.

var origin = [-122.266551, 37.831691, 0];
var lineGeometry = trace.map((f) => [f[0], f[1], f[2] / 10]);
map.addLayer({
        id: "custom_layer",
        type: "custom",
        renderingMode: "3d",
        onAdd: function (map, mbxContext) {
          // instantiate threebox
          window.tb = new Threebox(map, mbxContext, {
            defaultLights: true,
            enableSelectingObjects: true, //change this to false to disable 3D objects selection
            enableDraggingObjects: true, //change this to false to disable 3D objects drag & move once selected
            enableRotatingObjects: true, //change this to false to disable 3D objects rotation once selected
            enableTooltips: true, // change this to false to disable default tooltips on fill-extrusion and 3D models
          });

          var tubeOptions = {
            geometry: lineGeometry,
            radius: 0.05,
            sides: 8,
            material: "MeshPhysicalMaterial",
            color: "#00ffff",
            anchor: "center",
            side: THREE.DoubleSide,
          };

          let tube = tb.tube(tubeOptions);
          tube.setCoords(origin);
          // tube.material.wireframe = true
          tb.add(tube);
        },

        render: function (gl, matrix) {
          tb.update();
        },
      });

I saw the tube below:

Check out this example on how to generate a tube on Threebox. You only have to provide a list of coordinates as param

[linze99]

I'm checking out this example, and use the same data of tube object to draw a line on mapbox.

var lineGeometry = [];
for (var l = 0; l<200; l++) {
    var delta = [
        Math.sin(l/5) * l/40, 
        Math.cos(l/5) * l/40, 
        l * 1000
    ]
    var newCoordinate = origin.map(function(d,i){
        return d + delta[i]
    })
    lineGeometry.push(newCoordinate)
}

this is the line drawed on mapbox

Check out this example on how to generate a tube on Threebox. You only have to provide a list of coordinates as param

[linze99]

Check out this example on how to generate a tube on Threebox. You only have to provide a list of coordinates as param

Do you have any suggestions? Thanks for your help