解决在element-ui标签页组件el-tab中的div中渲染three.js三维场景失败的问题

分类:计算机 | 三维开发 | 基础理论 | 综合 809
更新:2022-06-29 19:09:50
编辑

1 异常描述

项目中需要在一个element-ui标签页组(有3个标签页)的第3个标签页的一个div元素中渲染一个three.js的三维场景,但是按照three.js在div容器中的渲染流程加载了以后发现三维场景没有正常地渲染出来,本来应该是渲染到指定的div中,但是却渲染到了其它位置,如图所示:

2 异常分析

因为要渲染的div元素在element-ui标签页组的第3个标签页中,而我们是html页面初始化的时候就执行了three.js三维场景的渲染操作,这个时候div元素应该还没有加载到html页面中(因为还没有打开第3个标签页),所以导致了three.js三维场景不能在指定的div中渲染出来。

3 异常解决

可以在点击tab页面时再去渲染three.js的三维场景,同时为了保证在点击tab页面的时候它里面的div元素能够完全展示出来,所以可以给三维场景设置适当的一个渲染延时,代码如下:

//tab页面的点击事件
handleClick(tab, event){
    var that=this;
    console.log('选中的tab页面:'+tab.label);
    if(tab.label=='三维'){
        setTimeout(()=>{
            that.initSmallScene3d(); //在tab页面的div中渲染三维场景的操作
        },5); //适当的延时
    }
}

补充:对于echarts图表在div元素中渲染可能也会遇到同样的问题,也可以试着用上面的方法解决(相关文章:https://wenku.baidu.com/view/dc76222aa5c30c22590102020740be1e650eccc4.html)