I have created a line graph in 3D using THREE.js and the CatmullRomCurve3 class, which takes care of the curves and smoothing I wanted.
Unfortunately, now that I want to take that curve and turn it into a mesh, and perhaps extrude that mesh, it appears I can't. When I attempt something like:
var geometry = new THREE.ShapeGeometry( curve );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var mesh = new THREE.Mesh( geometry, material ) ;
I get errors that prove a curve isn't quite what a geometry constructor wants:
three.js:27731 Uncaught TypeError: shape.extractPoints is not a function
at ExtrudeBufferGeometry.addShape (three.js:27731)
at ExtrudeBufferGeometry.addShapeList (three.js:27656)
at new ExtrudeBufferGeometry (three.js:27612)
at new ChartTest (ChartTest.js:33)
at createSceneSubjects (SceneManager.js:89)
at new SceneManager (SceneManager.js:27)
at main.js:16
I have seen examples where a curve is passed as an extrudePath parameter, such as:
var extrudeSettings = {
steps : 100,
bevelEnabled : false,
extrudePath : curve
};
but that requires a shape to be passed to ExtrudeGeometry along with extrudeSettings, but there has to be a more straightforward way than trying to create a separate shape, when the curve already defines the shape I want to extrude. (This also seems to extrude the path and not the shape it describes.)
Any help would be greatly appreciated!
ShapeGeometry
expects an instance of type THREE.Shape
as a parameter, not an object of type THREE.Curve
. Besides, THREE.CatmullRomCurve3
is a 3D curve whereas THREE.Shape
is a 2D entity. This means that your shapes will always be flat. You can do the following to get things working:
Sample you curve first and then create an instance of THREE.Shape
. Bear in mind that z-coordinates of the given points will be ignored.
const points = curve.getPoints( 64 );
const shape = new THREE.Shape( points );
const geometry = new THREE.ShapeGeometry( shape );
https://jsfiddle.net/f2Lommf5/3775/
three.js R91