在单个缓冲区中使用组时,如何处理三j的重叠透明材料?

发布于 2025-02-10 15:53:29 字数 1149 浏览 0 评论 0原文

当渲染单个三。buffergeemetry带有多个组/材料时,我很难获得所需的结果。

所需结果(image)

实际结果(image)

我已经创建了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.

Desired result (image)

Actual result (image)

JSFiddle

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 BufferGeometrys, each having their own material, and everything works well in this case. I would like to avoid creating a bufferGeometry per material though.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文