threejs---同一页面多个模型之间的切换(基于vue)

使用场景:

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...       
      }
    }	

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值