23 Jun 2021

Threejs CatmullRomCurve3 Tutorial/Example+Demo

In this post I am going to show you That how you can use THREE.catCulRomCurve class's object in your project.

CatCulRomCurve3 is used to create a smooth declined curve path between 2 or even more than 2 given points in 3D environment.

Let's see How to implement THREE.CatCulRomCurve3.

var point = [];
point.push([1,0,1], [1,0,-1] , [-1,0,-1], [-1,0,1]);

const curve = new THREE.CatmullRomCurve3(
           return  new THREE.Vector3(e[0], e[1],e[2])
               curve.closed = !false;
               curve.tension = .1;
CalmulRomCurve3 constructor take an Array of three dimensional points, more than 2. In above example I have taken 4 points to create square like paths.

point.map creates an new Array with given 4 points.

CatmullRomCurve3.getPoint( int : division );

var vertices = [];

            e.x, e.y, e.z
CatmulRomCurves.getPoints( int : division) method returns Array of point accordingly division value. More division value give your path smooth curves at corner.

vertices array is used for geometry's position attribute.

var geometry = new THREE.BufferGeometry();

geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

var material  = new THREE.LineBasicMaterial({});

const curveObject = new THREE.Line( geometry, material );

//Adding to Scene
Explanation : ... updating


No comments:

No Comments