Crafting a smooth curve between a pair of points using Three.js

Question

Crafting a smooth curve between a pair of points using Three.js

I am currently working on a Three.js visualization project where I need to connect points using a spline.

After adding points to an array and passing it to THREE.SplineCurve3, I am able to render the spline by stepping through the points. However, I encounter an error when trying to add a mid-point along with the start and end points.

You can find an example of the issue here:

http://jsfiddle.net/sLQK9/4/

I believe the solution is simple, but I am unable to identify it. Can anyone provide assistance?

Ultimately, I aim to visualize the points on the surface of a sphere, with the splines between them following the path an aircraft would take. This means the spline will resemble a great circle, but further away from the center of the sphere at the midpoint.

Thank you in advance for your help.

javascript three.js

Answer 1

Answer №1

When working with splines, it's important to specify the number of points you want the curve to interpolate in order to achieve the desired smoothness. Simply providing control points is not enough for the curve to know how smooth you want it to be.

Consider the following approach:

// Define the number of points for smoothing the curve
var numPoints = 100;

spline = new THREE.SplineCurve3([
   new THREE.Vector3(0, 0, 0),
   new THREE.Vector3(0, 200, 0),
   new THREE.Vector3(150, 150, 0),
   new THREE.Vector3(150, 50, 0),
   new THREE.Vector3(250, 100, 0),
   new THREE.Vector3(250, 300, 0)
]);

var material = new THREE.LineBasicMaterial({
    color: 0xff00f0,
});

var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(numPoints);

for(var i = 0; i < splinePoints.length; i++){
    geometry.vertices.push(splinePoints[i]);  
}

var line = new THREE.Line(geometry, material);
scene.add(line);

Additionally, as mentioned in @juan Mellado's answer, you can determine a position on the spline using spline.getPoint(t), where t is a value between 0-1 representing the start and end points of the spline.

For more information, check out this related question that provides a helpful example.

Answer 2

When working with splines, it's important to specify the number of points you want the curve to interpolate in order to achieve the desired smoothness. Simply providing control points is not enough for the curve to know how smooth you want it to be.

Consider the following approach:

// Define the number of points for smoothing the curve
var numPoints = 100;

spline = new THREE.SplineCurve3([
   new THREE.Vector3(0, 0, 0),
   new THREE.Vector3(0, 200, 0),
   new THREE.Vector3(150, 150, 0),
   new THREE.Vector3(150, 50, 0),
   new THREE.Vector3(250, 100, 0),
   new THREE.Vector3(250, 300, 0)
]);

var material = new THREE.LineBasicMaterial({
    color: 0xff00f0,
});

var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(numPoints);

for(var i = 0; i < splinePoints.length; i++){
    geometry.vertices.push(splinePoints[i]);  
}

var line = new THREE.Line(geometry, material);
scene.add(line);

Additionally, as mentioned in @juan Mellado's answer, you can determine a position on the spline using spline.getPoint(t), where t is a value between 0-1 representing the start and end points of the spline.

For more information, check out this related question that provides a helpful example.

Answer 3

Answer №2

Here is a technique I use to create curves between two points in a 3D scene, particularly on a globe:

function generateCurve(start, end, elevation) {
    var startPoint3D = globe.translateCoordinatesToPoint(start.latitude, start.longitude);
    var endPoint3D = globe.translateCoordinatesToPoint(end.latitude, end.longitude);
    var midPoint = (new LatLon(start.latitude, start.longitude)).midpointTo(new LatLon(end.latitude, end.longitude));
    var middlePoint3D = globe.translateCoordinatesToPoint(midPoint.lat(), midPoint.lon(), elevation);

    var curve = new THREE.QuadraticBezierCurve3(startPoint3D, middlePoint3D, endPoint3D);
    //   var curve = new THREE.CubicBezierCurve3(startPoint3D, startPoint3D_control, endPoint3D_control, endPoint3D);

    var curvePath = new THREE.CurvePath();
    curvePath.add(curve);
    //   curvePath.add(curve);
    return curvePath;
}

