正如 @mlkn 所说,你必须使用三角形来填充网格。
我稍微搞了一下:
function drawLine(x_values, y_values, z_values, options) {
// container
var obj = new THREE.Object3D();
// lines
var line_geom = new THREE.Geometry();
createVertexForEachPoint(line_geom, x_values, y_values, z_values);
var line_material = new THREE.LineBasicMaterial({
color: 'yellow'
});
var line = new THREE.Line(line_geom, line_material);
obj.add(line);
// mesh
var mesh_geom = new THREE.Geometry();
createVertexForEachPoint(mesh_geom, x_values, y_values, z_values);
var mesh_material = new THREE.MeshBasicMaterial({
color: 'blue',
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(mesh_geom, mesh_material);
obj.add(mesh);
scene.add(obj);
clearArrays();
}
The Object3D
obj
正在包裹线和网格。
面(三角形)在这里创建:
function createVertexForEachPoint(object_geometry, values_axis1, values_axis2, values_axis3) {
for (var i = 0; i < values_axis1.length; i++) {
object_geometry.vertices.push(new THREE.Vector3(values_axis1[i],
values_axis2[i], values_axis3[i]));
object_geometry.faces.push(new THREE.Face3(0, i + 1, i)); // <- add faces
}
}
结果有点混乱,我不知道是因为数据还是顶点顺序/生成。
Demo:
- https://gist.github.com/marcopompili/f5e071ce646c5cf3d600828ace734ce7 https://gist.github.com/marcopompili/f5e071ce646c5cf3d600828ace734ce7
- http://bl.ocks.org/marcopompili/f5e071ce646c5cf3d600828ace734ce7 http://bl.ocks.org/marcopompili/f5e071ce646c5cf3d600828ace734ce7
在我看来, ThreeGeoJSON 写得很差,没有结构,作为示例,您只需更改名称var scene = ...
to var myscene = ...
整个库停止工作,这是糟糕的设计。
此外,CPU 使用率很高,可能是绘制调用过多。