我正在学习JS中的three.js库。我使用Line对象创建了自己的坐标轴。我正在尝试移动它们。问题是当我更新顶点时，其中两条线可以正常工作，但是第三条线完全消失。我尝试在控制台上打印其顶点，但它们在可见性范围内。那么，我面临这个问题的原因是什么？我的代码：
--testsuite此函数// 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传递给0-100。 newVal
Xaxis是消失的线。 vx = 100, vy = 100, vz = -300是一个由复选框控制的布尔值。我是Three.js的新手，所以请理解我是否在犯一些愚蠢的错误。
答案 0 :(得分：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