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

最新推荐文章于 2024-05-30 08:38:15 发布
置顶 最新推荐文章于 2024-05-30 08:38:15 发布
阅读量7k 收藏 10
点赞数 5
分类专栏： Blender 文章标签： webgl 可视化 unity blender
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41022370/article/details/108546909
版权

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

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

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

混合
设置a参数
但是通常在转动场景视角时发生一些模型重合的bug。比如我想在一个半透明的建筑中加个任何材质的小球。让我们可以透过这个半透明的建筑观察到这个小球。

在这里插入图片描述

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

最低0.47元/天 解锁文章
南昌摩的教父
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
blender-threejs-workflow:使用gltf格式的Blender到Three.js工作流的示例
05-12
blender-threejs-工作流程 使用gltf格式的示例Blender to Three.js工作流程使用： ThreeJS 0.110.x Webpack 4.41.x Babel 7.7.x Tween.js 18.4.x 安装 使用以下命令安装依赖项： npm install 用法 使用以下命令运行开发服务器： npm start 然后在以下位置查看本地服务器： http://localhost:8080 导出模型 确保您正在使用内置了GLTF导出功能的Blender 2.8.1： https://www.blender.org/download/ 创建场景并使用以下命令导入模型： File > Import > Choose the format 检查您的材料是否受GLFT支持： Select an object > Bottom right >
使用 Three.js的3D艺术展览
02-19
艺术家的作品通常可以通过建模工具（如Blender或Maya）创建为3D模型，然后导出为支持的格式（如GLTF或OBJ）导入到Three.js 中。每个3D模型都需要一个材质，可能包括颜色、纹理、透明度等属性，以赋予其独特的视觉...
Blender导出gltf格式ThreeJS不显示问题-
wv112406的博客
06-28 2145
ThreeJS不显示模型问题
Blender导出到Unity发现贴图缺失——5.30山大软院项目实训
最新发布
m0_63143408的博客
05-30 267
之后再重新按之前步骤导出为fbx文件（记得路径选择复制+内嵌纹理），重复之前步骤，将fbx格式的模型拖进Unity中的Models文件夹中，这时你会发现，Models下的tex文件夹中有了纹理而且模型也恢复了正常。对于这个问题，一开始以为是导出的设置问题，自习的检查了导出设置之后又尝试了一遍，发现还是不行，就去搜索了一下是什么问题，怎么解决。如果提示没有找到包就先全部打包到.blend文件再全部解包到文件，然后选择第一个使用当前目录中的文件（在必要时创建）。这样会得到一个关于贴图的文件夹。
blender透明材质
fb_help的专栏
04-13 2652
渲染透明材质 https://www.katsbits.com/codex/transparency-cycles/#basic-material
three.js学习笔记---blender导出gltf格式
weixin_43462468的博客
01-30 3560
Blender下载地址：https://www.blender.org Three.js r93 版本以后删除了 Blender json 格式的导出器-_-，官方推荐使用 glTF 格式。那就不要去纠结为什么要删除json格式的导出器了，既然官方选择了gltf，跟着官方的脚步大概率是没毛病的。 ===================================================...
three.js 加载gltf格式文件入坑总结（Blender导出gltf、gltf-pipeline压缩转Draco.gltf）
weixin_40045529的博客
09-18 7196
总结three.js加载gltf格式文件开发过程中遇到的坑 项目介绍 此项目主要是做一个三维运维机房，笔者刚接触three一个月，属于初学者。项目起始，加载模型用的FBX格式，直接引用的3D格式文件，后期发现在性能较差的笔记本上加载模型时，耗时太长（50M大小 3~5min），体验极差。后面通过查阅资料，发现three官方是推荐gltf/glb格式文件的，后面就开始研究如何载入gltf格式文件。开发过程中遇到很多问题，最后经过不懈努力终于得到解决。此次three开发经历值得记录一下。本文适合初学者阅读，对于
blender gltf文件_Blender导出带透明贴图的gltf模型
weixin_39989443的博客
12-19 1172
在Blender2.8版本以后，直接导出带透明贴图的模型为gltf，会导致模型的贴图，在展示平台中变成不透明的效果。在https://gltf-viewer.donmccurdy.com/中的效果(gltf-viewer是以three.js为基础开发的)： 正常的情况，上图显示树的效果，是那些黑色的贴图效果不显示出来，在blender中，切换到Texture Paint的场景，可以看到正常的效果。...
three.js非常强大的WegGL库
09-12
2. **3D对象加载**：three.js支持多种3D模型格式，如OBJ、FBX、GLTF等，允许开发者导入3D建模软件（如3ds Max、Blender）创建的模型，将其集成到网页中。 3. **交互性**：通过three.js，可以实现用户与3D场景的交互...
效果超棒的Webgl模型-人体肺
04-11
为了构建这个模型，开发者首先需要对人体肺部的解剖学有深入理解，然后使用建模软件（如Blender、Maya或3DS Max）创建3D模型，并将其导出为WebGL可读的格式，如OBJ或GLTF。模型可能包含多个部件，如左肺、右肺、...
效果超棒的Webgl模型-复式公寓
04-11
2. **纹理与材质**：模型中的每个物体都有自己的材质属性，包括颜色、光泽度、透明度等。纹理则用于给物体表面添加真实感，如木纹、砖石、地毯等。WebGL支持多种纹理映射，如颜色纹理、法线纹理、置换纹理等。 3. *...
3dmax导出glb，gltf显示正常插件，不会出现透明情况
11-17
3dmax导出glb，gltf显示正常插件，不会出现透明情况
Threejs中3D模型使用透明发光材质并加线框
05-06
透明发光材质是通过自定义shader实现，线框的关键代码如下： model.traverse(function(child) {     if (child.isMesh) {     child.material = customMaterial;     // 添加线框     var wireframeMaterial = new THREE.MeshBasicMaterial({color: 0x3366ff, wireframe: true, transparent: true});     var wireframe = new THREE.Mesh(child.geo
threejs中3D模型使用透明发光材质
05-02
透明发光材质边缘处颜色不透明度越高，向内不透明度逐渐降低，其着色跟视角方向强相关 代码参考了"无牙"文章。
用proctreejs和threejs创建程序化的glTF20树
08-10
用proctree.js和three.js创建程序化的glTF 2.0树
效果超棒的Webgl模型-人体牙齿
04-11
5. 编写WebGL代码：使用Three.js等库将模型整合到网页中，编写JavaScript代码控制模型的显示和交互。 在压缩包内的“人体牙齿”文件可能是包含了模型数据的JSON文件、纹理图像和其他资源。为了在网页中使用，我们...
关于blender导出gltf格式，无法显示材质的问题。
热门推荐
weixin_43539313的博客
04-15 1万+
关于blender导出gltf格式，无法显示材质的问题。
Blender导出gltf设置半透明材质
u014291990的博客
03-21 1159
本节课继续上街内容讲解，通过Blender设置模型材质透明相关属性，threejs加载gltf，gltf模型默认实现如下材质的半透明效果。上面材质设置好以后，导出glb模型，使用上节课代码测试，你会发现Blender绘制的立方体和下面代码立方体一样具有透明效果。回顾：上节课给大家演示了Blender创建一个模型，设置材质颜色，并导出gltf，最后threejs加载。相当于threejs材质里面设置。提醒：不同版本Blender交互界面可能有差异，但是整体思路都一样。Blender材质设置。
three.js设置gltf模型透明时失效
weixin_52047574的博客
08-08 517
three.js官方文档说alphaTest属性的含义如下：设置运行alphaTest时要使用的alpha值。如果不透明度低于此值，则不会渲染材质。但问题是在未加设置alpahTest时，默认值为0的话，不透明度显然是大于它的，应该正常渲染啊，结果却并未渲染。
blender导出gltf不透明度材质丢失
07-08
如果你在Blender中导出GLTF文件时遇到了材质丢失的问题，请尝试以下解决方法： 1. 确保你的模型使用了正确的材质节点。在Blender中选择你的模型，进入材质选项卡（Material tab）。 2. 检查材质节点是否正确连接到模型的表面。确保使用了正确的材质输出节点，并且它连接到了模型的表面输入节点。 3. 确保你的材质节点设置正确。在节点编辑器中，检查每个节点的属性和连接，确保它们与你的预期一致。 4. 确保你的材质使用了正确的纹理。如果你在模型中使用了纹理，确保它们被正确地链接到材质节点中。 5. 在导出选项中选择GLTF格式。在导出对话框中选择GLTF格式，并确保选择了正确的选项。 如果你仍然遇到材质丢失的问题，可能需要进一步检查和调试你的模型和材质设置。你可以尝试在Blender中渲染预览来查看材质是否正常显示。另外，也可以尝试使用其他文件格式进行导出，以确定是否是GLTF导出时的特定问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值