解决在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)
猿导航
阅读排行榜
- 1vue和el-table使用经验-如何刷新表格数据10888
- 2three.js加载3D瓦片和3dtiles数据生成交互式地图的开源项目9453
- 3Microsoft Visual C++ Redistributable是什么,有什么作用?7183
- 4mybatis使用经验——mybatis-spring-boot-starter和mybatis的版本对应关系表(持续更新~)5761
- 5uni-app使用经验—vue页面和html页面如何互相调用接口并传参5438
- 6Spring学习经验—@ResponseBody注解的使用说明4847
- 7Intellij IDEA下的版本控制VCS的启用与关闭4792
- 8Druid异常解决经验—java.sql.SQLException url not set4467
- 9如何用批处理命令(bat脚本)启动和停止windows服务4232
- 10nuxt.js项目中如何添加和使用全局变量4099
- 11解决SpringBoot使用maven下载不了jar包的问题3453
- 12linux中解压tar.gz文件报错“gzip: stdin: invalid compressed data--format violated”3347
- 13nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数3207
- 14在Nuxt.js项目的head中引用外部js文件3044
- 15在NVIDIA控制面板设置参数时提示“拒绝访问 无法应用选定的设置到您的系统”的解决方法之一3021