Как использовать Threejs CatmullRomCurve3.

В этой статье я собираюсь показать вам, как можно использовать объект класса THREE.CatmullRomCurve в своем проекте для создания плавной наклонной кривой?

CatmullRomCurve3 используется для создания плавной наклонной кривой между как минимум двумя точками в 3D-среде.

Давайте посмотрим, как реализовать THREE.CatmullRomCurve3.

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;

Конструктор CalmullRomCurve3 принимает массив трехмерных точек, более 2. В приведенном выше примере я взял 4 точки для создания квадратных путей.

point.map создает новый массив с заданными 4 точками.

CatmullRomCurve3.getPoint(int: деление);

var vertices = [];

curve.getPoints(100).forEach((e)=>{
    
    vertices.push(
            e.x, e.y, e.z
                );
  });

Метод CatmulRomCurves.getPoints( int : Division) возвращает массив точек, соответствующий значению деления. Большее значение деления дает вашему пути плавные кривые в углах.

Массив вершин используется для атрибута положения геометрии.

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);

Ссылки и ресурсы: