Creating a dynamic line with three.js

Question

Creating a dynamic line with three.js

I am aiming to create a customizable polygon with modifiable vertices represented by red circles. My goal is to dynamically construct the polygon.

When I initialize the geometry as

var geometry = new THREE.Geometry();

geometry.vertices.push(point);
geometry.vertices.push(point);

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

It functions properly until the second click, creating a straight line between points 1 and 2 but failing to add a third line when another point is pushed to the array. It appears that buffered points are necessary in WebGL.

If I predefine vertices like this, I can draw two lines (after the third click)

var geometry = new THREE.Geometry();

for (var i = 0; i < 4; i++) {
    geometry.vertices.push(point);
}

var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({}));

However, this solution is not optimal since I do not know how many vertices the user intends to add, and it would be inefficient to assign a large number of loops multiple times.

Is there a workaround for this issue?

javascript three.js webgl

Answer 1

Answer №1

To create animations on a line or increase the number of points displayed, you can utilize the BufferGeometry along with the setDrawRange() method. It's important to establish a maximum number of points for this process to work effectively.

const MAX_POINTS = 500;

// geometry
const geometry = new THREE.BufferGeometry();

// attributes
const positions = new Float32Array( MAX_POINTS * 3 ); // Each point consists of 3 vertices
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// drawcalls
drawCount = 2; // Display only the first 2 points
geometry.setDrawRange( 0, drawCount );

// material
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
line = new THREE.Line( geometry,  material );
scene.add( line );

If you need to adjust the number of points displayed after the initial rendering, simply update it like so:

line.geometry.setDrawRange( 0, newValue );

In case you want to modify the position data values post the initial rendering, set the needsUpdate flag as shown below:

line.geometry.attributes.position.needsUpdate = true; // Necessary after the first render

Check out this fiddle showcasing an animated line that can be adjusted to fit your requirements.

Version used: three.js r.147

Answer 2

To create animations on a line or increase the number of points displayed, you can utilize the BufferGeometry along with the setDrawRange() method. It's important to establish a maximum number of points for this process to work effectively.

const MAX_POINTS = 500;

// geometry
const geometry = new THREE.BufferGeometry();

// attributes
const positions = new Float32Array( MAX_POINTS * 3 ); // Each point consists of 3 vertices
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// drawcalls
drawCount = 2; // Display only the first 2 points
geometry.setDrawRange( 0, drawCount );

// material
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
line = new THREE.Line( geometry,  material );
scene.add( line );

If you need to adjust the number of points displayed after the initial rendering, simply update it like so:

line.geometry.setDrawRange( 0, newValue );

In case you want to modify the position data values post the initial rendering, set the needsUpdate flag as shown below:

line.geometry.attributes.position.needsUpdate = true; // Necessary after the first render

Check out this fiddle showcasing an animated line that can be adjusted to fit your requirements.

Version used: three.js r.147

Answer 3

Answer №2

Real-time Line Drawing

Check out this enhanced fiddle where I have improved the code originally provided by user3325025. Now, there is no longer a need to update all points of the line during rendering. Updates are only required when onMouseMove (for adjusting the end point of the line) and onMouseDown (for adding a new point):

// function to update the line
function updateLine() {
  positions[count * 3 - 3] = mouse.x;
  positions[count * 3 - 2] = mouse.y;
  positions[count * 3 - 1] = mouse.z;
  line.geometry.attributes.position.needsUpdate = true;
}

// event handler for moving the mouse
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  mouse.z = 0;
  mouse.unproject(camera);
  if( count !== 0 ){
    updateLine();
  }
}

// function to add a new point
function addPoint(event){
  positions[count * 3 + 0] = mouse.x;
  positions[count * 3 + 1] = mouse.y;
  positions[count * 3 + 2] = mouse.z;
  count++;
  line.geometry.setDrawRange(0, count);
  updateLine();
}

Answer 4

Real-time Line Drawing

Check out this enhanced fiddle where I have improved the code originally provided by user3325025. Now, there is no longer a need to update all points of the line during rendering. Updates are only required when onMouseMove (for adjusting the end point of the line) and onMouseDown (for adding a new point):

// function to update the line
function updateLine() {
  positions[count * 3 - 3] = mouse.x;
  positions[count * 3 - 2] = mouse.y;
  positions[count * 3 - 1] = mouse.z;
  line.geometry.attributes.position.needsUpdate = true;
}

// event handler for moving the mouse
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  mouse.z = 0;
  mouse.unproject(camera);
  if( count !== 0 ){
    updateLine();
  }
}

// function to add a new point
function addPoint(event){
  positions[count * 3 + 0] = mouse.x;
  positions[count * 3 + 1] = mouse.y;
  positions[count * 3 + 2] = mouse.z;
  count++;
  line.geometry.setDrawRange(0, count);
  updateLine();
}

Answer 5

Answer №3

If you're interested in doodling freely, I've made some updates to the fiddle to include mouse events and a vector array.

Check out the updated fiddle here

function onMouseDown(evt) {

    if(evt.which == 3) return;


    var x = ( event.clientX / window.innerWidth ) * 2 - 1;
    var y =  - ( event.clientY / window.innerHeight ) * 2 + 1;

    // do not register if right mouse button is pressed.

    var vNow = new THREE.Vector3(x, y, 0);
    vNow.unproject(camera);
    console.log(vNow.x + " " + vNow.y+  " " + vNow.z); 
    splineArray.push(vNow);

    document.addEventListener("mousemove",onMouseMove,false);
    document.addEventListener("mouseup",onMouseUp,false);
}

Answer 6

If you're interested in doodling freely, I've made some updates to the fiddle to include mouse events and a vector array.

Check out the updated fiddle here

function onMouseDown(evt) {

    if(evt.which == 3) return;


    var x = ( event.clientX / window.innerWidth ) * 2 - 1;
    var y =  - ( event.clientY / window.innerHeight ) * 2 + 1;

    // do not register if right mouse button is pressed.

    var vNow = new THREE.Vector3(x, y, 0);
    vNow.unproject(camera);
    console.log(vNow.x + " " + vNow.y+  " " + vNow.z); 
    splineArray.push(vNow);

    document.addEventListener("mousemove",onMouseMove,false);
    document.addEventListener("mouseup",onMouseUp,false);
}

Creating a dynamic line with three.js

Answer №1

Answer №2

Real-time Line Drawing

Answer №3

Similar questions

What aspects of MongoDB security am I overlooking?

Transforming RGB Decimal Color to HEX RGB Color in Three.js

Variable in v-for loop is not properly declared

Allow undici fetch requests to use self-signed certificates

When extracting text using .text(), remember to include spaces between td elements

Extracting data from websites: How to gather information from dynamic HTML elements

AngularJS is incapable of detaching forms from objects

Troubleshooting the "@material-ui/core" issue in React: Step-by-step guide

Group all 3 elements with a wrapper

Finding the source of the err.kind expression in the MERN stack: Unraveling the mystery

What is the best way to convert a repetitive string into a reusable function?

Transforming DayOfYear data in Javascript to utilize with Flot

Using Ajax to implement Basic Authentication for securely accessing an https-protected webpage without requiring users to manually enter their username and password in a

Real-time Feedback: Providing live updates to users about the current connection status

What are the steps to modify the camera type in Three.js?

Guide to bringing in a variable from an external module

JavaScript can be used to activate the onclick event

To insert a <div> element within a <tr> element while preserving the exact position of the <tr> tag - here's how you can do it:

Using Ajax with Laravel for Beginners

Enabling hover effects to scroll divs only when interacted with