Javascript three.js线在更新其几何体的顶点时消失

我正在学习js中的three.js库。我使用线条对象创建自己的坐标轴。我正试图移动它们。问题是当我更新顶点时，其中两条线工作正常，但第三条线完全消失。我尝试在控制台上打印其顶点，但它们在可见性范围内。那么，我面临这个问题的原因是什么？我的代码：

// 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

在0-100范围内传递<代码>vx=100，vy=100，vz=-300

Xaxis是消失的线<代码>转换坐标是一个由复选框控制的布尔值。我是新加入three.js的，所以如果我犯了一些愚蠢的错误，请理解

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轴的同一顶点两次。我已经将您的代码的简化版本移植到下面的fiddle中。在修复了这个小错误之后，一切似乎都很好

轴在应用程序启动后两秒自动更新

---

three.js R104

谢谢。就这样。那真是个愚蠢的错误。