In version 81 of Three.js, the toShapes() function has been relocated to a new class. Find out how

After updating Three.js from v73 to v81, I encountered the following error:

Uncaught TypeError: path.toShapes is not a function

Upon reviewing the new release notes, I discovered the following changes made to Path:

  • The removal of .actions (yay)
  • Moving getPoints() to CurvePath
  • Moving toShapes() to a new class ShapePath

The code segment causing the issue looks like this:

var shapes = [];
for (var i = 0; i < paths.length; ++i) {
    // Turning each SVG path into a three.js shape
    var path = d3.transformSVGPath( paths[i] );
    // There might have been an issue with the winding order.
    **var newShapes = path.toShapes(effectController.reverseWO);**
    // Adding these three.js shapes to an array.
    shapes = shapes.concat(newShapes);
}

I searched for THREE.Path but couldn't find it, so I tried importing Path.js in hopes of resolving the problem, but with no success. As a newcomer to Three.js, I'm unsure if this is a basic question, but after spending a day on it, I'm still unable to resolve it.

Answer №1

Looking for a method in the ShapePath class? Check out the .toShapes() method. The documentation also references an example that showcases how this method is used:

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

The problem lies in the source code of d3-threeD, where the .transformSVGPath() method still relies on var path = new THREE.Shape();.

In the mentioned example, you can find a portion of the code borrowed from d3-threeD, but updated to utilize THREE.ShapePath():

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

I suggest following the example and incorporating the revised .transformSVGPath() method using THREE.ShapePath().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to incorporate CGST and SGST into the Subtotal using JQuery?

I have come across this particular HTML Code in an Invoice: <tr> <td colspan="3" class="blank"></td> <td colspan="2" class="total-line">Subtotal Rs.</td> <td td class="t ...

Discovering the optimum route within a 2D array given specific limitations using Dynamic Programming

Hey, I have a query related to dynamic programming (dp) that goes like this: Input: A 2D array of numbers Output: The maximum sum of a path from (0,0) to (n-1,n-1) with the following conditions: You can only move down and right i.e. from (A[i-1][j]) t ...

Is there a way to transfer a file from Angular to Node, and then send it to an API via a

I am struggling with sending post data to the API. I successfully obtained the file from Angular in Node.js and can see it using console.log(), but I am unsure how to send this data using a POST request to the API. Currently, I have the following code in ...

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

Issue with smart table sorting functionality

I've been working on a table with just one column that is populated from a string array. However, I'm struggling to get the sorting functionality to work properly. Can anyone pinpoint what mistake I might be making here? Steps taken so far: 1) ...

Is it possible to utilize the react state dispatch within an effect before it has been defined?

The code below successfully displays the number 1: "use client"; import { useEffect, useState } from "react"; export function StateTest() { useEffect(() => { setX(1); }); const [x, setX] = useState(0); return <div ...

dirpagination fails to display all rows in the dataset

I've been working on creating tables with 3 divs, as shown in the link below:- https://github.com/anirbanmishra/congress.php/blob/master/web_test Additionally, I have a javascript file available here:- https://github.com/anirbanmishra/congress.php/bl ...

Incorporating server-side rendered components into a Vue.js parent component

I have a server-side rendered page that includes information about "orders" and a root Vue object initialized as the "parent object." Is it feasible to assign the rendered HTML orders as children of that parent Vue object? Vue.js is known for its dynamic ...

Guide on fixing a problem encountered when sending a GET request in a chatbot powered by IBM Watson

When attempting a GET request on Postman, the session ID is not being generated. Instead, it goes into the catch block and displays an error message. Can someone please assist me in resolving this issue? const authenticator = new IamAuthenticator({ api ...

Utilizing Javascript to implement the Onchange event on form fields in a Reactjs page

Seeking a solution to track field changes on a form created with Reactjs using custom javascript code that can be embedded on the page. While I am familiar with using the .change event from jQuery to monitor field value changes on non-react pages, I am un ...

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

Tips for creating case-insensitive query parameter values

Can someone help me troubleshoot why my endpoint for a GET method to /book with a query parameter named name is not returning the correct book title? When the name parameter is 'scott' or 'SCOTT,' it should return "Cracking the Coding I ...

Eliminate any spaces surrounding the text within the div tag

Is it possible to eliminate extra space at the end of text using CSS (or possibly JS)? I've experimented with various display properties, but none seem to be effective. I need to dynamically insert a blink-div at the conclusion of a multi-line sentenc ...

Tips on integrating Angular's ui-grid with an array of strings

I have utilized Angular ui-grid to display an array of json objects received in the response. However, my current scenario involves getting an array of string values instead. How should I configure the grid for this situation? $http.get(url) .success(func ...

Various web browsers are displaying distinct jQuery errors when executing the code

I'm currently working on validating and uploading images using multiple accept inputs with the help of jQuery, AJAX, and PHP. I have successfully added a validation function that is working correctly, but the form is not submitting. Additionally, Chro ...

JavaScript function is not identifiable

I am currently developing a tic-tac-toe game with 9 buttons that will display either an X or O image depending on the boolean value of the variable isX. The main container for these buttons is a div element with the id 'stage' and each button ha ...

I keep trying to retrieve a specific property from an object, but every time I do, it returns as undefined

I'm currently employing Javascript within a React component. My goal is to retrieve a specific property from an object. If I log this object out to the console as shown below: console.log("Engine: ", this.Engine); The output looks like th ...

Ways to Read JSON without Using jQuery

Exploring JSON Feed and Autocomplete As I delve into the realm of creating an autocomplete feature that fetches data from a JSON feed, I encounter a setback. Despite successfully parsing the JSON data using json2.js through JSON.parse, I am confronted wit ...

Regular expression: match all content up to a certain word(s)

I have two different versions of a string that look like this: The Student's Companion *Author: Alcock, Pete;May, Margaret;Wright, Sharon*MIL EAN/ISBN: 9781283333115 Java Programming: Java Expert*Author:Sarang, Poornachandra*MIL EAN/ISBN: 978128011 ...

"Encountering an error while attempting to map a JSON array in

I am just starting to work with knockoutjs and I'm attempting to map JSON data to KO. Here is my code: My goal is to parse the JSON data and display it in a table. However, when I try to use ko.compute, I encounter an error saying "self.firstName() i ...