javascript - Three.js - 为什么顶点不更新？

Question

我有一个独立移动的圆圈。我正在尝试从 Canvas 中心到其位置绘制线条。这些线在设置过程中工作正常，但它们的顶点在渲染过程中不会更新。尽管 testLine.geometry.verticesNeedUpdate = true，但在检查时实际上将其设置为 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 );
}

如何在渲染期间更新 testLine 的适当顶点？

Answer 1

testLineGeometry.vertices.push(new THREE.Vector3(item.position.x, item.position.y, 0)); 我不明白你为什么这样做。 z - 圆位置的坐标始终为 0，因此您可以简单地将这些位置指定为 testLine 顶点的数组项。

我修改了你的代码:

• 将圆的位置直接插入 testLine 的顶点数组 testLineGeometry.vertices.push(item.position);
• 共享相同的中心点；
• 将 testLine 的实例化移出 for 循环；
• 使用 THREE.LineSegments() 而不是 THREE.Line()，因为 testLine 包含的顶点数量是圆数量的两倍;

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>