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 );

}

On ... 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在动画精灵之间添加动态线

1 个答案: