Is it Possible to Transform a THREE.CatmullRomCurve3 into a 3D Mesh?

Question

Is it Possible to Transform a THREE.CatmullRomCurve3 into a 3D Mesh?

In my latest project, I managed to create a stunning 3D line graph using THREE.js and the CatmullRomCurve3 class for smooth curves. Everything was going smoothly until I attempted to turn that curve into a mesh and possibly extrude it.

My initial approach resulted in errors because it seems that a curve is not compatible with the geometry constructor:

    var geometry = new THREE.ShapeGeometry( curve );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var mesh = new THREE.Mesh( geometry, material ) ;

The error messages led me to explore using the curve as an extrudePath parameter in examples like this:

var extrudeSettings = {
    steps           : 100,
    bevelEnabled    : false,
    extrudePath     : curve
};

However, this method still requires a shape to be passed to ExtrudeGeometry, which feels redundant since the curve already defines the desired shape. Is there a more straightforward way to achieve this without creating a separate shape?

If anyone has any insights or solutions to this challenge, I would greatly appreciate your help!

javascript three.js geometry catmull-rom-curve

Answer 1

Answer №1

When using ShapeGeometry in three.js, make sure to pass an instance of type THREE.Shape instead of a Three.Curve object. Keep in mind that THREE.CatmullRomCurve3 is a 3D curve while THREE.Shape represents a 2D entity, resulting in flat shapes. To resolve this issue, follow these steps:</p>

<p>First, sample your curve and then create a new instance of THREE.Shape. Note that the z-coordinates of the points will be disregarded.</p>

<pre><code>const points = curve.getPoints(64);
const shape = new THREE.Shape(points);
const geometry = new THREE.ShapeGeometry(shape);

View Example Here

three.js version R91

Answer 2

When using ShapeGeometry in three.js, make sure to pass an instance of type THREE.Shape instead of a Three.Curve object. Keep in mind that THREE.CatmullRomCurve3 is a 3D curve while THREE.Shape represents a 2D entity, resulting in flat shapes. To resolve this issue, follow these steps:</p>

<p>First, sample your curve and then create a new instance of THREE.Shape. Note that the z-coordinates of the points will be disregarded.</p>

<pre><code>const points = curve.getPoints(64);
const shape = new THREE.Shape(points);
const geometry = new THREE.ShapeGeometry(shape);

View Example Here

three.js version R91

Answer 3

Answer №2

If you're looking to create a ribbon-like effect, here's a basic concept of how you can achieve it:

https://i.sstatic.net/78bwG.png

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-0.5, 4, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var curve = new THREE.CatmullRomCurve3(
  [
    new THREE.Vector3(-2, 2, 0),
    new THREE.Vector3(-1, 0.5, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(1, 3, 0),
    new THREE.Vector3(2, 1, 0)
  ]
);

var pointsCount = 50;
var pointsCount1 = pointsCount + 1;
var points = curve.getPoints(pointsCount);

var pts = curve.getPoints(pointsCount);
var width = 2;
var widthSteps = 1;
let pts2 = curve.getPoints(pointsCount);
pts2.forEach(p => {
  p.z += width;
});
pts = pts.concat(pts2);

var ribbonGeom = new THREE.BufferGeometry().setFromPoints(pts);

var indices = [];
for (iy = 0; iy < widthSteps; iy++) { // inspired by PlaneBufferGeometry
  for (ix = 0; ix < pointsCount; ix++) {
    var a = ix + pointsCount1 * iy;
    var b = ix + pointsCount1 * (iy + 1);
    var c = (ix + 1) + pointsCount1 * (iy + 1);
    var d = (ix + 1) + pointsCount1 * iy;
    // faces
    indices.push(a, b, d);
    indices.push(b, c, d);
  }
}
ribbonGeom.setIndex(indices);
ribbonGeom.computeVertexNormals();

var ribbon = new THREE.Mesh(ribbonGeom, new THREE.MeshNormalMaterial({
  side: THREE.DoubleSide
}));
scene.add(ribbon);

var line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(points), new THREE.LineBasicMaterial({
  color: "red",
  depthTest: false
}));
scene.add(line);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 4

If you're looking to create a ribbon-like effect, here's a basic concept of how you can achieve it:

https://i.sstatic.net/78bwG.png

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-0.5, 4, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var curve = new THREE.CatmullRomCurve3(
  [
    new THREE.Vector3(-2, 2, 0),
    new THREE.Vector3(-1, 0.5, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(1, 3, 0),
    new THREE.Vector3(2, 1, 0)
  ]
);

var pointsCount = 50;
var pointsCount1 = pointsCount + 1;
var points = curve.getPoints(pointsCount);

var pts = curve.getPoints(pointsCount);
var width = 2;
var widthSteps = 1;
let pts2 = curve.getPoints(pointsCount);
pts2.forEach(p => {
  p.z += width;
});
pts = pts.concat(pts2);

var ribbonGeom = new THREE.BufferGeometry().setFromPoints(pts);

var indices = [];
for (iy = 0; iy < widthSteps; iy++) { // inspired by PlaneBufferGeometry
  for (ix = 0; ix < pointsCount; ix++) {
    var a = ix + pointsCount1 * iy;
    var b = ix + pointsCount1 * (iy + 1);
    var c = (ix + 1) + pointsCount1 * (iy + 1);
    var d = (ix + 1) + pointsCount1 * iy;
    // faces
    indices.push(a, b, d);
    indices.push(b, c, d);
  }
}
ribbonGeom.setIndex(indices);
ribbonGeom.computeVertexNormals();

var ribbon = new THREE.Mesh(ribbonGeom, new THREE.MeshNormalMaterial({
  side: THREE.DoubleSide
}));
scene.add(ribbon);

var line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(points), new THREE.LineBasicMaterial({
  color: "red",
  depthTest: false
}));
scene.add(line);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Is it Possible to Transform a THREE.CatmullRomCurve3 into a 3D Mesh?

Answer №1

Answer №2

Similar questions

Blending conditional and non-conditional styles in VueJS

Node, Express, and Angular redirection problem encountered

The input field does not accept any values even after setting it to be editable

Dividing an Image into segments using Javascript

Regular expression in JavaScript that specifically matches numbers formatted in the style of JavaScript

Tips for transferring the name field to a different page upon clicking

Introducing the latest issue: "Annotation Not Found" bug detected in flowjs version 0.54.0!

An illustration of webpack 4 and Vue.js compatibility tailored specifically for Internet Explorer 11, featuring multiple entry points

Trigger a click based on the CSS path starting from a specific element in the DOM

Prevent selection duplication in adjacent select by disabling the option in AngularJS ng-options

Struggling to destructure props when using getStaticProps in NextJS?

Utilizing Grunt-express and static routes: The server must include a method named 'listen' that functions in the same way as http.Server.listen

Utilizing children as a prop within a Vue component

What are the steps to executing commands with child processes in Node.js?

Replacing menu styling with JavaScript using C#

stuck with an outdated dependency causing issues with create-react-app

Registering the service worker resulted in an error stating "Undefined is not a function"

Tips for managing both DOM manipulation and state changes at the same time in AngularJS

Passing a JSON payload back and forth from JavaScript to PHP within a shared directory

Dynamic and operational icons accompany the AngularJS search input field