简体   繁体   中英

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM