diff --git a/demo/index.html b/demo/index.html
index 56b3f76..7ce619b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -93,6 +93,7 @@ <h1>maptalks.three plugin Demos</h1>
     <!-- <li><a href="spotlight.html">spotlight</a></li> -->
     <!-- <li><a href="shadow.html">shadow</a></li> -->
     <!-- <li><a href="vue-keep-alive.html">vue-keep-alive</a></li> -->
+    <li><a href="layer-add-remove.html">layer-add-remove</a></li>
     <li><a href="mesh-dispose.html">mesh dispose</a></li>
     <li><a href="layer-dispose.html">layer dispose</a></li>
   </ul>
diff --git a/demo/layer-add-remove.html b/demo/layer-add-remove.html
new file mode 100644
index 0000000..4992801
--- /dev/null
+++ b/demo/layer-add-remove.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>osm buildings demo</title>
+    <script type="text/javascript" src="https://unpkg.com/dat.gui@0.7.6/build/dat.gui.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
+    <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/@maptalks/gl/dist/maptalksgl.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/maptalks.three@latest/dist/maptalks.three.js"></script>
+    <script type="text/javascript" src="buildings.js"></script>
+    <style>
+        html,
+        body {
+            margin: 0px;
+            height: 100%;
+            width: 100%;
+        }
+
+        #map {
+            width: 100%;
+            height: 100%;
+            /* background-color: #000; */
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+    <script>
+
+        var map = new maptalks.Map("map", {
+            center: [13.415118329414781, 52.53001062340084],
+            zoom: 16,
+            pitch: 70,
+            // bearing: 180,
+
+            centerCross: true,
+            doubleClickZoom: false,
+            baseLayer: new maptalks.TileLayer('tile', {
+                urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
+                subdomains: ['a', 'b', 'c', 'd'],
+                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
+            })
+        });
+
+        // features to draw
+        var features = [];
+
+        buildings.forEach(function (b) {
+            features = features.concat(b.features);
+        });
+
+        // the ThreeLayer to draw buildings
+        var threeLayer = new maptalks.ThreeLayer('t', {
+            forceRenderOnMoving: true,
+            forceRenderOnRotating: true
+            // animation: true
+        });
+
+        var meshs = [];
+        var material = new THREE.MeshLambertMaterial({ color: '#fff', transparent: true });
+        var highlightmaterial = new THREE.MeshBasicMaterial({ color: 'yellow', transparent: true });
+        threeLayer.prepareToDraw = function (gl, scene, camera) {
+            var light = new THREE.DirectionalLight(0xffffff);
+            light.position.set(0, -10, 10).normalize();
+            scene.add(light);
+            scene.add(new THREE.AmbientLight('#fff', 0.2));
+            console.log('init');
+            if (this._inited) {
+                return;
+            }
+            addBuilding();
+            initGui();
+            threeLayer.config('animation', true);
+            this._inited = true;
+        };
+
+        const sceneConfig = {
+            postProcess: {
+                enable: true,
+                antialias: { enable: true }
+            }
+        };
+        const groupLayer = new maptalks.GroupGLLayer('group', [threeLayer], { sceneConfig });
+        groupLayer.addTo(map);
+
+        function addBuilding() {
+
+            // var material = new THREE.MeshBasicMaterial({ color: '#3e35cf' });
+            // material.vertexColors = THREE.VertexColors;
+            features.forEach(function (g) {
+                var heightPerLevel = 10;
+                var levels = g.properties.levels || 1;
+                var mesh = threeLayer.toExtrudePolygon(maptalks.GeoJSON.toGeometry(g), {
+                    height: levels * heightPerLevel,
+                    topColor: '#fff',
+                    asynchronous: true
+                }, material);
+
+                //tooltip test
+                mesh.setToolTip(levels * heightPerLevel, {
+                    showTimeout: 0,
+                    eventsPropagation: true,
+                    dx: 10
+                });
+
+                //infowindow test
+                mesh.setInfoWindow({
+                    content: 'hello world,height:' + levels * heightPerLevel,
+                    title: 'message',
+                    animationDuration: 0,
+                    autoOpenOn: false
+                });
+
+                // mesh.getInfoWindow().addTo(map);
+
+                //event test
+                ['click', 'mousemove', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'].forEach(function (eventType) {
+                    mesh.on(eventType, function (e) {
+                        console.log(e.type, e);
+                        // console.log(this);
+                        if (e.type === 'mouseout') {
+                            this.setSymbol(material);
+                        }
+                        if (e.type === 'mouseover') {
+                            this.setSymbol(highlightmaterial);
+                        }
+                    });
+                });
+                meshs.push(mesh);
+            });
+            threeLayer.addMesh(meshs);
+        }
+
+
+        function initGui() {
+            var params = {
+                add: true,
+                color: material.color.getStyle(),
+                show: true,
+                opacity: 1,
+                altitude: 0,
+                'remove-add-layer': function () {
+                    threeLayer.remove();
+                    setTimeout(() => {
+                        threeLayer.addTo(groupLayer);
+                    }, 1000);
+                }
+            };
+            var gui = new dat.GUI();
+            gui.add(params, 'add').onChange(function () {
+                if (params.add) {
+                    threeLayer.addMesh(meshs);
+                } else {
+                    threeLayer.removeMesh(meshs);
+                }
+            });
+            gui.addColor(params, 'color').name('building color').onChange(function () {
+                material.color.set(params.color);
+                meshs.forEach(function (mesh) {
+                    mesh.setSymbol(material);
+                });
+            });
+            gui.add(params, 'opacity', 0, 1).onChange(function () {
+                material.opacity = params.opacity;
+                meshs.forEach(function (mesh) {
+                    mesh.setSymbol(material);
+                });
+            });
+            gui.add(params, 'show').onChange(function () {
+                meshs.forEach(function (mesh) {
+                    if (params.show) {
+                        mesh.show();
+                    } else {
+                        mesh.hide();
+                    }
+                });
+            });
+            gui.add(params, 'altitude', 0, 300).onChange(function () {
+                meshs.forEach(function (mesh) {
+                    mesh.setAltitude(params.altitude);
+                });
+            });
+            gui.add(params, 'remove-add-layer');
+        }
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 67f2f9b..a80c1e3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -130,6 +130,7 @@ class ThreeLayer extends maptalks.CanvasLayer {
     _identifyBaseObjectEventsThis: Function;
     _zoomendThis: Function;
     _emptyIdentifyThis: Function;
+    _meshes: Array<BaseObject | THREE.Object3D> = [];
 
     constructor(id: string, options: BaseLayerOptionType) {
         super(id, options);
@@ -707,6 +708,7 @@ class ThreeLayer extends maptalks.CanvasLayer {
                 }
             }
         }
