how to create a tetrahedron by using Cesium.Geometry

CesiumJS
1

I read the tutorial , but there is an error!
var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    var ellipsoid = viewer.scene.globe.ellipsoid;

    var negativeRootTwoOverThree = -Math.sqrt(2.0) / 3.0;
    var negativeOneThird = -1.0 / 3.0;
    var rootSixOverThree = Math.sqrt(6.0) / 3.0;

    var positions = new Float64Array(4 * 3);

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

    // position 1
    positions[3] = 0.0;
    positions[4] = (2.0 * Math.sqrt(2.0)) / 3.0;
    positions[5] = negativeOneThird;

    // position 2
    positions[6] = -rootSixOverThree;
    positions[7] = negativeRootTwoOverThree;
    positions[8] = negativeOneThird;

    // position 3
    positions[9] = rootSixOverThree;
    positions[10] = negativeRootTwoOverThree;
    positions[11] = negativeOneThird;

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

    var indices = new Uint16Array(4 * 3);

    // back triangle
    indices[0] = 0;
    indices[1] = 1;
    indices[2] = 2;

    // left triangle
    indices[3] = 0;
    indices[4] = 2;
    indices[5] = 3;

    // right triangle
    indices[6] = 0;
    indices[7] = 3;
    indices[8] = 1;

    // bottom triangle
    indices[9] = 2;
    indices[10] = 1;
    indices[11] = 3;
    var c1 = new Cesium.Matrix4();
    var c2 = new Cesium.Matrix4();
   
    var modelMatrix = Cesium.Matrix4.multiplyByUniformScale(
        Cesium.Matrix4.multiplyByTranslation(
            Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoid.cartographicToCartesian(
                Cesium.Cartographic.fromDegrees(-100.0, 40.0))),
            new Cesium.Cartesian3(0, 0, 20000.0),c1),
        50000.0,c2);

    var instance = new Cesium.GeometryInstance({
        geometry: new Cesium.Geometry({
            attributes: attributes,
            indices: indices,
            primitiveType: Cesium.PrimitiveType.TRIANGLES
        }),
        modelMatrix: modelMatrix ,
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)
        }
    });

    scene.primitives.add(new Cesium.Primitive({
        geometryInstances: [instance],
        appearance: new Cesium.Appearance({
            material:Cesium.Material.fromType("Color")
        })
    }));

throw an error :
An error occurred while rendering. Rendering has stopped.
TypeError: Cannot read property 'center' of undefined
TypeError: Cannot read property 'center' of undefined
    at q (http://localhost:63342/nodePricatice/Build/Cesium/Cesium.js:443:23350)
    at N.update (http://localhost:63342/nodePricatice/Build/Cesium/Cesium.js:443:30709)
    at a.update (http://localhost:63342/nodePricatice/Build/Cesium/Cesium.js:467:9294)
    at Ue (http://localhost:63342/nodePricatice/Build/Cesium/Cesium.js:470:16409)
    at Ve (http://localhost:63342/nodePricatice/Build/Cesium/Cesium.js:470:15333)
    at Fe (http://localhost:63342/nodePricatice/Build/Cesium/Cesium.js:470:13293)

how can I deal with this problem?

2

Hello,

Sorry, that tutorial was never published and the code samples are out of date. The geometry needs a bounding sphere and I think the appearance is invalid.

See the box geometry code for how to create a geometry: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Core/BoxGeometry.js#L838

And see this demo for creating a primitive with that geometry: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Apps/Sandcastle/gallery/development/Box.html#L59-L64

Best,

Hannah