Three.js - 頂点が更新されないのはなぜですか？

Question

私は独立して動く円のループを持っています。私は、キャンバスの中心を線で描くようにしています。セットアップ中に線は正常に機能しますが、レンダリング中に頂点が更新されません。 testLine.geometry.verticesNeedUpdate = trueが検出された場合でも、実際にはfalseに設定されます。

var container; 
var camera, scene, renderer, lines=[], items =[]; 

var numItems = 40; 
var xspeed; 
var yspeed; 
var lineGeometry; 
var testLineGeometry; 

init(); 
animate(); 
function init() { 
    container = document.createElement('div'); 
    document.body.appendChild(container); 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 
    scene = new THREE.Scene(); 
    scene.background = new THREE.Color(0xf7f7f7); 
    var geometry = new THREE.CircleBufferGeometry(20, 20); 
    lineGeometry = new THREE.Geometry(); 
    var testLineGeometry = new THREE.Geometry(); 
    for (var i = 0; i < numItems; i ++) { 
    var item = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0x000000 })); 
    item.position.x = (Math.random() * 20.1 - 1); 
    item.position.y = (Math.random() * 20.1 - 1); 
    item.xspeed = Math.random() * 2.1 - 1; 
    item.yspeed = Math.random() * 2.1 - 1; 
    // item.position.normalize(); 
    items.push(item); 
    scene.add(item); 

    lineGeometry.vertices.push(item.position); 

    testLineGeometry.vertices.push(new THREE.Vector3(item.position.x, item.position.y, 0)); 
    testLineGeometry.vertices.push(new THREE.Vector3(0, 0, 0)); 

    testLine = new THREE.Line(testLineGeometry, new THREE.LineBasicMaterial({color: 0x000000})); 
    lines.push(testLine); 
    scene.add(testLine); 

    } 

    line = new THREE.Line(lineGeometry, new THREE.LineBasicMaterial({color: 0x000000})); 
    // scene.add(line); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    container.appendChild(renderer.domElement); 
    // 
} 

// 
function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 
function render() { 


items.forEach(circle => { 
    circle.position.x += circle.xspeed; 
    circle.position.y += circle.yspeed; 

    if (circle.position.x > window.innerWidth/2 || circle.position.x < -window.innerWidth/2) { 
    circle.xspeed *= -1; 
    } 

    if (circle.position.y > window.innerWidth/2 || circle.position.y < -window.innerWidth/2) { 
    circle.yspeed *= -1; 
    } 
}); 

    testLine.geometry.verticesNeedUpdate = true; 

    camera.position.x = 0; 
    camera.position.z = 1000; 

renderer.render(scene, camera); 
} 

レンダリング中にtestLineの適切な頂点を更新するにはどうすればよいですか？

Answer 1

testLineGeometry.vertices.push(new THREE.Vector3(item.position.x, item.position.y, 0));私はあなたがそのようにする理由を得ることができません。 z - 円の位置の座標は常に0であるため、testLineの頂点の配列の項目としてそれらの位置を割り当てることができます。

私はあなたのコードを再加工：

• は直testLinetestLineGeometry.vertices.push(item.position);
• 中心に対して同じ点を共有する頂点の配列に円の位置を押し込みます。
• for -loopのうちtestLineのインスタンス化が移動しました。
• THREE.Line()の代わりにTHREE.LineSegments()を使用しています。testLineには円の数より2倍多くの頂点が含まれています。

var container; 
 
var camera, scene, renderer, lines = [], 
 
    items = []; 
 

 
var numItems = 40; 
 
var xspeed; 
 
var yspeed; 
 
var lineGeometry; 
 
var testLineGeometry; 
 

 
init(); 
 
animate(); 
 

 
function init() { 
 
    container = document.createElement('div'); 
 
    document.body.appendChild(container); 
 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 10000); 
 
    scene = new THREE.Scene(); 
 
    scene.background = new THREE.Color(0xf7f7f7); 
 
    var geometry = new THREE.CircleBufferGeometry(20, 20); 
 
    lineGeometry = new THREE.Geometry(); 
 
    var testLineGeometry = new THREE.Geometry(); 
 
    var center = new THREE.Vector3(); 
 
    for (var i = 0; i < numItems; i++) { 
 
    var item = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ 
 
     color: Math.random() * 0x000000 
 
    })); 
 
    item.position.x = (Math.random() * 20.1 - 1); 
 
    item.position.y = (Math.random() * 20.1 - 1); 
 
    item.xspeed = Math.random() * 2.1 - 1; 
 
    item.yspeed = Math.random() * 2.1 - 1; 
 
    // item.position.normalize(); 
 
    items.push(item); 
 
    scene.add(item); 
 

 
    lineGeometry.vertices.push(item.position); 
 
    
 
    testLineGeometry.vertices.push(item.position); 
 
    testLineGeometry.vertices.push(center); 
 
    } 
 

 
    testLine = new THREE.LineSegments(testLineGeometry, new THREE.LineBasicMaterial({ 
 
    color: 0x000000 
 
    })); 
 
    lines.push(testLine); 
 
    scene.add(testLine); 
 

 
    line = new THREE.Line(lineGeometry, new THREE.LineBasicMaterial({ 
 
    color: 0x000000 
 
    })); 
 
    // scene.add(line); 
 

 
    renderer = new THREE.WebGLRenderer(); 
 
    renderer.setPixelRatio(window.devicePixelRatio); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    container.appendChild(renderer.domElement); 
 
    // 
 
} 
 

 
// 
 
function animate() { 
 
    requestAnimationFrame(animate); 
 
    render(); 
 
} 
 

 
function render() { 
 

 

 
    items.forEach((circle, idx) => { 
 
    circle.position.x += circle.xspeed; 
 
    circle.position.y += circle.yspeed; 
 

 
    if (circle.position.x > window.innerWidth/2 || circle.position.x < -window.innerWidth/2) { 
 
     circle.xspeed *= -1; 
 
    } 
 

 
    if (circle.position.y > window.innerWidth/2 || circle.position.y < -window.innerWidth/2) { 
 
     circle.yspeed *= -1; 
 
    } 
 
    }); 
 

 
    testLine.geometry.verticesNeedUpdate = true; 
 

 
    camera.position.x = 0; 
 
    camera.position.z = 1000; 
 

 
    renderer.render(scene, camera); 
 
}

body { 
 
    overflow: hidden; 
 
    margin: 0; 
 
}

<script src="https://threejs.org/build/three.min.js"></script>