trzy wierzchołki js nie aktualizują się

Question

Używam three.js r67, a wierzchołki nie wydają się być aktualizowane. Ustawiłem geometry.dynamic = true, geometry.verticesNeedUpdate = true. Krąg się porusza, ale linia jest statyczna ...

Ktoś może mi pomóc?

var scene = new THREE.Scene(); 
var renderer = new THREE.WebGLRenderer(); 

var g = new THREE.CircleGeometry(4, 16); 
var m = new THREE.MeshBasicMaterial({color: 0x114949}); 
var circle = new THREE.Mesh(g, m); 

circle.position.x = 2; 
circle.position.y = 2; 
circle.position.z = -1; 
scene.add(circle); 

var material = new THREE.LineBasicMaterial({color: 0xDF4949, linewidth: 5}); 

var geometry = new THREE.Geometry(); 
geometry.vertices.push(new THREE.Vector3(0, 0, 0)); 
geometry.vertices.push(new THREE.Vector3(1, 1, 0)); 
geometry.verticesNeedUpdate = true; 
geometry.dynamic = true; 

var line = new THREE.Line(geometry, material); 
scene.add(line); 

var update = function() { 
    circle.position.x += 0.01; 
    line.geometry.vertices[0].x = circle.position.x; 
}; 

var render = function() { 
    renderer.render(scene, camera); 
}; 

var loop = function() { 
    update(); 
    render(); 
    requestAnimationFrame(loop, renderer.canvas); 
}; 
loop(); 

Answer 1

Jeśli chcesz zmienić wierzchołki swojej geometrii, trzeba ustawić geometry.verticesNeedUpdate = true;.

function update() { 
    circle.position.x += 0.01; 
    line.geometry.vertices[ 0 ].x = circle.position.x; 
    line.geometry.verticesNeedUpdate = true; 
}; 

Po renderingu, geometry.verticesNeedUpdate jest resetowany do false, więc trzeba przywrócić go do true każdym razem wierzchołki geometrii są zmieniane.

EDIT: Jeśli używasz BufferGeometry użyć tego wzoru Zamiast:

geometry.attributes.position.needsUpdate = true; 

Three.js r.74