three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型

概述：

现在有一个从3dmax导出的gltf模型，贴图方式是透明贴图，想要用three.js加载显示出来，但是在gltf Viewer中预览时是不支持透明贴图的，不知道是不是模型的问题，从网上查了很多文章，最后才试出来解决办法。

一、模型

首先看一下在https://gltf-viewer.donmccurdy.com/上预览的效果，直接上图：

二、下载源码，本地运行

下载它的源码，https://github.com/donmccurdy/three-gltf-viewer，在本地运行起来，vscode打开，改一下src目录下的viewer.js文件中的代码，在traverseMaterials函数中增加下面两句：

material.alphaTest = 0.1;
material.depthWrite = false;

三、效果对比

然后重新预览该gltf模型，效果如下图，算是勉强达到了想要的效果。

找到该解决办法的过程中参考了文章：

https://blog.l0v0.com/posts/50589.html

https://www.manongdao.com/article-1036373.html

three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型相关推荐

three.js加载和使用纹理-设置material.bumpMap属性使用凹凸贴图创建皱纹(vue中使用three.js74)
使用凹凸贴图创建皱纹 1.demo效果 2. 实现要点 2.1 创建地板 2.2 创建凹凸贴图的物体 2.3 创建普通贴图的物体 3. demo代码 1.demo效果 2. 实现要点 2.1 创建地板 ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...
three.js加载OBJ模型
three.js加载OBJ模型推荐一个免费下载3D模型的网址https://www.cgtrader.com,包含多种格式(obj, mtl等). three.js现在是es6语法,旧版本是es5的 ...
Three.js加载.stl格式模型
.stl格式模型加载本文是Three.js电子书的14.2节基本所有的三维软件都支持导出.stl格式的三维模型文件,.stl格式的三维模型不包含材质Material信息,只包含几何体顶点数据的信息 ...
vue+three.js加载本地stl模型无法显示的解决办法
先放代码 <template><div><div id="container"></div></div> </te ...
three相机在模型上_Three.js加载外部模型的教程详细解说
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 ...
three.js 加载gltf模型的简化demo
目录前言下载依赖改造插件主要代码效果前言最近需要做一个three.js加载三维模型的,才发现three.js的官网和网上的示例挺乱的.甚至有人说把three.js的全部demo下载下来, ...
关于three.js加载blender导出gltf格式模型动画要点
研究过一次加载动画后导入three.js场景不执行动画,故此记录原因. 我判断两个方面影响动画生成,一.blender导出模型未生成动画通道二.代码原因未执行一.blender 制作动画后应在动画 ...

three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型

概述：

一、模型

二、下载源码，本地运行

三、效果对比

three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型相关推荐

最新文章

热门文章