Three.js 在动画精灵之间添加动态线条

Question

我正在尝试在动画精灵之间添加一条线，就像 this example 中那样。我尝试了不同的解决方案。但是我无法制作动态线，甚至无法制作动画精灵之间的静态线。是否可以在该示例中的这些精灵之间创建一条动态线。如果可以，我该怎么做？

这是我使用的代码：

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/ 你可以看到我试图实现的目标，但他使用了两个网格而不是精灵。我知道我需要放置 line.geometry.verticesNeedUpdate = true;，但我什至无法像前面的示例那样从对象创建静态线。

Answer 1

如果要将一组线段添加到场景中，请创建一个 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

Three.js 在动画精灵之间添加动态线条

Three.js add dynamic line(s) between animated sprites

javascript

line

sprite

three.js