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

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

现在，我尝试使用MultiMaterialObject，但是线穿过正方形： :

    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）
其他？

谢谢

如果要突出显示几何的边缘，可以使用EdgesHelper ：

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

helper.material.linewidth = 2; // optional

scene.add( helper )

如果您的网格物体包含其他材质，则可以使用EdgesHelper获得z战斗伪像。 解决方法涉及polygonOffset 。 请参阅。 还要注意在下面的更新小提琴中使用它。

但是，您的几何图形存在问题。 正面缠绕顺序必须为逆时针方向。 那是一个单独的问题。

更新的小提琴： :

three.js r.71

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

问题描述

1楼