+        this._meshes = [];
         return this;
     }
 
@@ -826,6 +828,10 @@ class ThreeLayer extends maptalks.CanvasLayer {
             } else if (mesh instanceof THREE.Object3D) {
                 scene.add(mesh);
             }
+            const index = this._meshes.indexOf(mesh);
+            if (index === -1) {
+                this._meshes.push(mesh);
+            }
         });
         this._zoomend();
         if (render) {
@@ -871,6 +877,15 @@ class ThreeLayer extends maptalks.CanvasLayer {
             } else if (mesh instanceof THREE.Object3D) {
                 scene.remove(mesh);
             }
+            for (let i = 0, len = this._meshes.length; i < len; i++) {
+                const object3d = this._meshes[i];
+                if (!object3d) {
+                    continue;
+                }
+                if (object3d === mesh) {
+                    this._meshes.splice(i, 1);
+                }
+            }
         });
         if (render) {
             const renderer = this._getRenderer();
@@ -1372,6 +1387,11 @@ class ThreeLayer extends maptalks.CanvasLayer {
         return this;
     }
 
+    _addBaseObjectsWhenInit() {
+        this.addMesh(this._meshes);
+        return this;
+    }
+
     _callbackBaseObjectAnimation() {
         const layer = this;
         if (layer._animationBaseObjectMap) {
@@ -1474,6 +1494,7 @@ class ThreeRenderer extends maptalks.renderer.CanvasLayerRenderer {
         scene.add(camera);
         this.pick = new GPUPick(this.layer);
         BaseObjectTaskManager.star();
+        this.layer._addBaseObjectsWhenInit();
     }
 
     onCanvasCreate() {
