Three.js在動畫精靈之間添加動態線條

我試圖在動畫精靈之間添加一條線，就像在this example中一樣。我嘗試了不同的解決方案。但是我無法制作出動態的線條，甚至沒有動畫之間的靜態線條。從這個例子中可以在這些精靈之間創建一條動態的線條。如果是，我該怎麼辦？Three.js在動畫精靈之間添加動態線條

這是我使用的代碼：

for (var i = 0; i < objects.length; i ++) { 
    var geometry = new THREE.Geometry();  
     geometry.vertices.push(objects.position); 

      var material = new THREE.LineBasicMaterial({ 
         color: 0x0000FF, 
         transparent: true, 
         opacity: 1 
        });   
      var line = new THREE.Line(geometry, material, THREE.LinePieces); 
      scene.add(line); 

}

在... jsfiddle.net/LxpmN/40/ u能看到什麼，我儘量做到，但他用精靈的兩個網格來代替。據我所知，我需要把line.geometry.verticesNeedUpdate = true;，但我甚至不能從對象，如前面的例子中靜態線。

來源

2015-08-23 A. I.

你在使用什麼渲染器？ – WestLangley

WebGL渲染器。 –

如果要將線段集合添加到場景中，請創建一個THREE.Line而不是多個。使用一種模式像這樣的：

var geometry = new THREE.Geometry();  

for (var i = 0; i < objects.length - 1; i ++) { // stop one short of end 

    geometry.vertices.push(objects[ i ].position); 
    geometry.vertices.push(objects[ i + 1 ].position); 

} 

var material = new THREE.LineBasicMaterial({ color: 0x0000FF }); 

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

scene.add(line);

如果您修改任何對象的位置，你將不得不添加以下行的渲染循環：

line.geometry.verticesNeedUpdate = true;

three.js所r.71

來源

2015-08-23 19:25:38 WestLangley

一切工作正常，直到'line.geometry.verticesNeedUpdate = true;'在'函數render（）{...'。之後，我得到一個黑屏。在http://jsfiddle.net/f7aok1y6/67/上，您可以看到您的代碼正在工作，但在渲染循環中將'line.geometry.verticesNeedUpdate = true;'後，屏幕變黑。 –

我預計現在你發現了你的錯誤，對嗎？ – WestLangley

不，以前有'line.geometry.verticesNeedUpdate = true;'錯誤。我把那條線放在哪裏都還沒有工作，我不知道爲什麼。我檢查其他jsfiddle.net/LxpmN/40/以找出錯誤的位置。 –

Three.js在動畫精靈之間添加動態線條

回答

相關問題