three.js線在更新其幾何形狀的頂點時消失

Question

我正在學習JS中的three.js庫。 我使用Line對象創建了自己的坐標軸。 我正在嘗試移動它們。 問題是當我更新頂點時，其中兩條線可以正常工作，但是第三條線完全消失。 我嘗試在控制台上打印其頂點，但它們在可見性范圍內。 那么，我面臨這個問題的原因是什么？ 我的代碼：

// create and axes to the scene
    //// X axis
    var material = new THREE.LineBasicMaterial({
        color: 0x00ff00
    })
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(1500,0,0), new THREE.Vector3(-1500,0,0));
    Xaxis = new THREE.Line(geometry,material);
    scene.add(Xaxis);

    //// Y axis
    var material = new THREE.LineBasicMaterial({
        color: 0xff0000
    })
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(0,1500,0), new THREE.Vector3(0,-1500,0));
    Yaxis = new THREE.Line(geometry,material);
    scene.add(Yaxis);

    //// Z axis
    var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    })
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(0,0,1500), new THREE.Vector3(0,0,-1500));
    Zaxis = new THREE.Line(geometry,material);
    scene.add(Zaxis);

function changePosition(newVal)
{
    if(!transformCo_ordinate) {
        sphere.position.set((vx/100)*newVal,(vy/100)*newVal,(vz/100)*newVal);
    }
    else{
        Xaxis.geometry.vertices[0].set(1500,-(vy/100)*newVal,-(vz/100)*newVal);
        Xaxis.geometry.vertices[1].set(-1500,-(vy/100)*newVal,-(vz/100)*newVal);

        Yaxis.geometry.vertices[0].set(-(vx/100)*newVal,1500,-(vz/100)*newVal);
        Yaxis.geometry.vertices[1].set(-(vx/100)*newVal,-1500,-(vz/100)*newVal);

        Zaxis.geometry.vertices[0].set(-(vx/100)*newVal,-(vy/100)*newVal,1500);
        Zaxis.geometry.vertices[0].set(-(vx/100)*newVal,-(vy/100)*newVal,-1500);

        Xaxis.geometry.verticesNeedUpdate = true;
        Yaxis.geometry.verticesNeedUpdate = true;
        Zaxis.geometry.verticesNeedUpdate = true;
        console.log(Xaxis.geometry.vertices[1]);
    }

}

滑塊調用函數changePosition ，該滑塊將其當前值作為newVal傳遞newVal 0-100。 vx = 100, vy = 100, vz = -300

Xaxis是消失的線。 transformCo_ordinate是一個由復選框控制的布爾值。 我是Three.js的新手，所以請理解我是否在犯一些愚蠢的錯誤。

Answer 1

Zaxis.geometry.vertices[0].set(-(vx/100)*newVal,-(vy/100)*newVal,1500);
Zaxis.geometry.vertices[0].set(-(vx/100)*newVal,-(vy/100)*newVal,-1500);

似乎您要兩次更新z軸的相同頂點。 我已經將您的代碼的簡化版本移植到以下小提琴中。 修復此小錯誤后，一切似乎都正常工作。

https://jsfiddle.net/gcL7dwbp/

在應用程序啟動后兩秒鍾，軸將自動更新。

three.js R104