Creating fluid motion with a bezier curve in ThreeJS

Question

Creating fluid motion with a bezier curve in ThreeJS

I am looking to animate a bezier curve in ThreeJS with updating start, end, and control points. Eventually, I will have multiple curves animating simultaneously. What is the most efficient approach to achieve this?

When running the code snippet below, you will notice that I am creating the Bezier object, Geometry, and Line every time the frame renders. I remove the previous line from the scene and then add the new updated line. Is there a more optimal method for this? Perhaps by only updating the geometry without adding the line again?

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

/**
 Create the scene, camera, renderer
*/
function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);
  addCurve();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

/**
 Add the initial bezier curve to the scene
*/
function addCurve() {
  testPoint = 0;
  curve = new THREE.CubicBezierCurve3(
    new THREE.Vector3( testPoint, 0, 0 ),
    new THREE.Vector3( -5, 150, 0 ),
    new THREE.Vector3( 20, 150, 0 ),
    new THREE.Vector3( 10, 0, 0 )
  );
  curveGeometry = new THREE.Geometry();
  curveGeometry.vertices = curve.getPoints( 50 );
  curveMaterial = new THREE.LineBasicMaterial( { color : 0xff0000 } );
  curveLine = new THREE.Line( curveGeometry, curveMaterial );
  scene.add(curveLine);
}

