What is the correct method for combining curved lines to create a single geometry?

I need to optimize performance by combining thousands of sparsely arranged curved lines created with CubicBezierCurve3 into one geometry. Is there a way to feed them all into a single THREE.Line without the interconnected segments appearing connected? Or perhaps make those interconnecting line segments invisible?

Using LinePieces/LineSegments (line strip) is an option, but it would double the number of vertices and doesn't feel like the most appropriate approach..

Answer №1

A creative approach to utilizing NaN values in OpenGL has been discovered. By sending over NaN, it can be used as an instruction for OpenGL to jump to a specific point. To implement this in three.js, a workaround involving a fake empty bounding sphere is necessary. Although this makeshift solution may disrupt normal calculations, it proved effective for the intended purpose. Here is a pseudocode example:

var positions = [];

for(....)
{
    ...
    var pts = curve.getPoints(...);
    for(var p = 0; p < pts.length; p++)
        positions.push(pts[p].x, pts[p].y, pts[p].z);

    positions.push(NaN, NaN, NaN);
}

var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array(positions), 3, true ) );
geometry.boundingSphere = new THREE.Sphere();

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

Run a function once the ajax request has been completed

Despite seeing similar queries on SO multiple times (such as here), I couldn't find a solution that worked for me. I am using ajax to import JSON data for a slick slider. The slick slider needs to be initialized after the completion of the ajax impor ...

Using JavaScript, add a complex JSON record to a JSON variable by pushing it

I have been attempting to insert a complex JSON data record into a JSON variable using the following code: var marks=[]; var studentData="student1":[{ "term1":[ {"LifeSkills":[{"obtained":"17","grade":"A","gp":"5"}]}, {"Work":[{"obtained":"13"," ...

How can we leverage JavaScript to create logistic regression models for datasets and derive the beta-coefficients?

Exploring Logistic Regression in JavaScript In my current project, I am looking to fit a multi-variate logistic regression model to a dataset using JavaScript. My main goal is to extract the beta-coefficients for this model. Can anyone provide guidance on ...

What is the process for extracting text from one input field and using it as a placeholder in another input field?

I am developing a form creator that allows users to easily customize placeholder text for input fields. Users can simply type their desired placeholder text into a separate input field. Here is my current approach: HTML: <label>Title</label& ...

What is the best way to utilize jspdf for formatting data, specifically when wanting the first column to be in bold?

How can I customize data formatting using jspdf? Specifically, I would like the first column to be in bold and the second column in normal text. Additionally, I want to align them in the middle of the pdf output with different colors for each column. Belo ...

Troubleshooting: Issue with sending JSON data to front-end alongside HTML in Django

Here is the code snippet in question: import json class UserPageView(TemplateView): def get(self, request, *args, **kwargs): obj = User.objects.get(pk=17).username return TemplateResponse(request, template="user.html", context={' ...

Invoke a C# function (returning a string) within ASP.NET to set the source attribute for an HTML element

I have developed some C# Methods that return a string output, such as "C:/tracks/audio1.mp3", and I want to use this as a reference for my ASP.NET project. Now, I am trying to incorporate my method "GetTrackPath()" into the HTML audio tag so that the meth ...

Why is it that when I click outside of the <html> element, the click event bound to the <html> element is triggered?

const html = document.querySelector('html') const body = document.querySelector('body') body.onclick = () => { console.log('body clicked') } html.onclick = () => { console.log('html clicked') } document. ...

Retrieve the URL of the previously visited webpage using Javascript

Is there a way to retrieve the URL of the last visited page using JavaScript? I want to be able to track which product the user viewed most recently. I have attempted the following code: var x = document.referrer; document.getElementById("demo").innerHTML ...

Printing feature causing conflicts with other jQuery event listeners

After successfully printing the content of a div on click, I encounter the issue that none of my jQuery events work after canceling the print preview. This seems to happen without requiring a page refresh. I'm puzzled as to why this occurs and would ...

Updating cluetip content post webpage loading

I need to update the content within a cluetip after the page has finished loading. Imagine there's a button inside the cluetip and upon clicking it, I want it to disappear. Here is the cluetip setup: $('a.notice_tooltip').cluetip({activa ...

When the radio button is selected, show a variety of buttons

I'm facing an issue with rendering different buttons for two radio buttons within a view. Here is the rendered HTML code for the radio buttons: <input checked="checked" id="Isattending_0" name="Isattending" type="radio" value="Yes" /> <inpu ...

The submission of the form is prevented upon updating the inner HTML

I am in the process of creating a website that will incorporate search, add, update, and delete functionalities all on a single webpage without any modals. The main focus of this webpage is facility maintenance. Adding facilities works smoothly; however, i ...

Crafting redirect rules in React that avoid redirecting to the same route

In my project, there is a file named AuthenticatedRoute.tsx, which serves as a template for all the protected/authenticated routes in my Router.tsx file. export default ({ component: C, authUser: A, path: P, exact: E }: { component, authUser, path, ex ...

The loading of Google maps occurs simultaneously with ongoing AJAX requests

I am currently working with the Google Maps API in combination with rails 5.0.4. My goal is to have the map center on the user's location and populate the latitude and longitude fields with the corresponding coordinates. Right now, the lat, lng field ...

What is the best way to export image paths using require() from a single index.js file in a React Native project?

I am looking for a way to efficiently export all images from a single file named index.js, so that in the future, if I need to change the path of an image, I only have to make changes in one file. For example: export {default as avatar} from './avata ...

React:error:unexpected punctuation

I encountered an issue with this code within the render() function, specifically on the line where I am returning a value and it shows an unexpected token error. Here's the snippet of the code. class PuzzleGame extends React.Component { construct ...

validate the existence of the username upon submission of the form

Here is some code that I have written. .js $(document).ready(function() { $("#username").focusout(function() { $.ajax({ type:'post', url:site_url()+'/client/checkUserName', data:{&apos ...

The functionality of TabIndex is not compatible with input elements when used within RadWindow

I am utilizing Telerik Rad Window to display certain content. Within the RadWindow, I am dynamically inserting 4 input elements using a jQuery script. $.each(inputs, function(i, input) { $('#table').append('<tr id="' + input.id ...

A guide to using JavaScript to create a button that can dynamically change stylesheets

Just a heads up, I'm not using classes in this particular scenario. Can't seem to find the answer to this exact question. With javascript, how can I code a button to switch stylesheets every time it's clicked? I've experimented with d ...