代码之家 › 专栏 › 技术社区 › Ullas Hunka

用三个JS中的颜色填充线条之间的区域

three.js html javascript

Ullas Hunka · 技术社区 · 7 年前

我有两个顶点数据集,一个是实顶点,另一个是相同的顶点,但y是零。现在我想让他们联系起来,并得到满足。我已经用catmullromcurve3和线路连接了它们,但是没有运气来填充它。

for(var i=0;i<data.real.length;i++){
变量o2=i==data.real.length-1?0:i+1;
var ro1=数据.real[i];
var ro2=data.real[o2];
var fo1=数据。零轴[i];
var fo2=数据。零轴[o2];

var曲线=新的三个.catmullromcurve3([ro1,ro2,fo1,fo2]);

var点=曲线。获取点(50);
var geometry=new three.buffergeometry().setFromPoints(点);



var material=新的三线基本材料({
颜色:0xff0000
})(二)

//创建要添加到场景中的最终对象
var curveObject=新的三线(几何图形、材质);
console.log(曲线对象)
this.tb.scene.add(曲线对象);
此.tb.render();
}
.

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

1 回复 | 直到 7 年前

Ullas Hunka 7 年前

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

推荐文章

5rod · 如何在three_js(Flutter)中设置缓冲区几何属性?

5 月前

TheBeginner · 三个JS锥体在globe.gl中未显示为标记

10 月前

Mandroid · 类型错误:三。BufferAttribute:数组应该是类型化数组

11 月前

jamfury · 从集合中获取纹理

11 月前

Voy Hexag · 边几何体-从不位于原点的网格中绘制边界边

12 月前

Slaven Soldo · Three.js中只提取复杂缓冲几何体的外边缘

1 年前

Chiara Ani · 对象属于类并且在typescript中具有属性?

1 年前

Pilves · ThreeJS Div跟随鼠标

1 年前

liminalFrog · three.js-OrbitControls阻尼在鼠标按下时有效,但在鼠标停止移动时没有阻尼

1 年前

David Lin · 使用useRef钩子的React Fiber Mesh元素,“ref.current”可能是“未定义的”

1 年前