Moving camera smoothly along a Geometry made out of CurvePath

Questions
,
1

Can please someone help me in moving the camera along a geometry made of points from CurvePath()?
I am including the geometry code here:

curvePath = new THREE.CurvePath();
curvePath = findAPath(startingPoint, endingPoint, curvePath);

/* My curvePath actually ends up as an Object like this : 
Object { arcLengthDivisions: 200, curves: Array[3], autoClose: false }

where curves contains three objects, each can be either of these two - LineCurve3, QuadraticBezierCurve3 */

curveGeometry = new THREE.Geometry();
curveGeometry.vertices = curvePath.getPoints( 100 );

const curveMaterial = new THREE.LineBasicMaterial( { color : 0xffff00, linewidth: 5 } );
const curveObject = new THREE.Line( curveGeometry, curveMaterial );

21 PM

Till now I was moving the camera along this yellow line seen here in the screenshot by elementary operations in camera’s x, y, z positions in the render loop on different conditions for all the different curves inside the curvePath element.

But this makes it difficult to actually apply easing functions over the camera movement. Plus, this way I am not able to tilt the camera along the direction it is moving, it moves along the path but always faces forward.

Wished to have a single geometry, so can move camera over it smoothly, tried implementing something like in this example:
https://threejs.org/examples/#webgl_geometry_extrude_splines

Here they have one tubeGeometry and have moved the camera by utilising the geometry’s pre-defined properties like parameters, tangents, binormals in the render() loop.

1 Like
2

this may be help you Curve Path

3

Have you tried CatmullRomCurve3 already? In this way, you maybe can use a single curve for the entire path.

BTW: Since R88 the new (recommended) way to create a geometry from a series of points is this:

var points = curve.getPoints( 100 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );

Can you show some code what you want to achieve?

You could place the camera into a Group object. In this way, you can animate the group and orientate the camera independently.

4

Hey, thanks @Mugen87 !
Yes, I have worked with CatmullRomCurve3 and I know its easy to use a single curve for the entire path that way, but here requirements were bit different!

Yes, saw the new release, logs are still being written. Can’t wait to start working with the new R88, once all the changes are documented!

But this makes it difficult to actually apply easing functions over the camera movement.
Can you show some code what you want to achieve?

That thing is now working! Was treating the curves differently earlier, had to just use the curvePath to get the points for animating the camera!

You could place the camera into a Group object. In this way, you can animate the group and orientate the camera independently.

Yeah, will give that a try!
Thanks :slight_smile:

5

Hey, that thing was indeed helpful! Thanks!
One thing was not striking in my mind, this link helped me with that!
I am now able to move my camera over my yellow Line :slight_smile:

Thanks :slight_smile:

6

Welcome ma’am :slightly_smiling_face:

7

BTW: Since R88 the new (recommended) way to create a geometry from a series of points is this…

Man, it’s so hard to keep track of these changes. When was this introduced?

8

Docs were also update e.g. https://threejs.org/docs/#api/extras/curves/QuadraticBezierCurve

1 Like
9

Thanks. Actually this a nice improvement to the API :slight_smile: