threejs 透明贴图,模型透明,白边

news2024/11/18 13:31:01

问题

使用Threejs加载模型时,模型出现了上面的问题。模型边缘部分白边,或者模型出现透明问题。

原因

出现这种问题是模型制作时使用了透明贴图。threejs无法直接处理贴图。

解决

场景一

模型有多个贴图时(一个透贴和其他贴图)

// 判断mesh1.material 是数组还是对象
if(mesh1.material instanceof Array){
    for (const materialObj of mesh1.material) {
        console.log(materialObj)
        if(materialObj.alphaMap !== null){
        
        	materialObj.depthWrite = true;
            materialObj.depthTest = true;
            materialObj.transparent = true
            materialObj.alphaTest=0.01;
            materialObj.opacity = 5;
            
        }
    }
}else {}
场景二

一个透明贴图

if(mesh1.material.alphaMap !== null){
   mesh1.material.transparent = true
   mesh1.material.alphaTest=0.01;
   mesh1.material.opacity = 5;
   mesh1.material.depthWrite = true;
   mesh1.material.depthTest = true;
}
场景三

有时模型有透明贴图但是到threejs里确无法识别出来,显示只有一张不带透明的贴图

mesh1.material.transparent = true
mesh1.material.alphaTest=0.01;
mesh1.material.opacity = 3;
核心代码
mesh1.material.transparent = true
mesh1.material.alphaTest=0.01;
mesh1.material.opacity = 5;

原理

透贴是自带 alpha通道的。默认开启透明 即transparent: true(以上参数全是在transparent: true下才生效),

处理模型透明
opacity 透明度 (可以调节透明的程度,0.0表示完全透明,1.0表示完全不透明).但是有透贴时 值为1时仍让是透明的,这时可以设置比1大的值调试

alphaTest :透明测试(所以透明测试的意思就是, 如果片元颜色的不透明度(alpha通道)低于预设的透明测试的值就会被抛弃。关键代码就这么点。)

透明测试详情
所以调小点就可以把白边过滤掉,不显示。

alphaTest:0.5
在这里插入图片描述

其他

调整模型双边显示。(旋转下模型会只有一面显示)

materialObj.side = THREE.DoubleSide

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1065149.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

互联网Java工程师面试题·Redis篇·第一弹

目录 1、什么是 Redis? 2、Redis 优势 3、Redis 与其他 key-value 存储有什么不同? 4、Redis 的数据类型? 5、使用 Redis 有哪些好处? 6、Redis 相比 Memcached 有哪些优势? 7、Memcache 与 Redis 的区别都有哪些&#xf…

MyBatisPlus(十四)主键策略

说明 MyBatis Plus 集成了多种主键策略,帮助用户快速生成主键。 雪花算法ID(默认策略)(推荐)UUID自增ID用户输入ID(必须用户每次插入数据时,手动传入ID) 雪花算法ID:I…

ModelScope-agent体验

7月在魔搭社区hackathon的时候就了解到了魔搭在做的这件事,前段时间开源了,去体验一 本文写的很浅,没有做深入尝试 一.在线体验 体验地址:https://modelscope.cn/studios/damo/ModelScopeGPT/summary 效果还是挺惊艳的 二.部署…

认识File 类和InputStream, OutputStream

Java中通过file类来对一个文件(包括目录)进行抽象的描述。并且有File类对象,并不代表真实存在该文件。认识File类,就先了解File类的属性,构造方法,方法。 属性: 修饰符及类型 属性 …

最全最详细最高质量 java 面试题

“ 有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top ” 首发博客地址 面试题手册 面试题手册 学习建议 最全最详细最高质量 java 面试题,建议不要死记硬背,每天过一下&#xf…

el-tabs(标签栏)的入门学习

el-tabs(标签栏)的入门学习 适用场景 与导航栏相似,项目中常见的是点击某个导航栏,主页面(el-main)模块的最上方会显示我们的标签栏集合,点击不同的导航栏,标签栏会在不断追加,若点击到标签集合…

micro-ROS中对消息的内存管理

文章目录 1.背景2.答案2.1.基本类型及其数组,不需要2.1.序列类型(复合类型、复合序列类型),需要 3.内存申请方法3.1.手动申请(Manual allocation)3.1.工具辅助(micro-ROS utilities)…

css入门知识点

CSS&#xff08;层叠样式表&#xff09;完整知识点 1. 什么是CSS&#xff1f; <a id"what-is-css"></a> CSS是一种用于描述网页上元素样式和布局的样式表语言。它使开发人员能够控制网页的外观和排版&#xff0c;从而提供更好的用户体验。 2. CSS基础…

基于毫米波雷达的可行驶区域检测(Freespace)

