CODEWITHSUNDEEP
javascripthtmlthree.js
Ullas Hunka
Ullas Hunka

Reputation: 2211

Fill Area between Lines with color in three js

I have two data sets of vertices one with real vertices and second same vertices but y is zero. Now I want them to be connected and get filled. I have connected them using CatmullRomCurve3 and the line as well but having no luck to fill it. 

 for (var i = 0; i < data.real.length; i++) {
    var o2 = i == data.real.length - 1 ? 0 : i + 1;
    var rO1 = data.real[i];
    var rO2 = data.real[o2];
    var fO1 = data.zeroAxis[i];
    var fO2 = data.zeroAxis[o2];

    var curve = new THREE.CatmullRomCurve3([ rO1, rO2, fO1, fO2 ]);

    var points = curve.getPoints(50);
    var geometry = new THREE.BufferGeometry().setFromPoints(points);



    var material = new THREE.LineBasicMaterial({
        color : 0xff0000
    });

    // Create the final object to add to the scene
    var curveObject = new THREE.Line(geometry, material);
    console.log(curveObject)
    this.tb.scene.add(curveObject);
    this.tb.render();
}

enter image description here

Upvotes: 0

Views: 947

Answers (1)

Ullas Hunka
Ullas Hunka

Reputation: 2211

After so many tries with different geometries, I resolved the problem using the following code.

for (var i = 0; i < data.real.length; i++, f += 4) {
        var o2 = i == data.real.length - 1 ? 0 : i + 1;
        var tl = data.real[i];
        var tr = data.real[o2];
        var bl = data.zeroAxis[i];
        var br = data.zeroAxis[o2];

        geometry.vertices.push(tl, tr, br, bl);
        var normal = new THREE.Vector3(0, 1, 0); // optional
        var color = new THREE.Color(color); // optional
        var materialIndex = 0; // optional
        geometry.faces.push(new THREE.Face3(f, f + 1, f + 2, normal, color,
                materialIndex));
        geometry.faces.push(new THREE.Face3(f, f + 2, f + 3, normal, color,
                materialIndex));

    }
    geometry.computeFaceNormals();
    var material = new THREE.MeshPhongMaterial({
        color : color,
        side : THREE.DoubleSide,
        transparent : true,
        opacity : 1
    });
    var object = new THREE.Mesh(geometry, material);
    object.position.set(0, a, 0);
    this.plot = object;

    var geo = new THREE.EdgesGeometry(object.geometry);
    // or WireframeGeometry
    var mat = new THREE.MeshPhongMaterial({
        color : 0xffffff,
        linewidth : 1,
        side : THREE.DoubleSide,
        transparent : true,
        opacity : 0.75
    });
    var wireframe = new THREE.LineSegments(geo, mat);

    object.add(wireframe);
    this.tb.scene.add(object);

Upvotes: 1

Related Questions