三.js行不更新

three.js lines does not update

本文关键字:更新 js      更新时间:2023-09-26

我正在使用三个.js。并且行未更新。我想实时延长这条线。

  • 我认为,首先,通过读取两个数据来画一条线。
  • 二是场景清晰。
  • 第三
  • ,阅读第三条信息和扩展线。
  • 第四,场景清晰。
  • 最后,实时线路更长。

但是,不会生成此行。

var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial ({color : 0x0100FF, linewidth : 6});
function line_(k){
            if(k-1 >= 0){
                geometry.vertices.push (new THREE.Vector3 (py[k]*API.Orbit_Scale ,pz[k]*API.Orbit_Scale ,px[k]*API.Orbit_Scale));
            }
            else{
                geometry.vertices.push (new THREE.Vector3 (0,0,0));
            }
            line = new THREE.Line (geometry, material);
            line.geometry.verticesNeedUpdate = true;
            scene.add (line);
        }
function animate(){
            onWindowResize();
            line.geometry.verticesNeedUpdate = true;
            renderer.render(scene, camera);
            scene.remove(line);
            requestAnimationFrame(animate);
        }

使用 THREE.Geometry 实例,您可以更新数组中现有顶点的位置,并使用 verticesNeedUpdate 对线条进行动画处理。您不能向现有线添加顶点,并期望verticesNeedUpdate使用添加的顶点绘制新线。

向现有线几何添加顶点的最简单解决方案是:

  • 从场景中删除旧行
  • 创建具有额外顶点的新线
  • 向场景添加线条

您还可以将其绑定到动画循环。


如果要在不删除/添加几何体的情况下进行动画处理,则必须改用带有drawCallsTHREE.BufferGeometry实例。如何做到这一点,你可以在这里阅读这个答案