What could be causing vertices in Three.js to not update?

Question

What could be causing vertices in Three.js to not update?

I currently have a loop of circles that are moving independently. My goal is to draw lines from the center of the canvas to each circle's location. The issue I am facing is that the lines are not updating their vertices correctly during rendering, even though I have set

testLine.geometry.verticesNeedUpdate = true

. Upon inspection, it appears that this property remains false.

var container;
var camera, scene, renderer, lines=[], items =[];

var numItems = 40;
var xspeed;
var yspeed;
var lineGeometry;
var testLineGeometry;

init();
animate();
function init() {
  container = document.createElement( 'div' );
  document.body.appendChild( container );
  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xf7f7f7);
  var geometry = new THREE.CircleBufferGeometry( 20, 20 );
  lineGeometry = new THREE.Geometry();
  var testLineGeometry = new THREE.Geometry();
  for ( var i = 0; i < numItems; i ++ ) {
    var item = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0x000000 } ) );
    item.position.x = (Math.random() * 20.1 - 1);
    item.position.y = (Math.random() * 20.1 - 1);
    item.xspeed = Math.random() * 2.1 - 1;
    item.yspeed = Math.random() * 2.1 - 1;
    // item.position.normalize();
    items.push(item);
    scene.add( item );

    lineGeometry.vertices.push( item.position );

    testLineGeometry.vertices.push(new THREE.Vector3(item.position.x, item.position.y, 0));
    testLineGeometry.vertices.push(new THREE.Vector3(0, 0, 0));

    testLine = new THREE.Line( testLineGeometry, new THREE.LineBasicMaterial( {color: 0x000000} ) );
    lines.push(testLine);
    scene.add( testLine );

  }

  line = new THREE.Line( lineGeometry, new THREE.LineBasicMaterial( {color: 0x000000} ) );
  // scene.add( line );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  container.appendChild(renderer.domElement);
  //
}

//
function animate() {
  requestAnimationFrame( animate );
  render();
}
function render() {


items.forEach(circle => {
  circle.position.x += circle.xspeed;
  circle.position.y += circle.yspeed;

  if (circle.position.x > window.innerWidth / 2 || circle.position.x < -window.innerWidth / 2 ) {
    circle.xspeed *= -1;
  }

  if (circle.position.y > window.innerWidth / 2 || circle.position.y < -window.innerWidth / 2) {
    circle.yspeed *= -1;
  }
});

  testLine.geometry.verticesNeedUpdate = true;

  camera.position.x = 0;
  camera.position.z = 1000;

renderer.render( scene, camera );
}

My main concern is how I can ensure the correct vertices of testLine are updated during the render process.

javascript three.js

Answer 1

Answer №1

testLineGeometry.vertices.push(new THREE.Vector3(item.position.x, item.position.y, 0));

It is intriguing to see why this approach is taken. The z-coordinate of the circles' positions is consistently set to 0, hence it would be more efficient to assign these positions directly as elements of the vertices array for the testLine.

I have revised your code:

Directly pushed circle positions into the vertices array of testLine:
```
testLineGeometry.vertices.push(item.position);
```
Utilized the same center point;
Moved the instantiation of testLine outside of the for loop;
Opted for THREE.LineSegments() over THREE.Line(), considering that your testLine has double the amount of vertices compared to the circles.

var container;
var camera, scene, renderer, lines = [],
  items = [];

var numItems = 40;
var xspeed;
var yspeed;
var lineGeometry;
var testLineGeometry;

init();
animate();

function init() {
  container = document.createElement('div');
  document.body.appendChild(container);
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf7f7f7);
  var geometry = new THREE.CircleBufferGeometry(20, 20);
  lineGeometry = new THREE.Geometry();
  var testLineGeometry = new THREE.Geometry();
  var center = new THREE.Vector3();
  for (var i = 0; i < numItems; i++) {
    var item = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
      color: Math.random() * 0x000000
    }));
    item.position.x = (Math.random() * 20.1 - 1);
    item.position.y = (Math.random() * 20.1 - 1);
    item.xspeed = Math.random() * 2.1 - 1;
    item.yspeed = Math.random() * 2.1 - 1;
    // item.position.normalize();
    items.push(item);
    scene.add(item);

    lineGeometry.vertices.push(item.position);
    
    testLineGeometry.vertices.push(item.position);
    testLineGeometry.vertices.push(center);
  }

  testLine = new THREE.LineSegments(testLineGeometry, new THREE.LineBasicMaterial({
    color: 0x000000
  }));
  lines.push(testLine);
  scene.add(testLine);

  line = new THREE.Line(lineGeometry, new THREE.LineBasicMaterial({
    color: 0x000000
  }));
  // scene.add( line );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);
  //
}

