Camera will not zoom through primitive

CesiumJS
1

I’ve created a large rectangle primitive covering some terrain at 3000m with:

             var image = viewer.scene.primitives.add(new Cesium.Primitive({
                    geometryInstances : new Cesium.GeometryInstance({
                        geometry : new Cesium.RectangleGeometry({
                            rectangle : Cesium.Rectangle.fromDegrees(w, s, e, n),
                            vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
                            height: h
                        })
                    }),
                    appearance : new Cesium.EllipsoidSurfaceAppearance({
                        aboveGround : false,
                        material: new Cesium.Material({
                            fabric: {
                                type: 'Image',
                                uniforms: {
                                    image: 'data:image/png;base64,' + command.data,
                                }
                            }
                        })
                    })
                }));

However, it seems the camera will not zoom through this from above. If I create an entity, instead of a primitive, then the camera will zoom through that.

Would someone be able to tell me how I can allow the camera to zoom through a primitive? I presume there’s an attribute that needs setting, but have searched through the docs and examples, and can’t find it.

(I need to use a primitive rather than an entity, to work around another issue)

Thanks.

2

It appears whether the camera will be able to zoom through an entity or primitive, depends on its material.

For a rectangle entity that has a uniform colour, it depends on the alpha channel value. If it’s 1:

material: Cesium.Color.RED.withAlpha(1),

The camera will not zoom through it. For values lower than 1 it will.

For entities that use textures, it’s not the alpha channel in the texture that matters, but the ‘transparent’ property of the material needs to be set to true:

material: new Cesium.ImageMaterialProperty({
    image:  "../images/Cesium_Logo_Color.jpg",
    transparent: true
}),

For primitives with textures, the ‘translucent’ property needs to be true:

material: new Cesium.Material({
        fabric: {
            type: 'Image',
            uniforms: {
                image: "../images/Cesium_Logo_Color.jpg",
            },                
        },
        translucent: true
    })
3

Hi @srce! Thanks for the input - this is great guidance.