Updating line connections between objects in Three.js while rendering

Question

Updating line connections between objects in Three.js while rendering

I am working with a three.js canvas that contains circles moving independently. Initially, these circles are connected by a single line that follows the same geometry as their positions.

However, I am facing difficulty updating the line's geometry when these circles move.

I have tried searching through all the scene's children to find any child named 'item' and updating their x & y positions. Yet, when attempting to update the line's geometry, it either disappears or remains static (as seen in the code below).

How can I effectively update the line's geometry on each frame to match the movements of the circles?

var container;
var camera, scene, renderer;

var numItems = 40;
var xspeed; // Speed of the shape
var yspeed; // Speed of the shape
var lineGeometry;

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(0xff3000);
  var geometry = new THREE.CircleBufferGeometry(15, 20);
  lineGeometry = 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 = (-180) + (i * Math.random() * (80 - 1) + 1);
    item.position.y = (-50) + (i * Math.random() * (80 - 1) + 1);
    item.xspeed = Math.random() * (2 - 1);
    item.yspeed = Math.random() * (1 - 0.5);
    item.name = "item";
    scene.add(item);
    lineGeometry.vertices.push(item.position);
  }

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

  function animate() {
    requestAnimationFrame(animate);
    render();
  }
  
  function render() {
    for (var i = 0; i < scene.children.length; i++) {
      var newPosition;
      if (scene.children[i].name === 'item') {
        scene.children[i].position.x = scene.children[i].position.x + scene.children[i].xspeed;
        scene.children[i].position.y = scene.children[i].position.y + scene.children[i].yspeed;

        newPosition = scene.children[i].position;

        if (scene.children[i].position.x > window.innerWidth/2 || scene.children[i].position.x < -window.innerWidth/2) {
          scene.children[i].xspeed = scene.children[i].xspeed * (-1);
        }
        if (scene.children[i].position.y > window.innerWidth/2 || scene.children[i].position.y < -window.innerWidth/2) {
          scene.children[i].yspeed = scene.children[i].yspeed * (-1);
        }
      }

      if (scene.children[i].name === 'line') {
        scene.children[i].vertices = newPosition;
      }
    }

    camera.position.x = 0;
    camera.position.z = 1000;
    renderer.render(scene, camera);
  }

javascript three.js

Answer 1

Answer №1

Your line geometry points are already aligned with circle positions, eliminating the need for constant reassignment during scene rendering.

If you make the line a global variable and create another global array to store circles, you can simplify the process.

var camera, scene, renderer, line, circles = [];

You can then easily add your item to the array:

circles.push(item);
scene.add(item);

This will streamline your render function as follows:

function render() {
  circles.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;
    }
  });
  line.geometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);
}

var container;
var camera, scene, renderer, line, circles = [];

var numItems = 40;
var xspeed // Speed of the shape
var yspeed // Speed of the shape
var lineGeometry;

init();
animate();

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xff3000);
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 0, 1000);
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.CircleBufferGeometry(15, 20);
  lineGeometry = 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 = (-180) + (i * Math.random() * (80 - 1) + 1);
    item.position.y = (-50) + (i * Math.random() * (80 - 1) + 1);
    item.xspeed = Math.random() * (2 - 1);
    item.yspeed = Math.random() * (1 - 0.5);
    circles.push(item);
    scene.add(item);
    lineGeometry.vertices.push(item.position);
  }

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

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

function render() {
  circles.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;
    }
  });
  line.geometry.verticesNeedUpdate = true;
  // this flag is crucial for updating vertex coordinates in a geometry

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

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

Answer 2

Your line geometry points are already aligned with circle positions, eliminating the need for constant reassignment during scene rendering.

If you make the line a global variable and create another global array to store circles, you can simplify the process.

var camera, scene, renderer, line, circles = [];

You can then easily add your item to the array:

circles.push(item);
scene.add(item);

This will streamline your render function as follows:

function render() {
  circles.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;
    }
  });
  line.geometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);
}

var container;
var camera, scene, renderer, line, circles = [];

var numItems = 40;
var xspeed // Speed of the shape
var yspeed // Speed of the shape
var lineGeometry;

init();
animate();

function init() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xff3000);
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 0, 1000);
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.CircleBufferGeometry(15, 20);
  lineGeometry = 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 = (-180) + (i * Math.random() * (80 - 1) + 1);
    item.position.y = (-50) + (i * Math.random() * (80 - 1) + 1);
    item.xspeed = Math.random() * (2 - 1);
    item.yspeed = Math.random() * (1 - 0.5);
    circles.push(item);
    scene.add(item);
    lineGeometry.vertices.push(item.position);
  }

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

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

function render() {
  circles.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;
    }
  });
  line.geometry.verticesNeedUpdate = true;
  // this flag is crucial for updating vertex coordinates in a geometry

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

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

Updating line connections between objects in Three.js while rendering

Answer №1

Similar questions

Calculate the number of arrays in an object and then substitute them

How to use Angular pipes to format dates as Long Dates in the template

When a React page is re-rendered using useEffect, it automatically scrolls back to the

Django issue: A Tuple or struct_time argument is necessary

Ways to alter the color of an icon when hovering over it

Determining the dimensions of Vue slots

How to retrieve a nested array element in JavaScript

Simple requirements for implementing shadows in three.js

Node.js: Troubleshooting a forEach Function Error

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

Issues with Javascript positioning in Chrome and Safari are causing some functionality to malfunction

How can you reset a variable counter while inside a forEach loop?

New Angular Datatables used to create a revitalizing table

executing the following event in Node.js

Dynamic Checkbox Functionality in REACT

I have experimented with both POST and GET methods in Node.js, exploring a variety

Problem encountered when attempting to utilize the spread operator within .vue files in an Elixir Phoenix 1.3 application

Notifications will be displayed with Alertifyjs to the individual who activated them

Advanced Techniques: Leveraging Master Layouts, Partial Rendering, and JavaScript Function

Enhancing Chat: Updating Chat Messages in Real-Time with Ember.js and Firebase