Creating a three-dimensional spline that originates from the scene using THREE.js

I'm struggling with headaches while attempting to extrude a spline to the scene's origin. Here is my current approach:

First, I create a spline using the following code snippet:

let centerX = 0
let centerY = 0
let radius = 200
let coils = 50
let rotation = 2 * Math.PI
let thetaMax = coils * Math.PI
let awayStep = radius / thetaMax
let chord = 5
let vertices = []

for (let theta = chord / awayStep; theta <= thetaMax;) {
  let away = awayStep * theta
  let around = theta + rotation
  let x = centerX + Math.cos(around) * away
  let y = centerY + Math.sin(around) * away

  theta += chord / away

  let vec3 = new THREE.Vector3(x, y, 0)
  vertices.push(vec3)
}

let axisPoints = []

data.forEach((d, i) => {
  axisPoints.push(new THREE.Vector3(vertices[i].z, vertices[i].y / 2, vertices[i].x / 2))
})

let axis = new THREE.CatmullRomCurve3(axisPoints)
let geometry = new THREE.BufferGeometry().setFromPoints(axis.getPoints(axisPoints.length))
let material = new THREE.LineBasicMaterial({
  color: 0x481e34,
  transparent: true,
  opacity: 0.2
})
let splineObject = new THREE.Line(geometry, material)

scene.add(splineObject)

Now, I am trying to extrude a "mesh" or "face" along this spline, leading directly to the scene's origin at 0, similar to the image shown https://i.sstatic.net/YyNjy.png.

Despite numerous attempts, I have not been able to achieve this desired outcome. Any assistance would be greatly appreciated!

Thank you in advance!

Answer №1

If you're looking to customize the arrays of coordinates for an open-ended cylinder buffer geometry using your spline, here's a way to do it:

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>

Depending on your requirements, feel free to adjust the points of any primitive.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Non-negotiable, non-deletable component of a text field

My goal is to create a textarea with a default value that cannot be removed by the user, but they should be able to add extra text after it. <textarea>This is constant</textarea> As shown above, the textarea has a default value. How can I ...

Having trouble with the Material-UI v1 Drawer component on the iOS 13 beta version

As we prepare for the upcoming iOS release, set to debut next month, it has come to our attention that the main navigation on our website is experiencing issues when accessed using an iOS device running the latest beta (iOS13). While the drawer opens as ex ...

Issue with Google Adsense - adsbygoogle.push() error: Pages can only support one AdSense head tag. The additional tag will be disregarded

After adding my script tag to the navbar component, I encountered an error on my site during the next js build: Google Adsense error -adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored <Head> ...

The sequence of Request and Response in Express

When using the Express app.get() method, does the order of writing response and request matter? For example, is there a difference between app.get("/", (req, res) => and app.get("/", (res, req) =>? ...

What is the best way to transfer Kendo Grid row data to a Kendo popup window within a partial view using jQuery?

I am currently facing a challenge in passing the row data from the Kendo Grid to a partial view that is displayed through a Kendo popup window. Within the partial view, users have the option to upload an image file related to the specific row record. This ...

Material UI Table dynamically updates with Firestore real-time data

My current code aims to update a Material UI table in real-time with data from a Firestore database. I can fetch the data and store it in an array, but when I assign this array to the table data, nothing changes. I've heard that I should use states fo ...

The Material UI ToolTip displays inaccurately when placed within a container that has overflow scroll enabled

Within my ReactJS application, I have implemented a list of Material UI ToolTips with IconButtons nested inside a div element featuring overflow: scroll. One specific row displays the Material UI ToolTip in the following manner: <ClickAwayListener onCl ...

Is there a way for JavaScript to generate an image and smoothly transition it from its initial state to its final style?

I am currently working on a JavaScript game that involves moving IMG elements by adjusting their x/y/width/height/opacity properties and utilizing CSS transitions to smoothly move them to their target locations, triggering an event upon arrival. Everything ...

How to modify a value in a document within a MongoDB collection

I'm having an issue with updating the 'panel' field in both the cards collection and projects collection. Here is my code snippet: const project = await Project.findOne({"code":currentUser.groupcode}); // this works const ...

Having trouble setting a background image for a specific DIV element in HTML

I am in the process of updating my webpage, and need some assistance implementing a small background image. Here is what I have done so far: https://i.sstatic.net/nTxtD.png Below is the marked section where I am trying to add the background image: https ...

a expanding list with automatically loaded information

After trying various lists found online without success, it seems that the issue may be due to the dynamic loading of the list content using JQuery ajax. During $(document).ready, the list is loaded and the HTML data is appended to the div. Subsequently, ...

Tips for avoiding a button reverting to its original state upon page refresh

I have a button with the ID #first that, when clicked, is replaced by another button with the ID #second. However, if I refresh the page after clicking on the second button, it goes back to displaying the first button. Is there a way to make sure that th ...

Push function is not available in Redux

Currently, I am facing an issue while trying to use the state of a component in other components. Since this state needs to be accessed by multiple components, I have decided to switch to Redux. However, I encountered an error 'newUsers.push is not a ...

TypeScript will show an error message if it attempts to return a value and instead throws an

Here is the function in question: public getObject(obj:IObjectsCommonJSON): ObjectsCommon { const id = obj.id; this.objectCollector.forEach( object => { if(object.getID() === id){ return object; } }); throw new Erro ...

Ways to integrate vanilla JavaScript with VueJS

I am currently working on implementing a vuejs component and could use some guidance. Can anyone provide assistance on where to place the JavaScript code in order for it to function correctly? As a newcomer to vuejs, I am still uncertain about how to prope ...

Updating the state across various components proves to be a challenge when relying on both the context API and higher order components

I have been working on updating the application state using the context API instead of using Redux, as I do not require all of its features and want to avoid prop drilling. With TypeScript, I created a global context and a higher-order component (HOC) wrap ...

Using jQuery, identify when any of the elements within every function are missing

In my JavaScript file, I have the following code snippet: var aryYears= []; $(".year").each(function(){ aryYears.push($(this).val()); }) This allows me to pass an array of years as a parameter in the saveChanges function. I want to make ...

Utilizing Express.js: Implementing a Route that is Outside the Current Router

app.js: var app = express(); app.use('/my-page', require('./routes/my-page.js')); my-page.js: const router = require('express').Router(); router.get('/one', function (req, res, next) { return res.send('thi ...

The following code automatically triggers the loading of a modal, which contains a checkbox upon loading

What is the best way to prevent the modal from showing again if the user checks the checkbox and clicks the close button? function popUp() { $("#LoadModal").show() var modal = document.getElementById('LoadModal') var closeBtn = document ...

Is there a way to access the value of a variable in Express that is stored in a different file?

Looking for a way to fetch the value of a variable that is located inside app.use? chatbot.js: const express = require('express'); const app = express.Router(); app.use(['/chat', '/chatbot'], (req, res, next) => { const ...