The custom created THREE.Curve is not rendering correctly

Question

The custom created THREE.Curve is not rendering correctly

Following advice from this solution, I have implemented a linearly interpolated curve in the code below:

THREE.Linear3 = THREE.Curve.create(

  function ( points, label /* array of Vector3 */) {

    this.points = (points == undefined) ? [] : points;
    this.label = label;

  },

  function ( t ) {    
    var v = new THREE.Vector3();
    var c = [];
    var points = this.points, point, intPoint, weight;
    point = ( points.length - 1 ) * t;

    intPoint = Math.floor( point );
    weight = point - intPoint;

    c[ 1 ] = intPoint;
    c[ 2 ] = intPoint  > points.length - 2 ? points.length - 1 : intPoint + 1;

    var pt1 = points[ c[1] ],
      pt2 = points[ c[2] ];

    v.copy( pt1 ).lerp( pt2, weight );

    return v;

  }

);

When attempting to animate trajectories of varying lengths, I encountered unexpected behavior where the curve cuts through space instead of passing through the specified points as shown in the animated gif below:

I am struggling to understand the getPoint function and its intended output. Any assistance would be greatly appreciated.

JSFiddle

The provided JSFiddle demonstrates the issue, particularly the jerky motion in the right corner as the tube expands.

http://jsfiddle.net/ElDeveloper/3uyf3sq3/1/

javascript three.js

Answer 1

Answer №1

Code Cleanup Process

My exploration of the issue was aided by the following steps.

Ensure you dispose of geometries to prevent memory leaks when removing meshes from the scene:
```
scene.remove(c_mesh)
c_tube && c_tube.dispose();
```
Switch to WebGLRenderer as CanvasRenderer may leak removed objects and create new objects on each frame:
(For the fiddle) Slow down the motion for better observation of the process:
```
setTimeout(animate, 500);
```
Consider the purpose of a 0-segment tube and adjust the index accordingly:
```
if (index >= points.length - 1){
    index = 1; //start with 2 points
}
```

Results and Insights

The TubeGeometry creates a tube with N segments, defaulting to 16 segments. Consider customizing this value:
Curve.getPoinAt method returns equidistant points, affecting the segment lengths in the TubeGeometry construction:
The TubeGeometry builds a tube with 16 segments of equal length, leading to uniform tube structure irrespective of the input points:

Resolution Strategies

Modify the TubeGeometry behavior by overloading getUtoTmapping method and customizing getPoint method:
```
THREE.Linear3.prototype.getUtoTmapping = function(u) {
    return u;
};
```
Update the number of segments in the TubeGeometry constructor for desired results:
Adjust the tube's orientation and angle issue by manipulating segment count or exploring tangent handling methods:

For further experimentation, refer to the updated version of the code on http://jsfiddle.net/dqn73m98/5/. Reach out to three.js developers for feature inquiries or implementation suggestions via GitHub issues.

Answer 2

Code Cleanup Process

My exploration of the issue was aided by the following steps.

Ensure you dispose of geometries to prevent memory leaks when removing meshes from the scene:
```
scene.remove(c_mesh)
c_tube && c_tube.dispose();
```
Switch to WebGLRenderer as CanvasRenderer may leak removed objects and create new objects on each frame:
(For the fiddle) Slow down the motion for better observation of the process:
```
setTimeout(animate, 500);
```
Consider the purpose of a 0-segment tube and adjust the index accordingly:
```
if (index >= points.length - 1){
    index = 1; //start with 2 points
}
```

Results and Insights

The TubeGeometry creates a tube with N segments, defaulting to 16 segments. Consider customizing this value:
Curve.getPoinAt method returns equidistant points, affecting the segment lengths in the TubeGeometry construction:
The TubeGeometry builds a tube with 16 segments of equal length, leading to uniform tube structure irrespective of the input points:

Resolution Strategies

Modify the TubeGeometry behavior by overloading getUtoTmapping method and customizing getPoint method:
```
THREE.Linear3.prototype.getUtoTmapping = function(u) {
    return u;
};
```
Update the number of segments in the TubeGeometry constructor for desired results:
Adjust the tube's orientation and angle issue by manipulating segment count or exploring tangent handling methods:

For further experimentation, refer to the updated version of the code on http://jsfiddle.net/dqn73m98/5/. Reach out to three.js developers for feature inquiries or implementation suggestions via GitHub issues.

The custom created THREE.Curve is not rendering correctly

JSFiddle

Answer №1

Code Cleanup Process

Results and Insights

Resolution Strategies

Similar questions

Cleaning up webpage content by removing specific characters using Python's Selenium

Cannon.js - Ensuring objects don't intersect with the ground during updates

Filtering a list in AngularJS based on a property of an object with a filter applied on it

Avoid Updating State After Adding Row in material-table

How to apply unique styles to multiple elements with the same class using jQuery?

PhoneGap iOS application storing outdated information

PHP displaying incorrect value after modifying value in JavaScript

Experiencing excessive delay in loading data into the DOM following a successful response from a service in AngularJS

Generating rows within Angular while implementing ng-repeat

Errors in production arise from building React applications

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

Steer clear of changing props directly in VueJS to prevent unintended

What are the steps to manipulate the data within an EJS file after passing an array through Node.js as an object?

Efficiently refresh several DIV elements with a single JSON request

Convert TypeScript-specific statements into standard JavaScript code

Why does the getter consistently generate the previous value?

Issue with spacing when assigning a JavaScript array variable to a value within input tags during a loop

Tips for streamlining the transfer of essential features from a main project to its duplicate projects

Angular project icons not displaying in the browser