在运行时添加到场景后更新three.js组

时间:2016-01-13 22:16:01

标签: three.js

我有一个THREE.Group();在我的场景中,在运行时我想向这个组添加更多但是它没有得到更新或更好我无法看到我在运行时添加的精灵。精灵在组中,但没有渲染。

如何更新THREE.Group();?

示例代码以澄清我的问题。我知道并不是真的在跑步。

var systemGroup = new THREE.Group();
init();
animate();

function init() {
    //add something to systemGroup like multiple meshes
    systemGroup.add(mesh);
    scene.add(systemGroup);
}

function render() {
    scene.updateMatrixWorld();
    renderer.render( scene, camera );
}

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

function addMore(x,y,z){
    var map = THREE.ImageUtils.loadTexture( "sprite.png" );
    var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } );
    var sprite = new THREE.Sprite( material );
    sprite.position.set(x,y,z);
    systemGroup.add(sprite);
    //Here how do i update the group so that the mesh is in the scene?
}

谢谢。

1 个答案:

答案 0 :(得分:1)

您要显示的代码是一遍又一遍地添加相同的网格。 由于网格已经在组中,因此它不会改变任何东西。

您似乎想要的是clone()网格并将其添加到不同的位置。

像这样:

var group = new THREE.Group()
scene.add(group);

document.body.addEventListener('click', function(evt) {
  var clone = mesh.clone()
  clone.position.set(-100 + Math.random()*200, 0, 0)
  group.add(mesh)
})

无需使用其他任何内容更新群组。