three.js 行不更新
three.js lines does not update
我正在使用 three.js。并且行没有更新。我想实时加长这条线。
- 我想,首先,读取两个数据画一条线。
- 二、场景清晰
- 三、阅读第三条资料及延长线
- 四、场景清晰
- 最后一行实时变长了。
但是,这一行没有生成。
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial ({color : 0x0100FF, linewidth : 6});
function line_(k){
if(k-1 >= 0){
geometry.vertices.push (new THREE.Vector3 (py[k]*API.Orbit_Scale ,pz[k]*API.Orbit_Scale ,px[k]*API.Orbit_Scale));
}
else{
geometry.vertices.push (new THREE.Vector3 (0,0,0));
}
line = new THREE.Line (geometry, material);
line.geometry.verticesNeedUpdate = true;
scene.add (line);
}
function animate(){
onWindowResize();
line.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
scene.remove(line);
requestAnimationFrame(animate);
}
使用 THREE.Geometry
实例,您可以更新数组中现有顶点的 位置 并使用 verticesNeedUpdate
为线条设置动画。您无法将顶点 添加到现有线并期望verticesNeedUpdate
使用添加的顶点绘制新线。
向现有线几何添加顶点的最简单解决方案是:
- 从场景中删除旧线
- 创建带有额外顶点的新线
- 向场景添加线条
您也可以将其与动画循环相关联。
如果您想在没有 removing/adding 几何体的情况下制作动画,您必须使用 THREE.BufferGeometry
实例和 drawCalls
来代替。如何做到这一点,您可以阅读
我正在使用 three.js。并且行没有更新。我想实时加长这条线。
- 我想,首先,读取两个数据画一条线。
- 二、场景清晰
- 三、阅读第三条资料及延长线
- 四、场景清晰
- 最后一行实时变长了。
但是,这一行没有生成。
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial ({color : 0x0100FF, linewidth : 6});
function line_(k){
if(k-1 >= 0){
geometry.vertices.push (new THREE.Vector3 (py[k]*API.Orbit_Scale ,pz[k]*API.Orbit_Scale ,px[k]*API.Orbit_Scale));
}
else{
geometry.vertices.push (new THREE.Vector3 (0,0,0));
}
line = new THREE.Line (geometry, material);
line.geometry.verticesNeedUpdate = true;
scene.add (line);
}
function animate(){
onWindowResize();
line.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
scene.remove(line);
requestAnimationFrame(animate);
}
使用 THREE.Geometry
实例,您可以更新数组中现有顶点的 位置 并使用 verticesNeedUpdate
为线条设置动画。您无法将顶点 添加到现有线并期望verticesNeedUpdate
使用添加的顶点绘制新线。
向现有线几何添加顶点的最简单解决方案是:
- 从场景中删除旧线
- 创建带有额外顶点的新线
- 向场景添加线条
您也可以将其与动画循环相关联。
如果您想在没有 removing/adding 几何体的情况下制作动画,您必须使用 THREE.BufferGeometry
实例和 drawCalls
来代替。如何做到这一点,您可以阅读