Blender导出GLTF格式模型之后在three.js场景中出现的材质透明度问题解决

时间:2024-04-05 08:13:16

Blender导出GLTF格式模型之后透明材质的遮挡问题如何解决

当使用blender输出完glb模型格式完了之后在放到前端可视化页面的时候 通常会有很多的小问题得不到解决。在此我想分享一点点小的经验,如果处理这些小小的bug。

当模型材质为透明的时候,我们最简单的方法就是用默认的节点原理化BSDF设置一个材质的混合模式Alpha混合,然后再通过颜色的RGBA中的A参数调整透明等级。如下图:

Blender导出GLTF格式模型之后在three.js场景中出现的材质透明度问题解决
Blender导出GLTF格式模型之后在three.js场景中出现的材质透明度问题解决
但是通常在转动场景视角时发生一些模型重合的bug。比如我想在一个半透明的建筑中加个任何材质的小球。让我们可以透过这个半透明的建筑观察到这个小球。

Blender导出GLTF格式模型之后在three.js场景中出现的材质透明度问题解决

当导入场景之后,移动视角,就会发现这个 小球的材质会有一个的小的透明度的转变。如果想要修复这个小bug,可以考虑 将小球合并到 建筑物里面去(ctrl+j)变成一个整体的meshes导出之后 这个bug就可以了。(在这里说明一个小小的细节 合并的先后顺序也会影响出不同的透明度效果,如果合并完了之后的效果你满意可以尝试,另一种方法:比如你之前是将A物体合并到B物体上,之后你可以尝试将B物体合并到A物体上,会有不同的透明度遮罩效果)

但是如果 这个小球是需要动画的,就要麻烦一点点。如果直接合并 建筑物 和小球(加了动画),要不就是小球的动画直接应用到合并之后的建筑物,要不就是动画消失。

所以首先第一步 创造一个小球+材质 不加动画,然后合并到建筑里面,之后按键盘上的 tab 进入编辑模式,用选边的方法把小球给拆分下来,成为另外一个部分,然后再给小球增加一个动画再导出
如下图
Blender导出GLTF格式模型之后在three.js场景中出现的材质透明度问题解决
最后的效果展示如下,无论怎么移动屏幕视角 透明度始终不变

Blender导出GLTF格式模型之后在three.js场景中出现的材质透明度问题解决