Error in three.js: Cannot find method 'getTangentAt' in object function(){} at line 175 in TubeGeometry.js

I'm encountering an error while attempting to draw a Helix Curve. I've included the latest versions of Curve.js and TubeGeometry.js. Could this issue be related to Canvas rendering, or am I making a mistake somewhere? I'm following the example provided at

 <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>3d Model using HTML5 and three.js</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
            <style>
                body {
                    font-family: Monospace;
                    background-color: #f0f0f0;
                    margin: 0px;
                    overflow: hidden;
                }
            </style>
        </head>
        <body>

            <script src="three.min.js" type="text/javascript"></script>
            <script src="Curve.js" type="text/javascript"></script>
            <script src="TubeGeometry.js" type="text/javascript"></script>      
            <script src="Stats.js" type="text/javascript"></script>
            <script src="Detector.js" type="text/javascript"></script>

            <script>
            // JavaScript code omitted for brevity
            </script>
        </body>
    </html>     

Answer №1

It seems like you are not initializing your curve object correctly. The correct way to do it is:

extrudePath = new (THREE.Curve.create(...))();

Alternatively, a more simplified approach would be:

CustomCurve = THREE.Curve.create(...);
extrudePath = new CustomCurve();

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

Copy and paste the code from your clipboard into various input fields

I have been searching for a Vanilla JavaScript solution to copy and paste code into multiple input fields. Although I have found solutions on the internet, they are all jQuery-based. Here is an example of such a jQuery solution <input type="text" maxl ...

Learning how to utilize getDerivedStateFromProps over componentWillReceiveProps in React

To address a deprecated error, I am looking to update my code from using componentWillReceiveProps to getDerivedStateFromProps. The component is being passed a date prop, and whenever this date changes, the getList function needs to be run with the new dat ...

Display the initial x list items without utilizing ngFor in Angular 2

In the template, there are 9 <li> elements, each with a *ngIf condition present. It is possible that 5 or more of them may return true, but the requirement is to only display the first 4 or less if needed. Priority is given to the order of the < ...

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

Tips on displaying or hiding the close button on the task pane of an online Excel document with an Office.js add-in

Working with office.js and Angular 6 to develop my add-in, I have implemented event listeners that run in the background. However, these events require the right side task pane to remain open or minimized. I am seeking a solution to prevent users from clos ...

My search bar in the navbar is sticky, but unfortunately it still ends up covering the page content as you scroll down

I am trying to figure out how to prevent the search bar (not the top navigation bar) from overlapping with the page contents when scrolling down. Just to clarify, I have both a navigation bar and a search bar, but the issue I'm addressing specifically ...

An error was encountered at line 7800, character 18 in the three-core.d.ts file in the node_modules/@types/three directory. The error message reads: "Cannot find name 'VRDisplay

I encountered an error in my Angular 6 app while running ng serve ERROR in node_modules/@types/three/three-core.d.ts(7800,18): error TS2304: Cannot find name 'VRDisplay'. node_modules/@types/three/three-core.d.ts(7801,23): error TS2304: Canno ...

Extract several "documents" from one compilation

To easily convert my code into a single module using webpack, I can use the following method: { entry: path.join(__dirname, 'src/index.js'), output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', ...

Tips for displaying res.locals information in the console for debugging purposes using ExpressJS and Nodejs

Currently, I am delving into the world of Node.js and ExpressJS as a novice in this realm. My primary requirement is to log the entire or partial content of res.locals in my console for debugging purposes. Here's what I've attempted: var foo_ro ...

Div blur event for editing content

Utilizing a content editable div as an input control has presented some challenges for me. Unlike a textarea or input element, the div does not send information to the server automatically. To work around this issue, I have implemented a solution where I u ...

Using Django Sessions for User Authentication in React Applications

Not a coding query, but rather a general one: When using default authentication in Django (session authentication), what does the frontend (in my case it's React) require? For instance, upon logging in on the browser via the front end login button, th ...

What is the method to designate the initial value of a <select> tag within a React component?

I am working with a basic <select> element that is looping through a set of options: <select onChange={(event) => this.setState({selectedOption: event.target.value }) }> { this.state.options.map(option => <option key={option.label} ...

Compare the array against the keys to filter the object

Currently, I have an object with keys that have multiple values. Additionally, there is an array with a simple key check as follows: ["random", "three"]. My goal is to retrieve the mainData, but only with the object and the data that match the keys in th ...

Using the md-date-picker along with the md-menu component

Whenever I try to click on the md-date-picker inside md-menu, it unexpectedly closes. You can view the issue on this CodePen link. This seems to be a bug related to ng-material as discussed in this GitHub issue. Any suggestions for a workaround? Here is t ...

Converting JavaScript code to React requires excluding jQuery

I have been working on updating my old JavaScript code to make it compatible with React. The main goal is to integrate external data into a 3rd party form. Here is the original JS code: <script charset="utf-8" type="text/javascript" ...

The AJAX response enters a continuous loop if it contains the window.print function

I'm looking to print the screen upon receiving an ajax response. Here's my code snippet: function initiatePrint() { var request = new XMLHttpRequest(); request .open("GET", "printPage.html", true); var counter = 0; ...

Leverage D3 force simulation as a functional programming tool

Currently, I am utilizing d3-force for collision detection in my project: function customLayout(nodesWithCoordinates) { const simulation = forceSimulation(nodesWithCoordinates) .force('collide', forceCollide(4.5)) .stop() .tick(300 ...

What is the best way to simulate the behavior of a function that is being called by a service during testing

Currently, I am developing a NestJS project and the task at hand involves writing unit tests for my services. One of the services in question is the BigQueryService, which utilizes @google-cloud/bigquery to interact with a Big Query dataset and execute qu ...

What is the best way to trigger ajax when the user clicks the back button to return to the previous webpage?

Check out my code snippet below: HTML Code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="body"> <div class="dropdown_div"> <select id="q_type" class="dropdown" ...

Trouble with ID.Replace function

Within my gridview, I am trying to extract the ID of a row when it is clicked. The ID returned looks like gvBookingsRow_5. $(".gvBookingsRow_").click(function (e) { ShowBookingComment($(this).attr("ID")); ...