Best way to make a BufferGeometry contour in Three.js

Question

I'd like to make a specific contour in my BufferGeometry. The goal is make a fill polygon and the lines around.

Now, I try using MultiMaterialObject, but the line crosses the square: 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);

But I don't need the cross line. In this example, I use the square, but in my project there are thousands polygons (Pentagon,Hexagon, etc). What is the best way to do the perfect contour, without the cross line?

Make two separate "BufferGeometry" ? ( One using LineBasicMaterial with different sequence of vertices positions and other using MeshBasicMaterial with the actual sequence )
Other?

Thanks

Thank you!! Its worked, but i changed somethings: var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors,side: THREE.DoubleSide } ); Look the final example: Result — heltonitba

WestLangley WestLangley · Accepted Answer · 2015-07-18T18:08:21

If you want to highlight the edges of your geometry, you can use EdgesHelper:

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

helper.material.linewidth = 2; // optional

scene.add( helper )

If your mesh has another material, you may get z-fighting artifacts with EdgesHelper. A work-around involves polygonOffset. See three.js EdgesHelper showing certain diagonal lines on Collada model. Also note its use in the updated fiddle below.

Your geometry has problems, however. Face winding order must be counter-clockwise. That is a separate issue.

Updated fiddle: http://jsfiddle.net/VsWb9/3923/

three.js r.71

Best way to make a BufferGeometry contour in Three.js

1 Answers