Then you can call the function like this:

var curvePath = globe.generateCurve(item1, item2, 200);
var curveMaterial = new THREE.LineBasicMaterial({color: 0xFFFFAA, linewidth: 3});
var curveLine = new THREE.Line(curvePath.createPointsGeometry(20), curveMaterial);
globe.scene.add(curveLine);

Keep in mind the Quadratic or Cubic method of curve creation.

Answer 4

Here is a technique I use to create curves between two points in a 3D scene, particularly on a globe:

function generateCurve(start, end, elevation) {
    var startPoint3D = globe.translateCoordinatesToPoint(start.latitude, start.longitude);
    var endPoint3D = globe.translateCoordinatesToPoint(end.latitude, end.longitude);
    var midPoint = (new LatLon(start.latitude, start.longitude)).midpointTo(new LatLon(end.latitude, end.longitude));
    var middlePoint3D = globe.translateCoordinatesToPoint(midPoint.lat(), midPoint.lon(), elevation);

    var curve = new THREE.QuadraticBezierCurve3(startPoint3D, middlePoint3D, endPoint3D);
    //   var curve = new THREE.CubicBezierCurve3(startPoint3D, startPoint3D_control, endPoint3D_control, endPoint3D);

    var curvePath = new THREE.CurvePath();
    curvePath.add(curve);
    //   curvePath.add(curve);
    return curvePath;
}

Then you can call the function like this:

var curvePath = globe.generateCurve(item1, item2, 200);
var curveMaterial = new THREE.LineBasicMaterial({color: 0xFFFFAA, linewidth: 3});
var curveLine = new THREE.Line(curvePath.createPointsGeometry(20), curveMaterial);
globe.scene.add(curveLine);

Keep in mind the Quadratic or Cubic method of curve creation.

Answer 5

Answer №3

It is important that the parameter for the getPoint function falls within the range of [0 to 1]:

// This is a virtual method in the base class that needs to be implemented in subclasses
//  - t should be a value between 0 and 1

THREE.Curve.prototype.getPoint = function ( t ) {
...

Answer 6

It is important that the parameter for the getPoint function falls within the range of [0 to 1]:

// This is a virtual method in the base class that needs to be implemented in subclasses
//  - t should be a value between 0 and 1

THREE.Curve.prototype.getPoint = function ( t ) {
...

Crafting a smooth curve between a pair of points using Three.js

Answer №1

Answer №2

Answer №3

Similar questions

How can I find a user's ID in a JSON file using for...in loop in Discord.js?

Issues with utilizing jQuery AJAX for form submissions

The Yeoman Angular Coffee router is not routing properly and displays an error message "cannot GET"

What is the way to activate Dynamic ng-model from a controller?

What is the best way to engage in conversations with several users using socket.io?

Error: The use of import statement is not allowed outside a module in JavaScript due to a Syntax

I developed an RPG game with an interactive element using jQuery. One of the biggest challenges I'm facing is the random selection process for determining which hero will be targeted by the enemy bots during battles

Retrieve data from an HTML form and utilize it to search a JSON array for a specific value

Launching a Node.js Express application on Heroku

Eliminate any duplicate items from the array containing objects

The session in Express.js is not retained across different domains

AngularJS and Handlebars (npm)

javascript functionality may be affected in Internet Explorer and Firefox following the upgrade to jquery version 1.8.3

Please proceed with submitting your choices in the order that you have selected

Getting inaccurate results by entering numbers

I am creating an HTML page that incorporates p5.js, and the text I'm rendering

Express route encountered an error with an undefined value

Issue with Jest Testing: React Fragment Not Being Rendered

Altering the dimensions of a <div> based on the retrieved data

Transferring the "key" and "values" data from a JSON object to a perl script