Question

我有一圈独立移动的圆圈。我试图从画布中心画线到它们的位置。这些线在设置过程中工作正常，但它们的顶点在渲染过程中不会更新。即使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 - 您圈子的坐标＆＃39;位置始终为0，因此您可以简单地将这些位置指定为数组的项目，用于testLine的顶点。

我重写了你的代码：

将圆圈的位置直接推入testLine testLineGeometry.vertices.push(item.position);
为中心分享了相同的观点;
将testLine的实例化移出for循环;
使用THREE.LineSegments()代替THREE.Line()，因为您的testLine包含的顶点数是圆的两倍;

＆＃13;

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);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

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

＆＃13;

Three.js - 为什么赢得顶点更新？

1 个答案: