How to define the width of a custom geometry?

CesiumJS
1

Hello,

I am trying to show a 3D vector in Cesium. So, i define this custom geometry:

    var lineGeometry = function() {

        var positions = new Float64Array(2 * 3);

        // position 0
        positions[0] = 0.0;
        positions[1] = 0.0;
        positions[2] = 0.0;

        // position 1
        positions[3] = 1.0;
        positions[4] = 1.0;
        positions[5] = 1.0;

        var attributes = new Cesium.GeometryAttributes({
            position : new Cesium.GeometryAttribute({
                componentDatatype : Cesium.ComponentDatatype.DOUBLE,
                componentsPerAttribute : 3,
                values : positions
            })
        });

        var indices = new Uint16Array(1 * 2);

        indices[0] = 0;
        indices[1] = 1;

        this.attributes = attributes;
        this.indices = indices;
        this.primitiveType = Cesium.PrimitiveType.LINES;
        this.boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.ZERO, 1.0);
    };

How can i define the width?

2

This sounds like it should be simple, but it fundamentally is not. What does it mean to render a “thick” line in 3D? What does that look like? Lines are by definition 1 dimensional, so giving them an extra thickness involves creating some sort of geometry to represent it, often it’s a cylinder, which you can readily create with CesiumJS’s API (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Cylinders%20and%20Cones.html).

If you just want to display a 3D vector, I think it might be easier to just use a polyline:

See specifically the one with the PolylineArrowMaterialProperty. Polylines can take a width because they are polygon-lines, which can be made of an arbitrary in arbitrary sizes.

Let me know if that helps! What kind of application are you building with Cesium?