drei js Vertices nicht aktualisiert

Question

Ich verwende three.js r67, und Vertices scheint nicht aktualisiert zu werden. Ich setze geometry.dynamic = true, geometry.verticesNeedUpdate = true. Kreis bewegt sich, aber Linie ist statisch ....

Jemand könnte mir helfen?

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

Wenn Sie die Eckpunkte Ihrer Geometrie ändern möchten, müssen Sie geometry.verticesNeedUpdate = true; einzustellen.

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

Nach dem Rendern geometry.verticesNeedUpdate wird wieder auf false, so müssen Sie es true die Geometrie Eckpunkte geändert werden jedes Mal zurückgesetzt werden.

EDIT: Wenn Sie BufferGeometry verwenden, dieses Muster statt:

geometry.attributes.position.needsUpdate = true; 

three.js r.74