Vector3 Math in THREE JS - Calculating Control Points for BezierCurve

Questions
1

Hey guys,

So I am currently trying to calculate the control points of dynamically created bezier curves.

I found a formula that I am trying to follow, but the way vector math works in three js is confusing me.

Here is the formula that I had found: Finding the Control Points of a Bezier Curve |

Here is what I have, basically everything is NaN and I’m assuming that is due to not using the built in vector3 functions, but I’m not sure how to properly tether them together or if that is even possible.

var point0Percentage = .25;
        var point1Percentage = .75;

        // start at 1 because 0 would make the first lines start and end point the same which we don't want!
        for(var k = 1; k < linePoints.length; k++){

            var point0 = ((1 - point0Percentage) * linePoints[0]) + point0Percentage * linePoints[k];
            var point1 = ((1 - point1Percentage) * linePoints[0]) + point1Percentage * linePoints[k];
            
            console.log(point0);
            console.log(point1);

            var controlPoint0 = new THREE.Vector3(
                linePoints[0].x,
                point0 - (1 - point0Percentage * linePoints[0] / point0Percentage),
                linePoints[0].z
            );
            
            var controlPoint1 = new THREE.Vector3(
                linePoints[0].x,
                point1 - (1 - point1Percentage * linePoints[0] / point1Percentage),
                linePoints[0].z
            );

            var curve = new THREE.CubicBezierCurve3(linePoints[0], controlPoint0, controlPoint1, linePoints[k]);
            var curvePoints = curve.getPoints(50);
            var lineGeo = new THREE.BufferGeometry().setFromPoints(curvePoints);
            var line = new THREE.Line(lineGeo, lineMat);
            line.visible = false;
            hexSphere.add(line);
            this.clusterLines.push(line);
        }

Thanks guys!

2

If linePoints is an array of THREE.Vector3(), then such operation is irrelevant. You can’t multiply a vector with scalar value this way. Better to do it like that: linePoints[k].multiplyScalar(point0Percentage).
Feel free to read the docs: three.js docs, three.js docs

3

Okay awesome!

Still a bit confused currently trying to convert what I have to this.

So far I have done this and it looks to be generating vector3’s

 var point0 = linePoints[0].multiplyScalar(1 - point0Percentage).
                add(linePoints[k].multiplyScalar(point0Percentage));
                

            var point1 = linePoints[0].multiplyScalar(1 - point1Percentage).
                add(linePoints[k].multiplyScalar(point1Percentage));

Albeit, unsure if they are correct. The other operation I am having issues with still is where I pass in the value to the controlPoint vector. I need to effectively do this:

point0 - (1 - point0Percentage * linePoints[0] / point0Percentage)

So I have this so far to replace it:

point0.subScalar(1 - point0Percentage).multiplyScalar(linePoints[0] / point0Percentage);

It is blowing up on that. Thoughts?

4

If you do point0.subScalar(some_value), you’re changing point0.

5

So I scrapped all of this, and added .y to my var point calculation since I am only passing in the Y to my controlpoints and it SEEMS to be working. I am getting curved lines that attach to all of my points… Wondering if I even needed to use vector math. I think I am still following the above linked algo that I found for figuring this out… but not 100% sure.

var point0Percentage = .25;
        var point1Percentage = .75;

        // start at 1 because 0 would make the first lines start and end point the same which we don't want!
        for(var k = 1; k < linePoints.length; k++){

            var point0 = 1 - point0Percentage * linePoints[0].y + point0Percentage * linePoints[k].y;
            var point1 = 1 - point1Percentage * linePoints[0].y + point1Percentage * linePoints[k].y;
           
            var controlPoint0 = new THREE.Vector3(
                linePoints[0].x,
                point0 - (1 - point0Percentage * linePoints[0].y / point0Percentage),
                linePoints[0].z
            );
            
            var controlPoint1 = new THREE.Vector3(
                linePoints[0].x,
                point1 - (1 - point1Percentage * linePoints[0].y / point1Percentage),
                linePoints[0].z
            );
            
            var curve = new THREE.CubicBezierCurve3(linePoints[0], controlPoint0, controlPoint1, linePoints[k]);
            var curvePoints = curve.getPoints(50);
            var lineGeo = new THREE.BufferGeometry().setFromPoints(curvePoints);
            var line = new THREE.Line(lineGeo, lineMat);
            line.visible = false;
            hexSphere.add(line);
            this.clusterLines.push(line);

        }