Question

我使用three.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);
        }

Answer 1

使用THREE.Geometry实例，您可以更新数组中现有顶点的位置，并使用verticesNeedUpdate为线条设置动画。您无法将顶点添加到现有行，并希望verticesNeedUpdate使用添加的顶点绘制新行。

将顶点添加到现有线几何体的最简单方法是：

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

您也可以将其与动画循环联系起来。

如果您想在不删除/添加几何图形的情况下进行动画处理，则必须使用THREE.BufferGeometry实例代替drawCalls。怎么做，你可以阅读 here in this answer

three.js行不更新

1 个答案: