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

Having trouble getting the jQuery/JS redirect button to function properly

transfer jquery element using jquery ajax

What is the significance of providing a sole argument to the Object () function?

Once an item is added, the table vanishes into thin air

Next.js - NextAuth consistently delivers a successful status code every time

Refreshing a single HTML element in ASP.NET MVC - the simple way!

The request to http://localhost:5000/error resulted in a 404 (Not Found) error message. I encountered difficulties connecting

Client-side rendering for NextJS server components is also supported

Select the first item that is visible and chosen

When using NodeJS, having multiple 'if' statements may result in conflicting headers being returned,

NextJS - Accessing local files with readdir and readFile functions leads to error: Module not found when trying to resolve 'fs' module

Implementing MUI createTheme within Next.js

Dealing with Ajax errors in Django reponses

Is it possible to utilize the same Context in multiple forms within React?

Running the test suite in another tab is causing it to fail

When attempting to use JQuery autocomplete, the loading process continues indefinitely without successfully triggering the intended function

Guidelines for combining inner objects with their parent in Javascript

Pass user input values to PHP via AJAX and display the outcome on a designated div

Discovering the data-id value in an HTML element by clicking it with JavaScript and returning that value through a for loop

Is it possible to preserve the <canvas> elements to use for future animation frames?