vue-three 日常记录 人员定位/模型动态实时移动/前后端分离/websocket/前端vue-three/解决内存占用大的问题

由于项目需要做一个人员定位的系统，最后采取的Django的后端框架，前端的VUE框架，前后端分离，通讯用的websocket。前端三维模型的展示用的three

注：以下是我的思路，现在可以实现，如有问题或者改进，欢迎提问。
以下内容只是我前端模型动态移动的代码和思路

定义一个函数为加载模型的函数。记住一定要mesh放置在group中，这是为了后面移除的时候方便
加载模型函数

loaddog(){
        this.group1=new THREE.Group()//添加一个组，group为全局变量
        var loader = new GLTFLoader();
        loader.load("/static/model/Duck/dog/dog.gltf", (gltf) => {
         this.group1.add(gltf.scene)
         this.group1.scale.set(20,20,20)
         this.group1.position.set(0,0,0)
         this.scene.add(this.group1) 
        /* 
        this.meshc = gltf.scene;
        this.meshc.position.set(this.positions[0],0,this.positions[1])//模型的坐标位置
        this.scene.add(this.meshc);
        this.meshc.scale.set(20, 20, 20);//模型的拉伸 
       */
       }); 
    },

监听坐标的变化

watch:{
       positions: {
      handler(newVal, oldVal) {
        console.log('1',newVal);
        console.log(oldVal);
        //console.log('1',this.renderer.info)
        this.scene.remove(this.group1)
        // 删除掉所有的模型组内的mesh
        this.group1.traverse(function (item) {
            if (item instanceof THREE.Mesh) {
                item.geometry.dispose(); // 删除几何体
                item.material.dispose(); // 删除材质
                item=null
            }
        });
        this.scene.add(this.group1)       
        this.group1.position.set(oldVal[0],0,oldVal[1])
        this.group1.lookAt(newVal[0],0,newVal[1])    
      }
    },
  },

其中positions为后端发到前端的坐标，形式为[‘x’,‘y’]
其中最重要的是为删除掉所有的模型组内的mesh。