如何解决Threejs与不透明度混合
我想在要淡化到场景上的材质上使用THREE.AdditiveBlending
和THREE.SubtractiveBlending
混合。
例如:
fieldFader.material.blending = THREE.SubtractiveBlending
fieldFader.material.color = new THREE.Color(colorInverse3)
fieldFader.material.opacity = 0
await tweenOpacity(fieldFader.material,{ opacity: 1 },timeToTween)
注意:tweenOpacity函数只是将材料的不透明度随时间timeToTween
从0过渡到1,并在渲染循环中更新
但是,当我这样做时,在开始时(不透明度为0),我希望不发生混合,然后在不透明度变为1的过程中应用100%的混合减法。
如果能向正确的方向指出如何实现这一目标,那还不错,而且还可以更好地理解问题,以便我可以对其进行有效编码。
一个选项,我将在颜色之间而不是不透明度之间进行调整。
解决方法
一种解决方案是补间颜色和不透明度:
fieldFader.material.blending = THREE.SubtractiveBlending
fieldFader.material.color = new THREE.Color(targetColor)
fieldFader.material.opacity = 0
let meta = { opacity: 0,r: 0,g: 0,b: 0 }
await tweenOpacity(m,{
opacity: 1,r: targetR,g: targetG,b: targetB
},timeToTween)
补间函数将在.onUpdate()
回调中更新颜色和不透明度。
fieldFader.material.opacity = from.opacity
fieldFader.material.color = new THREE.Color(`rgb(${Math.floor(from.r)},${Math.floor(from.g)},${Math.floor(from.b)})`)
注意:由于某些原因,THREE.js材质上的嵌套补间无效,因此我直接从补间元对象更新了材质
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。