在单个缓冲区中使用组时,如何处理三j的重叠透明材料?
当渲染单个三。buffergeemetry
带有多个组/材料时,我很难获得所需的结果。
我已经创建了buffergeoemertry:
const boxes = []
const materials = []
for (const [x, color] of [[-5, 'red'], [0, 'green'], [5, 'blue']]) {
const geometry = new THREE.BoxGeometry( 4, 4, 4 );
geometry.translate(x, 0, 0)
boxes.push(geometry)
materials.push(new THREE.MeshBasicMaterial({
color: new THREE.Color(color),
transparent: true,
opacity: 0.3
}))
}
const combinedGeomtry = THREE.BufferGeometryUtils.mergeBufferGeometries(boxes, true)
const cube = new THREE.Mesh(combinedGeomtry, materials);
如您所见,在实际结果中,颜色不是混合的,而前景盒也不会让其后面的盒子中的任何颜色都透过,即使它是透明且具有不透明度的。尽管这似乎是群体顺序的函数。 “所需结果”屏幕截图是从相同的代码中取出的,但是从另一个角度看,盒子以不同的顺序排列。因此,根据BufferGeemetry
的组顺序,深度处理似乎有所不同。
我尝试了相同的场景,具有多个bufferGeememementry
s,每个都有自己的材料,在这种情况下,一切都很好。我想避免每种材料创建缓冲区计。
I'm having trouble getting the desired result, when rendering a single THREE.BufferGeometry
with multiple groups/materials.
I've created the BufferGeoemtry as such:
const boxes = []
const materials = []
for (const [x, color] of [[-5, 'red'], [0, 'green'], [5, 'blue']]) {
const geometry = new THREE.BoxGeometry( 4, 4, 4 );
geometry.translate(x, 0, 0)
boxes.push(geometry)
materials.push(new THREE.MeshBasicMaterial({
color: new THREE.Color(color),
transparent: true,
opacity: 0.3
}))
}
const combinedGeomtry = THREE.BufferGeometryUtils.mergeBufferGeometries(boxes, true)
const cube = new THREE.Mesh(combinedGeomtry, materials);
As you can see, in the actual result the colours are not blending, and the foreground box doesn't let any colour from the boxes behind it through, even though it's transparent and has opacity. Although it seems like it's a function of the order of groups. The "desired result" screenshot is taken from the very same code, but looking from another angle, where boxes are arranged in a different order. So there seems to be some difference in depth handling depending on the order of groups in the BufferGeometry
.
I have tried the same scene, with multiple BufferGeometry
s, each having their own material, and everything works well in this case. I would like to avoid creating a bufferGeometry per material though.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论