更新THREE.Line()中的顶点

update vertices in THREE.Line()

本文关键字:顶点 THREE Line 更新      更新时间:2023-09-26

我试图动态重建一些几何形状在一个三。Line对象在一个简单的three.js应用程序中,但由于某种原因没有触发更新。我将这条线设置为动态对象,每次更新几何图形时都将verticesNeedUpdate属性设置为true,但这条线仍然没有更新。有人能看出我哪里做错了吗?

// ---------------------------------------------------------------------------------------
// line
// ---------------------------------------------------------------------------------------

function build_line(length) 
{
    var vertices = [];
    for (i = 0; i < length; i++)
    {
        vertices.push(new THREE.Vector3(i * 2, 0, 0)); 
    }
    return vertices;
}

var line_geo = new THREE.Geometry();

line_geo.vertices = build_line(3);
line_geo.dynamic = true;
console.log(line_geo);

// simple
material = new THREE.LineBasicMaterial({
    color: 0xffffff,
    linewidth: 1,
    linejoin: "mitre"
});

var scene_object = new THREE.Line(line_geo, material);
scene.add(scene_object);

// ---------------------------------------------------------------------------------------
// render loop 
// ---------------------------------------------------------------------------------------
var current_length = 3
var render = function()
{
    current_length += 1;
    line_geo.vertices = build_line(current_length);
    line_geo.verticesNeedUpdate = true;
    // draw!
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
render();
<标题>编辑

根据这篇文章

在渲染后为three.js网格添加几何

不能调整缓冲区的内容大小,只能重新填充。此页提到您可以模拟调整缓冲区大小,方法是将缓冲区初始化为过大,并保持未使用的文本折叠或隐藏

https://github.com/mrdoob/three.js/wiki/Updates

我不确定你是如何做到这一点的,我看不到一个可见性标志或折叠标志上的THREE.Vector3我使用的vert。我试着用null替换向量,但这会抛出一个错误。有什么想法如何实现这一点吗?

最后,collapse可以理解为"in the same place"。(也许还有其他方法可以理解)

这就意味着你需要分配最大长度
var vertices = [];
function allocate_line(maxLength) 
{
    var vertices = [];
    for (i = 0; i < maxLength; i++)
    {
        vertices.push(new THREE.Vector3(0, 0, 0)); 
    }
}

function build_line(length) 
{
    for (i = 0; i < length; i++)
    {
        vertices[i].x = i * 2; 
    }
    for (i = length; i <= maxLength; i++)
    {
        vertices[i].x = (length - 1) * 2; 
    }
}

即,所有未使用的顶点设置为最后一个使用顶点的颜色。

这当然是一个快速而粗糙的实现给你的想法…