Three.js toShapes() moved to new class in v81, how to access it

javascript, three.js

Solution

The ShapePath class contains the method you are looking for: .toShapes(). The example the documentation links to also utilizes this method:

path = $d3g.transformSVGPath( thePaths[i] );
...
simpleShapes = path.toShapes(true);

The issue is that the d3-threeD source that includes the `.transformSVGPath()` method still defines `var path = new THREE.Shape();`.

Notice in the example, that there is a snippet of code that is taken/derived from d3-threeD, but is updated to use `THREE.ShapePath()`:

...
function transformSVGPath(pathStr) {
    var path = new THREE.ShapePath();
...

I would recommend you follow the example source and include the updated `.transformSVGPath()` method which uses `THREE.ShapePath()`.

Problem

I've updated Three.js from v73 to v81. I'm getting this error: Uncaught TypeError: path.toShapes is not a function On looking at the release documents, I found: Changes to Path: - got rid of .actions (yay) - getPoints() moved to CurvePath - toShapes() moved to new class ShapePath My code segment is this: ``` var shapes = []; for (var i = 0; i < paths.length; ++i) { // Turn each SVG path into a three.js shape var path = d3.transformSVGPath( paths[i] ); // We may have had the winding order backward. **var newShapes = path.toShapes(effectController.reverseWO);** // Add these three.js shapes to an array. shapes = shapes.concat(newShapes); } ``` I could not find THREE.Path anywhere so I imported Path.js in case it would help, but to no avail. I'm new to Three.js so do not know if it's a noob question, but I've been at it for a day now and cannot figure it out.

Original source