javascript - 在 Three.js 中制作 BufferGeometry 轮廓的最佳方法

Question

我想在我的BufferGeometry中制作特定的轮廓。目标是制作一个填充多边形和周围的线条。

现在，我尝试使用 MultiMaterialObject，但线穿过正方形:http://jsfiddle.net/VsWb9/3918/

    var positionArray = [0,0,0, 0,100,0, 100,100,0, 
                         0,0,0, 100,100,0 ,100,0,0],
        colorArray = [];

    for(var i = positionArray.length;i--;)
        colorArray[i]=1 // white    


    bufferGeo.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positionArray), 3));
    bufferGeo.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colorArray), 3));

    materialsArray = [
    new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true, opacity: 0.2, transparent: true, shadding: THREE.SmoothShading})
        ];
    mesh = THREE.SceneUtils.createMultiMaterialObject(bufferGeo, materialsArray);

但我不需要十字线。在此示例中，我使用正方形，但在我的项目中有数千个多边形(五边形、六边形等)。没有交叉线的完美轮廓的最佳方法是什么？

• 制作两个单独的“BufferGeometry”？ (一种使用具有不同顶点位置序列的 LineBasicMaterial，另一种使用具有实际序列的 MeshBasicMaterial)
• 其他？

谢谢

Answer 1

如果您想突出显示几何体的边缘，可以使用EdgesHelper:

var helper = new THREE.EdgesHelper( mesh, 0x00ffff );

helper.material.linewidth = 2; // optional

scene.add( helper )

如果您的网格有其他 Material ，您可能会使用 EdgesHelper 获得 z-fighting 伪影。解决方法涉及polygonOffset。请参阅three.js EdgesHelper showing certain diagonal lines on Collada model 。另请注意它在下面更新的 fiddle 中的使用。

但是，您的几何形状有问题。面绕线顺序必须是逆时针方向。这是一个单独的问题。

更新 fiddle :http://jsfiddle.net/VsWb9/3923/

三.js r.71