Question

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

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));

这是一个解释我的问题的问题http://jsfiddle.net/7wk0cfcj/

上述代码效果很好，除了在形状中间有一个较暗的区域（由于三角形的重叠）。我希望网格显示为单个透明对象，到处都是相同的颜色。有没有办法在不改变三角形的情况下实现这一点，以免它们重叠？

Answer 1

由于Z值始终相同，因此您可以更改材质上的z测试功能，以防止在同一位置绘制两次以供选择。

此功能尚未在three.js中发布;它在开发部门。

http://jsfiddle.net/fgaudet/7wk0cfcj/5/外部引用dev分支...

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

Answer 2

添加到您的材料：

blending: THREE.NoBlending

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

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

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

2 个答案: