How to extrude a spline to scene's origin with THREE.js

Question

I\'m having headaches when trying to extrude a spline to scene\'s origin. Here\'s what I\'m trying to do :

I\'m creating a spline with

let centerX = 0
le         


        

Answer 1

As an option, you can modify arrays of coordinates of an open-ended cylinder buffer geometry with coordinates of your spline:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 10);
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);

scene.add(new THREE.GridHelper(10, 10, "white"));

var divisions = 100;
var points = [
  new THREE.Vector3(-5, 5, 0),
  new THREE.Vector3(-2, 2, 3),
  new THREE.Vector3(1, 3, 2),
  new THREE.Vector3(3, 5, -3),
  new THREE.Vector3(-3, 4, -2)
];

var curve = new THREE.CatmullRomCurve3(points);
curve.closed = true;
var upperPoints = curve.getPoints(divisions);
var lowerPoints = upperPoints.map(p => {
  return new THREE.Vector3(p.x, 0, p.z)
});
var upperGeom = new THREE.BufferGeometry().setFromPoints(upperPoints);
var lowerGeom = new THREE.BufferGeometry().setFromPoints(lowerPoints);

var cylGeom = new THREE.CylinderBufferGeometry(1, 1, 1, divisions, 1, true); // create an open-ended cylinder
cylGeom.attributes.position.array.set(upperGeom.attributes.position.array, 0); // set coordinates for upper points
cylGeom.attributes.position.array.set(lowerGeom.attributes.position.array, (divisions + 1) * 3); // set coordinates of lower points
cylGeom.computeVertexNormals();

var result = new THREE.Mesh(cylGeom, new THREE.MeshBasicMaterial({
  color: 0xaaaaaa,
  wireframe: true
}));
scene.add(result);


var upperLine = new THREE.Line(upperGeom, new THREE.LineBasicMaterial({
  color: "aqua"
}));
scene.add(upperLine);
var lowerLine = new THREE.Line(lowerGeom, new THREE.LineBasicMaterial({
  color: "yellow"
}));
scene.add(lowerLine);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Depends on your needs, you can modify points of any primitive.