Is it possible to eliminate line segments from a line?

Question

Is it possible to eliminate line segments from a line?

Currently facing a challenge with three.js as I attempt to accomplish a specific task. Unsure if I should start from scratch or stick with my current approach.

I am working on parsing a gcode file, essentially a large text file containing position and extrusion data for 3D printers. I am reading through it sequentially, loading all positions into THREE.Geometry() as vertices, and creating a line using these positions along with vertex colors.

This is the code snippet:

// Code snippet here

I have identified which pairs of vertices need to be invisible based on a flag in geometryArr. Now, I need to address them accordingly.

Attempts made so far: * Removing the relevant vertice pairs results in the line being drawn between the subsequent set of vertices. * Adding a second line with transparent (0 opacity) segments where needed did not yield desired outcomes. * Rendering each line segment individually caused severe performance issues due to the high number of line segments involved.

Wondering if THREE.Geometry and THREE.Line offer any functionality to remove specific line segments?

It seems that if not available, I might have to transfer this process to THREE.BufferGeometry and utilize shaders to render certain lines as invisible. A more time-consuming solution that I hoped to avoid.

Your assistance is greatly appreciated!

javascript three.js

Answer 1

Answer №1

When working with geometry in three.js, there are two main ways to draw a line.

To create a continuous line:
```
THREE.Line( geometry, material );
```

For a segmented line:

THREE.LineSegments( geometry, material );

THREE.LineSegments

The THREE.LineSegments class connects every pair of subsequent vertices with a line. To achieve a continuous line using this class, you need to duplicate points in between.

Let's illustrate this with an example:

v1 = new THREE.Vector3( 0, 0, 0 );
v2 = new THREE.Vector3( 10, 0, 0 );
v3 = new THREE.Vector3( 20, 0, 0 );
v4 = new THREE.Vector3( 30, 0, 0 );

If you create a geometry with these points and use THREE.LineSegments:

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.LineSegments( geometry );

It will look like this:

.__.  .__.
1  2  3  4

However, if you do:

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v2, v3, v3, v4 );

line = new THREE.LineSegments( geometry );

it will look like this instead:

.__.__.__.
1  2  3  4

THREE.Line

In contrast, the THREE.Line class behaves differently as it always connects all vertices with a continuous line.

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.Line( geometry );

This will draw a continuous line connecting the points from the vertices array like so:

.__.__.__.
1  2  3  4

I trust that this explanation will assist you in resolving any issues you may encounter.

Answer 2

When working with geometry in three.js, there are two main ways to draw a line.

To create a continuous line:
```
THREE.Line( geometry, material );
```

For a segmented line:

THREE.LineSegments( geometry, material );

THREE.LineSegments

The THREE.LineSegments class connects every pair of subsequent vertices with a line. To achieve a continuous line using this class, you need to duplicate points in between.

Let's illustrate this with an example:

v1 = new THREE.Vector3( 0, 0, 0 );
v2 = new THREE.Vector3( 10, 0, 0 );
v3 = new THREE.Vector3( 20, 0, 0 );
v4 = new THREE.Vector3( 30, 0, 0 );

If you create a geometry with these points and use THREE.LineSegments:

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.LineSegments( geometry );

It will look like this:

.__.  .__.
1  2  3  4

However, if you do:

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v2, v3, v3, v4 );

line = new THREE.LineSegments( geometry );

it will look like this instead:

.__.__.__.
1  2  3  4

THREE.Line

In contrast, the THREE.Line class behaves differently as it always connects all vertices with a continuous line.

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.Line( geometry );

This will draw a continuous line connecting the points from the vertices array like so:

.__.__.__.
1  2  3  4

I trust that this explanation will assist you in resolving any issues you may encounter.

Is it possible to eliminate line segments from a line?

Answer №1

THREE.LineSegments

THREE.Line

Similar questions

Utilizing helper functions in Node based on their specific types

Events in Three.js have an impact on the Document Object Model (

Angular.js unable to locate image 404 Error occurs

Combining Django's CSRF token with AngularJS

The best approach for sending parameters to the parent class in TypeScript for optimal efficiency

Passing a PHP variable to an AJAX URL: A simple guide

Retrieve every hour between two specific timestamps

Eliminate values from an array by utilizing either a for loop or a custom filtering function

I attempted to use the Stripe API, but it seems to be non

Does JavaScript sort dictionaries automatically?

Unable to view new content as window does not scroll when content fills it up

Extracting the month and year from a datetime string: A simple guide

Setting the ng-href attribute in Angular conditionally using a function

Utilize PHP in an APP Engine Application to send an email to a Gmail address

Tips on how to showcase particular keys from json information in React

Using Angular 2: A Beginner's Guide to Navigating with the Latest Angular 2.0.0-rc.1 Router

React/Ionic: Avoiding SVG rendering using <img/> elements

What could be the reason behind the login button not triggering the console message display?

Displaying multi-dimensional arrays through the console in JavaScript and showcasing their elements

Problem with jQuery's .prepend method being called twice on list items