//
function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {


  items.forEach((circle, idx) => {
    circle.position.x += circle.xspeed;
    circle.position.y += circle.yspeed;

    if (circle.position.x > window.innerWidth / 2 || circle.position.x < -window.innerWidth / 2) {
      circle.xspeed *= -1;
    }

    if (circle.position.y > window.innerWidth / 2 || circle.position.y < -window.innerWidth / 2) {
      circle.yspeed *= -1;
    }
  });

  testLine.geometry.verticesNeedUpdate = true;

  camera.position.x = 0;
  camera.position.z = 1000;

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Answer 2

testLineGeometry.vertices.push(new THREE.Vector3(item.position.x, item.position.y, 0));

It is intriguing to see why this approach is taken. The z-coordinate of the circles' positions is consistently set to 0, hence it would be more efficient to assign these positions directly as elements of the vertices array for the testLine.

I have revised your code:

Directly pushed circle positions into the vertices array of testLine:
```
testLineGeometry.vertices.push(item.position);
```
Utilized the same center point;
Moved the instantiation of testLine outside of the for loop;
Opted for THREE.LineSegments() over THREE.Line(), considering that your testLine has double the amount of vertices compared to the circles.

var container;
var camera, scene, renderer, lines = [],
  items = [];

var numItems = 40;
var xspeed;
var yspeed;
var lineGeometry;
var testLineGeometry;

init();
animate();

function init() {
  container = document.createElement('div');
  document.body.appendChild(container);
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf7f7f7);
  var geometry = new THREE.CircleBufferGeometry(20, 20);
  lineGeometry = new THREE.Geometry();
  var testLineGeometry = new THREE.Geometry();
  var center = new THREE.Vector3();
  for (var i = 0; i < numItems; i++) {
    var item = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
      color: Math.random() * 0x000000
    }));
    item.position.x = (Math.random() * 20.1 - 1);
    item.position.y = (Math.random() * 20.1 - 1);
    item.xspeed = Math.random() * 2.1 - 1;
    item.yspeed = Math.random() * 2.1 - 1;
    // item.position.normalize();
    items.push(item);
    scene.add(item);

    lineGeometry.vertices.push(item.position);
    
    testLineGeometry.vertices.push(item.position);
    testLineGeometry.vertices.push(center);
  }

  testLine = new THREE.LineSegments(testLineGeometry, new THREE.LineBasicMaterial({
    color: 0x000000
  }));
  lines.push(testLine);
  scene.add(testLine);

  line = new THREE.Line(lineGeometry, new THREE.LineBasicMaterial({
    color: 0x000000
  }));
  // scene.add( line );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);
  //
}

//
function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {


  items.forEach((circle, idx) => {
    circle.position.x += circle.xspeed;
    circle.position.y += circle.yspeed;

    if (circle.position.x > window.innerWidth / 2 || circle.position.x < -window.innerWidth / 2) {
      circle.xspeed *= -1;
    }

    if (circle.position.y > window.innerWidth / 2 || circle.position.y < -window.innerWidth / 2) {
      circle.yspeed *= -1;
    }
  });

  testLine.geometry.verticesNeedUpdate = true;

  camera.position.x = 0;
  camera.position.z = 1000;

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

What could be causing vertices in Three.js to not update?

Answer №1

Similar questions

Tips for connecting 2 Bootstrap 5 carousels

Extracting text from an HTML file and passing it to an Express.js server: A beginner

Exclude mock files from webpack configuration in AngularClass/angular2-webpack-starter for production builds

While developing an exam portal with Angular and Spring Boot, I encountered an issue when trying to incorporate a name field as [name]

The return value from vue-query is ObjectRefImpl, not the actual data

Concentrate on Selecting Multiple Cells in ag-Grid (Similar to Excel's Click and Drag Feature)

Is there a way to refresh angular bindings using data retrieved from a getUserMedia stream?

Is there a way to iterate through documents in Mongoose using NodeJS?

Exploring the process of extracting a nested JSON value using Postman

Handling JSON Data in JavaScript

When validating an array in JavaScript, it is important to note that not all elements may be displayed. Only the last variable of each element will

When scrolling, a new page loads seamlessly

How can the title of a link be hidden in a popup panel?

Leverage the power of Signal R through React with aspnet/signalr integration

The process of merging these two functions involves ensuring that one function does not start until the other has successfully completed its task

Angular 14 - Issue with passing values through props - Error: Uncaught (in promise): InvalidCharacterError occurs when attempting to set attribute with 'setAttribute' method

.toggle function malfunctioning

What is the best way to iterate through array elements with AngularJS?

Utilize a dual-color gradient effect on separate words within the <li> element

No visibility of Mesh Groups in Three.JS ColladaLoader