专栏首页acoolgiser_zhuanlanthree.js 加载透明贴图模型不正常显示的问题,渲染透明贴图gltf模型

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在页面极速渲染3D模型

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 朋友们,还记得 QQ 20 周年 H5 中可可爱爱的太空鹅吗? ? 为了实现...

    腾讯ISUX
  • Three.js - 走进3D的奇妙世界

    随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的...

    宜信技术学院
  • Three.js - 走进3D的奇妙世界

    随着人们对用户体验越来越重视,Web开发已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库,它的...

    用户7118204
  • 干货 | 2D+1D | vivo官网Web 3D应用开发与实战

    在近20年的前端发展史中,前端经历了铁器时代(小前端),信息时代(大前端)以至现在的全能前端时代。经历了几个时代的沉淀之后,前端领域开始更加细分。

    CloudBest
  • 2D+1D | vivo官网Web 3D应用开发与实战

    在近20年的前端发展史中,前端经历了铁器时代(小前端),信息时代(大前端)以至现在的全能前端时代。经历了几个时代的沉淀之后,前端领域开始更加细分。

    2020labs小助手
  • Three.js的入门案例(上)

    在Three.js的赋能下,WEB网页效果逐渐丰富起来,今天我们就来运用之前学习的Three.js基础知识,实现一个旋转的几何体-球体。

    前端达人
  • 颜值即正义!这几个库颠覆你对数据交互的想象

    作为一个对UI和动画敏感的切图仔,在日常开发之余,也会关注一些贼好看的图表库和插件。

    前端劝退师
  • LayaAir 2.10新特性:可动态修改渲染管线、增加深度渲染管线、增加DirectLightMap全局光照贴图等3D功能

    在今天推出的LayaAir 2.10beta版里,3D渲染效果再次得以提升,增加了DirectLightMap全局光照贴图、增加了深度渲染管线DepthPass...

    Layabox Charley
  • Three.js camera初探——转场动画实现

    three.js是用javascript写的基于webGL的第三方3D库,通过它可以在网页中进行3D建模,结合上TweenMax.js动画库,在网页中实现3D动...

    郭诗雅

扫码关注云+社区

领取腾讯云代金券