说明 随着具备测高能力、更高角度分辨率、更远检测范围的4D毫米波雷达的出现&#xff0c;很多之前只能用摄像头/激光雷达做的事毫米波雷达也开始涉足(并且可以做得很好)&#xff1a;比如目标识别、SLAM、以及本博文将要讨论的可行驶区域检测(Freespace)。以往(至少是我个人)对于…

一、动态规划简单实例

【题目】 当我们给定一个简单序列[1、5、2、4、3]&#xff0c;现在要求输出该序列中&#xff0c;最大子序列的长度&#xff0c;子序列要求从小到大&#xff0c;元素下标可以跳跃&#xff0c;例如子序列[1、2、3]。 【实现方式(暴力实现)】 1、先定义一个函数L(nums,i)&#x…

C# 给某个方法设定执行超时时间

C# 给某个方法设定执行超时时间在某些情况下(例如通过网络访问数据)&#xff0c;常常不希望程序卡住而占用太多时间以至于造成界面假死。 在这时、我们可以通过Thread、Thread Invoke&#xff08;UI&#xff09;或者是 delegate.BeginInvoke 来避免界面假死&#xff0c; 但是…

RocketMQ 基于时间轮算法实现指定时间点的定时消息原理解析

在 RocketMQ 4.x 版本&#xff0c;使用延时消息来实现消息的定时消费。延时消息可以一定程度上实现定时发送&#xff0c;但是有一些局限。 RocketMQ 新版本基于时间轮算法引入了定时消息&#xff0c;目前&#xff0c;精确到秒级的定时消息实现的 pr 已经提交到社区&#xff0c…

unity中绑定动画的行为系统

主要代码逻辑是创建一个action队列,当动画播放结束时就移除队头,执行后面的事件 public class Enemy : MonoBehaviour {public event Action E_AnimatorFin;//当动画播放完毕时public Action DefaultAction;//默认事件public Dictionary<Action, string> EventAnimator n…

数据科学最佳实践:Kedro 的工程化解决方案 | 开源日报 No.47

leonardomso/33-js-concepts Stars: 58.4k License: MIT 这个项目是一个帮助开发者掌握 JavaScript 概念的资源库。该项目基于 Stephen Curtis 撰写的一篇文章&#xff0c;包含了对 33 个重要 JavaScript 概念全面深入地讲解&#xff0c;并被 GitHub 评为 2018 年最佳开源项目…

Python Random模块详解

Random模块详解 随机数 random模块 randint(a, b) 返回[a, b]之间的整数randrange ([start,] stop [,step]) 从指定范围内&#xff0c;按指定基数递增的集合中获取一个随机数&#xff0c;基数 缺省值为1。random.randrange(1,7,2)choice(seq) 从非空序列的元素中随机挑选一个…

驱动器类产品的接口EMC拓扑方案

驱动器类产品的接口EMC拓扑方案 1. 概述 本文以高压伺服驱动器和变频器类产品为例&#xff0c;对常用端口滤波拓扑方案进行总结&#xff0c;后续根据不同的应用场景可进行适当删减&#xff0c;希望对大家有帮助。 2. 驱动器验证等级 本文推荐拓扑的实验结果&#xff0c;满足…

Ps:选择并遮住

选择并遮住 Select and Mask主要用来提高选区边缘的品质&#xff0c;尤其在毛发等复杂边缘的抠图上发挥强大的作用。 Ps菜单&#xff1a;选择/选择并遮住 Select and Mask 快捷键&#xff1a;Ctrl Alt R 在所有选区工具的工具选项栏上以及图层蒙版的属性面板中都可以看到“选…

NAT+ACL+mstp小综合

三、实验一相关知识点 1&#xff0c;实验&#xff1a;NAT 综合实验 2&#xff0c;拓扑&#xff1a; 3&#xff0c;需求: 1&#xff09;&#xff0c;实现VLAN20 的除了20这台主机以外所有主机上网访问外网 2&#xff09;&#xff0c;实现VLAN30 的主机为奇数电脑上网 3&#…

详解C语言—预处理

目录 1、预处理 (1)预定义符号介绍 (2)预处理指令 #define #define 定义标识符&#xff1a; #define 定义宏&#xff1a; #define 替换规则 (3)预处理操作符# (4)预处理操作符## (5)带副作用的宏参数 (6)宏和函数对比 2、命名约定 3、预处理指令 #undef 4、命令行定…

用 Pytorch 自己构建一个Transformer

一、说明 用pytorch自己构建一个transformer并不是难事,本篇使用pytorch随机生成五千个32位数的词向量做为源语言词表,再生成五千个32位数的词向量做为目标语言词表,让它们模拟翻译过程,transformer全部用pytorch实现,具备一定实战意义。 二、论文和概要 …