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

Question

我有一个 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?
}

谢谢。

Answer 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)
})

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