Expanding the length of a pre-existing straight line using Three.js

Question

Expanding the length of a pre-existing straight line using Three.js

I have an existing line that I've created:

// material
const material = new THREE.LineBasicMaterial({ color: 0xffffff });
// array of vertices
vertices.push(new THREE.Vector3(0, 0, 0));
vertices.push(new THREE.Vector3(0, 0, 5));
// 
const geometry = new THREE.BufferGeometry().setFromPoints(vertices);
const line = new THREE.Line(geometry, material);

Now, my goal is to extend this line after it has been created. I've consulted this resource on how to update things, but I don't believe it addresses my specific situation. Instead of adding more vertices to my shape, I actually want to move the existing ones. I attempted to delete the line and redraw it longer, but unfortunately, my browser kept crashing. Any suggestions on how I can achieve this would be greatly appreciated!

javascript three.js

Answer 1

Answer №1

The BufferGeometry gives access to its vertices using the positions BufferAttribute. When you need to update the positions, follow these steps:

//
// Suppose you want to move a line segment (0, 0, 0)-(0, 0, 5) one unit in the positive x direction to (1, 0, 0)-(1, 0, 5).
//
// Get the reference to the "position" buffer attribute
const pos = geometry.getAttribute("position");
// Set the new positions
pos.setXYZ(0, vertices[0].x + 1, vertices[0].y, vertices[0].z);
pos.setXYZ(1, vertices[1].x + 1, vertices[1].y, vertices[1].z);
// Update the vertex buffer in GPU memory
pos.needsUpdate = true;
// Update the bounding box and sphere for, for example, frustum culling
geometry.computeBoundingBox();
geometry.computeBoundingSphere();

Other techniques like directly modifying the attribute's array or copying in a new array are also possible, but the general process remains similar.

Answer 2

The BufferGeometry gives access to its vertices using the positions BufferAttribute. When you need to update the positions, follow these steps:

//
// Suppose you want to move a line segment (0, 0, 0)-(0, 0, 5) one unit in the positive x direction to (1, 0, 0)-(1, 0, 5).
//
// Get the reference to the "position" buffer attribute
const pos = geometry.getAttribute("position");
// Set the new positions
pos.setXYZ(0, vertices[0].x + 1, vertices[0].y, vertices[0].z);
pos.setXYZ(1, vertices[1].x + 1, vertices[1].y, vertices[1].z);
// Update the vertex buffer in GPU memory
pos.needsUpdate = true;
// Update the bounding box and sphere for, for example, frustum culling
geometry.computeBoundingBox();
geometry.computeBoundingSphere();

Other techniques like directly modifying the attribute's array or copying in a new array are also possible, but the general process remains similar.

Expanding the length of a pre-existing straight line using Three.js

Answer №1

Similar questions

Creating an optimized dashboard in Next.js: Expert tips for securing pages with specific roles, seamlessly implementing JWT authentication without any distracting "flickering" effect

The ng-repeat function is not functioning properly when used within an li element to trigger

Learn how to efficiently process a data queue with AngularJS using Promises

Error: The property 'fixtures' of an undefined object cannot be accessed. This issue arose from trying to access nested JSON data after making

Switch out the URL in npm's build process

Retrieve the value of a TextBox and display it as the title of a Tool

Target the <select> element within a <tr> using jQuery selector and apply an empty css style

Displaying numerous information panels on Google Maps by extracting data from MySQL

Maximizing Angular and Require's Potential with r.js

Trouble arises when jquery's "position().top" clashes with the CSS3 property "transform: scale()"

Retrieve the element located within a "block" element that is relative to the user's click event, without the

The correct method for accessing descendants in THREE.js in the latest version, r68

the present time plus a one-hour situation

Avoid form submission when the 'enter' key is pressed in Edge, but not in Chrome or Firefox

Tips for altering the currently active tab in a separate window using a browser extension?

The ajax signal indicates success, yet there seems to be no update in the database

Adjust the fixed navbar position in MaterializeCSS as you scroll

Kudos to the information provided in the table!

How can I retrieve the class of the parent element by referencing the child id in jQuery?

Eliminate list items with a keyboard stroke