three.js 线在更新其几何图形的顶点时消失答案

【问题标题】：three.js Line disappears on updating the vertices of its geometrythree.js 线在更新其几何图形的顶点时消失
【发布时间】：2019-05-19 00:39:05
【问题描述】：

我正在学习 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 在0-100 范围内传递。 vx = 100, vy = 100, vz = -300

Xaxis 是消失的线。 transformCo_ordinate 是一个由复选框控制的布尔值。我是three.js的新手，所以如果我犯了一些愚蠢的错误，请理解。

【问题讨论】：

标签： javascript html three.js

【解决方案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

【讨论】：

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