I am currently working on a project that involves creating simple 3D models using dots and lines, whether curved or straight. In the initial version of the project, I utilized SVG elements for rendering, smooth curves, and mouse events.
Now, I am exploring the use of Three.js renderer instead of SVG. While I have successfully created 3D tubes to replace the curved lines, I am facing challenges in figuring out how to generate 3D surfaces based on multiple xyz coordinates.
Here is an illustration of a model consisting of 4 points and 4 lines (comprising 3 straight lines and 1 curved line):
https://i.sstatic.net/eigSQ.png
If we extend the curve to more points, it could look something like this:
https://i.sstatic.net/m0NIQ.png
My ultimate goal is to create a surface or plane similar to the blue shape depicted below:
https://i.sstatic.net/Qn1mE.png
This challenge was inspired by a discussion on Stack Overflow titled: convert bezier into a plane road in three.js
var material = new THREE.MeshBasicMaterial({ color: 0xc0c0c0 });
var path = new THREE.CatmullRomCurve3([
new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z),
new THREE.Vector3(dots[1].x, dots[1].y, -dots[1].z),
new THREE.Vector3(dots[2].x, dots[2].y, -dots[2].z),
new THREE.Vector3(dots[3].x, dots[3].y, -dots[3].z),
new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z)
]);
var pts = [],
a ;
for (var i = 0 ; i < 3 ; i++) {
a = i / 3 * Math.PI;
pts.push(new THREE.Vector2(Math.cos(a) * 1, Math.sin(a) * 1));
}
var shape = new THREE.Shape(pts);
var geometry = new THREE.ExtrudeGeometry(shape, {
steps : 10,
bevelEnabled : false,
extrudePath : path
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
However, the code above only results in another tube-like structure being created.