/**
 On each frame render, remove the old line, create new curve, geometry and add the new line
*/
function updateCurve() {
  testPoint ++;
  scene.remove(curveLine);
  curve = new THREE.CubicBezierCurve3(
    new THREE.Vector3( testPoint, 0, 0 ),
    new THREE.Vector3( -5, 150, 0 ),
    new THREE.Vector3( 20, 150, 0 ),
    new THREE.Vector3( 10, 0, 0 )
  );
  curveGeometry = new THREE.Geometry();
  curveGeometry.vertices = curve.getPoints( 50 );
  curveLine = new THREE.Line( curveGeometry, curveMaterial );
  scene.add(curveLine);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  updateCurve();
  renderer.render(scene, camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

javascript three.js

Answer 1

Answer №1

Creating multiple new lines for each frame can be a costly operation.

What is the most efficient way to create animated curves?

One option could be utilizing shaders. However, implementing shaders may require more time. If you find the following suggestions sufficient for your needs, consider using them.

Enhancing curve updates in your code

I attempted to make minimal changes to your existing code and marked edited sections with "// EDITED" comments. I also introduced an array as you mentioned having multiple curves.

Clarification

Following advice from @WestLangley, it's best to avoid using the new keyword within the animation loop.
The CubicBezierCurve3 includes attributes like v0, v1, v2, and v3, which are instances of THREE.Vector3 provided initially. By modifying these attributes instead of creating new instances, you can update the vertices array without using the new keyword. Refer to this line for further details: See here.
Rather than recreating the line object, consider updating the geometry directly. Since you're working with a THREE.Line, only the vertices need modification. After altering the vertices, ensure to set
```
geometry.verticesNeedUpdate = true
```
to inform Three.js about the changes.

var camera, scene, renderer, geometry, material, mesh, curves = [];

init();
animate();

/**
 Create the scene, camera, renderer
*/
function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);
  addCurve();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

/**
 Add the initial bezier curve to the scene
*/
function addCurve() {
  testPoint = 0;
  curve = new THREE.CubicBezierCurve3(
    new THREE.Vector3( testPoint, 0, 0 ),
    new THREE.Vector3( -5, 150, 0 ),
    new THREE.Vector3( 20, 150, 0 ),
    new THREE.Vector3( 10, 0, 0 )
  );
  curveGeometry = new THREE.Geometry();
  curveGeometry.vertices = curve.getPoints( 50 );
  curveMaterial = new THREE.LineBasicMaterial( { color : 0xff0000 } );
  curveLine = new THREE.Line( curveGeometry, curveMaterial );
  scene.add(curveLine);
  
  // EDITED
  curves.push(curveLine); // Include curve in curves array
  curveLine.curve = curve; // Connect curve object to this curveLine
}

/**
 On each frame render, remove the old line, create a new curve, geometry, and add the updated line
*/
function updateCurve() {
  testPoint ++;
  
  // EDITED
  for (var i = 0, l = curves.length; i < l; i++) {
    var curveLine = curves[i];
    
    // Update x value of v0 vector
    curveLine.curve.v0.x = testPoint;
    // Update vertices
    curveLine.geometry.vertices = curveLine.curve.getPoints( 50 ); 
    // Notify three.js that vertices have been modified
    curveLine.geometry.verticesNeedUpdate = true;
  }
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  updateCurve();
  renderer.render(scene, camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

Answer 2

Creating multiple new lines for each frame can be a costly operation.

What is the most efficient way to create animated curves?

One option could be utilizing shaders. However, implementing shaders may require more time. If you find the following suggestions sufficient for your needs, consider using them.

Enhancing curve updates in your code

I attempted to make minimal changes to your existing code and marked edited sections with "// EDITED" comments. I also introduced an array as you mentioned having multiple curves.

Clarification

Following advice from @WestLangley, it's best to avoid using the new keyword within the animation loop.
The CubicBezierCurve3 includes attributes like v0, v1, v2, and v3, which are instances of THREE.Vector3 provided initially. By modifying these attributes instead of creating new instances, you can update the vertices array without using the new keyword. Refer to this line for further details: See here.
Rather than recreating the line object, consider updating the geometry directly. Since you're working with a THREE.Line, only the vertices need modification. After altering the vertices, ensure to set
```
geometry.verticesNeedUpdate = true
```
to inform Three.js about the changes.

var camera, scene, renderer, geometry, material, mesh, curves = [];

init();
animate();

/**
 Create the scene, camera, renderer
*/
function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);
  addCurve();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

/**
 Add the initial bezier curve to the scene
*/
function addCurve() {
  testPoint = 0;
  curve = new THREE.CubicBezierCurve3(
    new THREE.Vector3( testPoint, 0, 0 ),
    new THREE.Vector3( -5, 150, 0 ),
    new THREE.Vector3( 20, 150, 0 ),
    new THREE.Vector3( 10, 0, 0 )
  );
  curveGeometry = new THREE.Geometry();
  curveGeometry.vertices = curve.getPoints( 50 );
  curveMaterial = new THREE.LineBasicMaterial( { color : 0xff0000 } );
  curveLine = new THREE.Line( curveGeometry, curveMaterial );
  scene.add(curveLine);
  
  // EDITED
  curves.push(curveLine); // Include curve in curves array
  curveLine.curve = curve; // Connect curve object to this curveLine
}

/**
 On each frame render, remove the old line, create a new curve, geometry, and add the updated line
*/
function updateCurve() {
  testPoint ++;
  
  // EDITED
  for (var i = 0, l = curves.length; i < l; i++) {
    var curveLine = curves[i];
    
    // Update x value of v0 vector
    curveLine.curve.v0.x = testPoint;
    // Update vertices
    curveLine.geometry.vertices = curveLine.curve.getPoints( 50 ); 
    // Notify three.js that vertices have been modified
    curveLine.geometry.verticesNeedUpdate = true;
  }
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  updateCurve();
  renderer.render(scene, camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

Creating fluid motion with a bezier curve in ThreeJS

Answer №1

Similar questions

Enhancing JavaScript Variables Through Dynamic Ajax/PHP Interaction

Cannot utilize the subscribed output value within the filter function

What causes duplicate packages to appear in Bower at times?

What is the best way to pass only the second parameter to a function in TypeScript?

How can I prevent overwriting previous input data in LocalStorage using Draftjs?

The output is generated by React useContext with a delay

No Angularjs redirection without the "onload" event

One way to eliminate a prefix from a downloaded file path is by trimming the URL. For example, if you have a URL like "http://localhost

Is it okay to incorporate this code into the existing plugin?

Upon clicking on a different div, a div will elegantly slide down from above the footer

Ways to specify the styles for tr, td, and label elements within a material table

Transforming vertex coordinates of a polygon using Pixi.js

Utilizing a jQuery AJAX request to invoke a web method within a

Issue with AdminLite 2.4.0 data table functionality malfunctioning

Issue with ngFor displaying only the second item in the array

Generatively generating a new element for the react application to be mounted on

Present a Java-generated JSON object on a JSP page using JavaScript

Submit a collection of images and an object to the server using ReactJS

During the development of my project using the MERN Stack, I faced a challenge that needed to be

Leveraging JavaScript within a Polymer component