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(
    point.map((e)=>{
           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 = [];

curve.getPoints(100).forEach((e)=>{
    
    vertices.push(
            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
s.add(curveObject);
 
Explanation : ... updating

Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE