Vue3使用threejs加载gltf文件,模型较暗

本文介绍了在Three.js高版本中遇到的模型渲染问题,重点在于如何通过更改材质编码从线性到sRGB,以解决模型颜色丢失问题。作者分享了解决步骤和关键代码段,包括设置`renderer.outputEncoding = sRGBEncoding;`。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图对比

网上的解决方案就是这些,不知道是我的threejs版本太高还是什么原因,对象里面没这些属性

 

 // gltf.scene.traverse(function (child) {
 //  if (child.isMesh) {
 //   child.frustumCulled = false;
 //   //模型阴影
 //   child.castShadow = true;
 //   //模型自发光
 //   child.material.emissive = child.material.color;
 //   child.material.emissiveMap = child.material.map;
 //  }
 // })


后面通过[其他文档发现需要更改材质,点击这里],发现应该是模型编码的原因,只需要加上

renderer.outputEncoding = sRGBEncoding;


即可(默认情况下threeJS会使用线性编码(LinearEncoding)的方式渲染材质,因此会丢失真实颜色,需要改用RGB模式编码(sRGBEncoding)进行对材质进行渲染。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值