threejs---同一页面多个模型之间的切换（基于vue）_three.js点击模型进入另一个场景

使用场景：

1、由厂区外部切换到厂区内部
2、左侧切换模型，右侧进行不同模型的预览

实现逻辑：

1、先清空当前scene下的所有children
2、清空canvas画布
3、重置变量
4、重新初始化场景，向scene添加新的children

具体代码：

	
methods:
	
    refresh(){
    //1、清空旧的scene下的children
    this.clearModel()
	//2、重新初始化场景，加载新的模型场景
	 this.init()
    },
    clearModel () {
      if (this.scene !== null && this.scene.children.length > 3) {
        this.scene.children.pop()
        // 必须要清空当前div下的canvas不然canvas会继续叠加
        const domDiv = document.getElementById('canvas')
        if (domDiv !== null) {
          domDiv.removeChild(domDiv.firstChild)
        }
        ...重置相关data变量，例如camera，light...       
      }
    }	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21