在Three.js中渲染带有重叠三角形的透明网格

Rendering transparent mesh with overlapping triangles in Three.js

本文关键字：三角形 重叠 透明 网格 js Three      更新时间：2023-09-26

我想渲染一个由几个重叠三角形组成的透明形状。目前我正在使用以下代码:

geometry = new THREE.Geometry();
material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.2
});

mesh = new THREE.Mesh( geometry, material );
geometry.vertices.push(new THREE.Vector3(100, 0, 1));
geometry.vertices.push(new THREE.Vector3(0, -200, 1));
geometry.vertices.push(new THREE.Vector3(200, -200, 1));
geometry.vertices.push(new THREE.Vector3(0, 0, 1));
geometry.vertices.push(new THREE.Vector3(200, 0, 1));
geometry.vertices.push(new THREE.Vector3(100, -200, 1));
geometry.faces.push(new THREE.Face3(0,1,2));
geometry.faces.push(new THREE.Face3(3,4,5));

这是一个jsfiddle来说明我的问题http://jsfiddle.net/7wk0cfcj/

上面的代码运行良好，除了在形状的中间有一个较暗的区域(由于三角形的重叠)。我想让网格看起来像一个透明的物体，到处都是相同的颜色。有没有一种方法可以在不改变三角形的情况下实现这一点，使它们不重叠?

由于Z值总是相同的，您可以更改材料上的Z测试函数，以防止在您选择的同一位置绘制两次。

这个特性还没有在three.js中发布;在dev分支中。

http://jsfiddle.net/fgaudet/7wk0cfcj/5/与外部ref到dev分支…

material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.2,
    depthFunc: THREE.LessDepth
});

添加到您的Material:

blending: THREE.NoBlending

缺点是你再也看不透了，所以三角形后面的物体是不可见的。

http://jsfiddle.net/7wk0cfcj/2/

相关文章：