javascript - 在三个js中用颜色填充线条之间的区域
问题描述
我有两个顶点数据集,一个具有真实顶点,第二个顶点相同,但 y 为零。现在我希望他们连接起来并被填满。我已经使用 CatmullRomCurve3 和线路连接了它们,但没有运气来填充它。
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();
}
解决方案
经过多次尝试不同的几何形状后,我使用以下代码解决了问题。
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);
推荐阅读
- c# - 我想使用 RegExp 仅提取给定字符串中的邮件
- html - 居中元素时忽略侧边距
- ios - 将用户登录与用户注销逻辑放在哪里?
- multithreading - 进程可以读取自己的“标准输出”流吗?
- c# - 如何使用 ClosedXML 格式化带有数字的单元格?
- python - 当尝试替换 .csv 文件中的值时,它会给出错误
- python - thrift.transport.TTransport.TTransportException:无法解析主机 Pyhive 和 Python 的 sockaddr
- python - 对来自两棵树 xgboost 回归器的预测值的混淆
- beautifulsoup - 使用 BeautifulSoup 在一个标签内获取带引号的文本
- python - 无法调用函数来更改 stringvar