javascriptthree.jsgeometrycatmull-rom-curve

How Can I Convert a THREE.CatmullRomCurve3 to a Mesh?


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!


Solution

  • 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