cesium之添加Primitive大量長方體

cesium之添加Primitive大量長方體

 場景：

變成中發現頁面用peimitive加載上萬個長方體柱子會出現頁面很卡的問題。

原因：

每創建一個長方體用viewer.scene.primitives.add(new Cesium.Primitive())加載一次。

解決方法：

將所有的柱子創建口，放在同一個geometryInstances中取加載。

代碼：

// 創建長方體對象
            const extrudedPolygon = new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(
                    Cesium.Cartesian3.fromDegreesArray([
                        112.41726298378288,23.290411251106182,113.67072522399741,23.560312361463682,
                        114.09370956893551,22.590768298743153,112.83803246418894,22.285610818885644,
                    ])
                ),
                extrudedHeight: 100000,
            })
            const instance = new Cesium.GeometryInstance({
                geometry: extrudedPolygon,
                id: 'box with height',
            })
            const extrudedPolygon2 = new Cesium.PolygonGeometry({
                polygonHierarchy: new Cesium.PolygonHierarchy(
                    Cesium.Cartesian3.fromDegreesArray([
                        114, 22,115,22,
                        115,23,114,23,
                    ])
                ),
                extrudedHeight: 100000,
            })
            const instance2 = new Cesium.GeometryInstance({
                geometry: extrudedPolygon2,
                id: 'box with height',
            })
            // 創建材質，在MaterialAppearance中若不添加基礎材質，模型將會透明
            var material = new Cesium.Material.fromType("Color");
                material.uniforms.color =  Cesium.Color.WHITE;
            // 自定義材質
            const aper = new Cesium.MaterialAppearance({
                material: material,
                translucent: true,
                closed: true,
            })
            // 加載模型
            var p = viewer.scene.primitives.add(
                new Cesium.Primitive({
                    geometryInstances: [instance, instance2],
                    appearance: aper,
                    releaseGeometryInstances: false,
                    compressVertices: false,
                })
            )

 

 

鑽研不易，轉載請註明出處。。。。。。