CODEWITHSUNDEEP
javascriptthree.js
sir_thursday
sir_thursday

Reputation: 5419

3D Curve Geometry in Three.js

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

Answers (1)

sir_thursday
sir_thursday

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

Related Questions