Reputation: 5419
I have an array of Vector3s that define an arbitrary curved shape in 3D space. I can render an outline of the curve in Three.js by using a THREE.Geometry
and a THREE.Line
, but I'd like to fill it with color.
I tried using THREE.ShapeGeometry
and THREE.Mesh
, but it seems as though THREE.ShapeGeometry
is for 2D planes only (the z-coordinates of my vertices are being ignored). I also tried to use THREE.Geometry
and define the faces in addition to the vertices I wanted, but had no luck.
How should I go about doing this?
Code:
geom.vertices = curve.getPoints(100);
for (var i = 0; i < 97; i++) {
geom.faces.push(new THREE.Face3(i, i + 1, i + 2));
}
var material = new THREE.MeshNormalMaterial();
obj = new THREE.Mesh(geom, material);
scene.add(obj);
Upvotes: 1
Views: 2270
Reputation: 5419
Fixed by changing the code in the question above to the excerpt below:
geom.vertices = curve.getPoints(100);
for (var i = 0; i < 98; i++) {
geom.faces.push(new THREE.Face3(0, i + 1, i + 2));
}
var materialObj = { color : 0xff0000, side: THREE.DoubleSide };
var material = new THREE.MeshBasicMaterial(materialObj);
obj = new THREE.Mesh(geom, material);
scene.add(obj);
Upvotes: 2