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

我有一圈独立运动的圆圈。我正在尝试从画布的中心到其位置绘制线条。这些线在设置过程中可以正常工作，但是在渲染过程中它们的顶点不会更新。即使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的适当顶点？

最佳答案

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>

关于javascript - Three.js-为什么顶点不更新？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46975646/