How to draw CatmullRomCurve3(ClosedSplineCurve3) from bufferGeometry

Question

For general lines with two or three vertices, I got help from @Wilt at the question: Can I merge geometry in every frame in rendering process using three.js?

So that I can generate a large number of lines with one single bufferGeometry.

using the code like:

var geometry = new THREE.BufferGeometry();
positions = new Float32Array(total * pointsNum * 3);
geometry.addAttribute(
    'position', new THREE.BufferAttribute(positions, 3)
);
var material = new THREE.LineBasicMaterial({
    transparent: true,
    color: 0x0000ff,
    opacity: 1
});
var line = new THREE.Line(bufferGeometry, material);
var all_vertices = [new THREE.Vector3(-1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(1, 0, 0)];
for(var i = 0; i< all_vertices.length; i++){
        positions[i] = all_vertices[i].x;
        positions[i+1] = all_vertices[i].y;
        positions[i+2] = all_vertices[i].z;
}

var start = all_vertices.length;
var end = start + all_vertices.length;

bufferGeometry.addGroup(start, end);
line.geometry.attributes.position.needsUpdate = true

What I was thinking is apparently too naive that I could get a CatmullRomCurve3 line by easily adding more vertices in var all_vertices. The fact is it is not that easy. For example, I got a few vertices like:

var maxX = Math.random() * 0.7 + 0.7;
var maxY = Math.random() * (maxX / 2) + 0.01;
var maxZ = Math.random() * (maxX - maxY) + maxY;

console.log(maxX + ' ' + maxY + ' ' + maxZ);
//32, 45, 38, 36, 35, 39, 41, 42
var degs = [32, 45, 38, 36, 35, 39, 41, 42];
var alpha = 32;
var tgAlpha = Math.tan(alpha);
var xpow = maxX * maxX;
var zpow = maxZ * maxZ;

orig[0] = new THREE.Vector3(-maxX, 0, 0);
var x1 = -Math.sqrt(xpow * zpow / (zpow + tgAlpha * xpow));
var z1 = x1 * tgAlpha;
orig[1] = new THREE.Vector3(x1, maxY, z1);
orig[2] = new THREE.Vector3(-x1, -maxY, z1);
orig[3] = new THREE.Vector3(maxX, 0, 0);
orig[4] = new THREE.Vector3(-x1, maxY, -z1);
orig[5] = new THREE.Vector3(x1, -maxY, -z1);

And apply them to var curve = new THREE.CatmullRomCurve3(orig); curve.closed = true;, As a result, I can get one closed line like a infinity sign in the 3D space.

So how can I use these vertices to create the CatmullRomCurve3 from bufferGeometry? Can I scale it to some other size?

The Jsfiddle is https://jsfiddle.net/do7ur33u/2/

Thanks for any help.

How to draw CatmullRomCurve3(ClosedSplineCurve3) from bufferGeometry

0 Answers0