重用修改后的 Three.js 几何答案

【问题标题】：Reusing Modified Three.js Geometry重用修改后的 Three.js 几何
【发布时间】：2015-02-22 10:35:39
【问题描述】：

我正在使用 Three.js 来显示随机游走后的粒子线。由于几何图形无法动态放大，因此我从场景中移除线条，更改几何图形并向场景添加新线条。以下是相关代码：

var step = .5;

var material = new THREE.LineBasicMaterial({ color: 0x0077ff }); 
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3(0,0,0) );
scene.add( new THREE.Line( geometry, material ) );

var render = function () {
  requestAnimationFrame( render ); 
  renderer.render(scene, camera);
  controls.update();
}

function addStep() {
  scene.remove( scene.children[1] );
  last = geometry.vertices[ geometry.vertices.length - 1 ];
  geometry.vertices.push( new THREE.Vector3( last.x + (2*Math.random()-1)*step,
        last.y + (2*Math.random()-1)*step, last.z + (2*Math.random()-1)*step ));
  scene.add( new THREE.Line( geometry.clone(), material ) );
}

setInterval( addStep, 500);
render();

此代码有效，但前提是在每一步都克隆几何图形。如果addStep()的最后一行改为

  scene.add( new THREE.Line( geometry, material ) );

那么它可以在渲染开始之前调用任意多次来添加线段，但是如果在渲染开始之后调用则什么都不会出现。

大概我遗漏了一些关于图形缓冲区或变量分配的简单内容，但如果有人能解释为什么修改后的几何图形在不克隆的情况下无法重复使用，我将不胜感激。

【问题讨论】：

请参阅github.com/mrdoob/three.js/wiki/Updates 了解一些提示。应该没有理由从场景中移除您的几何体。
@WestLangley 我知道我可以用给定数量的点构造一条线并一个一个地显示它们，但这意味着固定数量的步数。对于一个开放式数字，我需要重新创建该行，问题是为什么不克隆就不能简单地重复使用几何图形。

标签： javascript three.js

【解决方案1】：

@PaulMasson 这是一个改编您的代码的 jsFiddle：

http://jsfiddle.net/theo/u6y4n67q/

function addStep() {

    vertices = geometry.vertices;
    last = vertices[ vertices.length - 1 ];
    vertices.push( 

        new THREE.Vector3( 
        last.x + ( 2 * Math.random() - 1 ) * step,
        last.y + ( 2 * Math.random() - 1 ) * step, 
        last.z + ( 2 * Math.random() - 1 ) * step ) 

    );

    geometry = new THREE.Geometry();
    geometry.vertices = vertices;

    scene.remove( line );
    line = new THREE.Line( geometry, material )
    scene.add( line );

}

唯一真正的区别是这个 sn-p 使用new THREE.Geometry() 而不是克隆。

我的猜测是 Three.js 几何与其在缓冲区几何中的表示紧密相关。因此，编辑几何图形的唯一方法是克隆它或新建它。

【讨论】：