Three.js动态增删场景模型_three删除和添加模型-CSDN博客

本文介绍了在three.js中如何利用THREE.Group有效地动态增删场景中的模型，避免频繁操作scene，提高代码的可维护性。通过创建一个Group并将模型添加到Group中，可以在需要时方便地添加或移除模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习交流欢迎加群：789723098，博主会将一些demo整理共享

有时候我们在开发一些项目的时候，需要不断的往场景中添加和移除模型，所以会经常调用到scene，这是一件很烦的事，特别是当项目很大的时候，你会发现再很多地方乱用scene.add和scene.romove会很容易出错，那有没有什么好方法避免N多次的scene调用的，当然是有的啦，three.js设计的时候应该也考虑到这个问题了吧，所以就有了THREE.Group这个东西。

为了解决上述问题，我们可以在一开始实例化一个THREE.Group，然后讲不带任何子对象的group挂载到scene下面，像：

scene = new THREE.Scene()

group1 = new THREE.Group()

group2 = new THREE.Group()

scene.add(group1, group2)

从这里开始，你可以根据场景需求，在程序运行的任何阶段，将模型添加到group里面，场景就会自动将模型显示出来，删除的时候亦只需要移除group中的子对象即可：

group1.remove(...)
group2.remove(...)
......

这样一来就可以不用频繁调用scene去添加和移除模型。当需要移除某个group时，直接通过scene移除即可：

scene.remove(group1);
scene.remove(group2);

下边时笔者实现的一个demo, 代码如下：

<!DOCTYPE html>
<html lang="en