Create a BezierCurve dynamically using Three.js

Question

Create a BezierCurve dynamically using Three.js

I'm struggling to dynamically generate a BezierCurve from arrays in JavaScript. I tried using push method, but it's not working as expected.

var x = [0,10,100,220,100, etc,...];
var y = [10,0,100,200,200, etc,...];
var z = [100,220,10,0,100, etc,...];

var points = [];

for(i=0; i < x.length; i++){ 
   points.push( new THREE.Vector3( x[i], y[i], z[i] ) );
   } 

var curve = new THREE.CubicBezierCurve3( points );

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

Any suggestions on how to tackle this issue?

javascript three.js bezier

Answer 1

Answer №1

Here is a way to create a CubicBezierCurve3 using JavaScript:

var curve = new (Function.bind.apply(THREE.CubicBezierCurve3, [null].concat(points)));

Alternatively, if you only need compatibility with ES6 browsers, you can use the spread operator like this:

var curve = new THREE.CubicBezierCurve3(...points);

Answer 2

Here is a way to create a CubicBezierCurve3 using JavaScript:

var curve = new (Function.bind.apply(THREE.CubicBezierCurve3, [null].concat(points)));

Alternatively, if you only need compatibility with ES6 browsers, you can use the spread operator like this:

var curve = new THREE.CubicBezierCurve3(...points);

Create a BezierCurve dynamically using Three.js

Answer №1

Similar questions

Exploring mysterious traits through inheritance

Fine-tuning CSS layout based on perspective alteration

Addressing three visual problems with an html form input, dropdown menu, and clickable button

Ways to display a default view in React

Which is better for a jQuery/Ajax Login Box: JSONP or CORS?

Executing numerous GET requests with varying parameters in AngularJS

The dangers posed by vulnerabilities in the React library

Steps for displaying innerHTML values conditionally with a pipe

What is the best way to determine the left and top coordinates when resizing a draggable image within a container?

Searching and Sorting through JSON Data in React Native

Allowing input fields to accept decimal numbers

Having an issue with my JavaScript burger menu not functioning properly

What is the best method for accessing the service response data when I am sending back an array of custom map with a promise as an object?

Experiencing a 400 error while transitioning from ajax to $http?

Refresh the page with user input after a button is clicked without reloading the entire page, using Python Flask

Is it possible for me to retrieve the error message from my response?

Exploring the Past: How the History API, Ajax Pages, and

The step-by-step guide to testing an Angular promise using Jasmine

Rearrange element's placement using Jquery Drag & Drop

Verify if there is a cookie available; then execute the load() function. If the cookie matches, it is necessary to