Memory management Three.js内存分配&；工作流问题

假设我想制作100个对象，例如汽车，就像你在这里看到的：

这辆车目前由5个网格组成：一个黄色立方体和四个蓝色球体

我想知道的是，在内存管理/CPU性能等方面，制造100辆或500辆这样的汽车最有效/正确的方法是什么

我目前的做法如下：

创建一个名为“newCarGroup”的空三组-

为车身创建黄色矩形网格-称为“carBodyMesh”

为轮胎创建四个蓝色球体网格，称为“tire1Mesh”、“tire2Mesh”、“tire3Mesh”和“tire4Mesh”

将车身和四个轮胎添加到“新车组”

最后，在

FOR

循环中，创建/实例化100个“newCarGroup”对象，将每个对象添加到场景的随机位置

代码如下

它现在运行得非常好，但我想知道这是否是“正确的”/最好的方法？
考虑到我有可能最终需要1000辆车，或者5000辆车。那么这个比例是否合适呢

此外，我还需要在车上添加更多的物体：比如4扇窗户——实际上是6扇窗户，还包括前后挡风玻璃，然后是4个大灯，等等。 因此，最终的汽车对象可能最终由20个或更多网格组成

因为我对THREE.JS有点陌生，所以我想确保我养成了良好的习惯，并以正确的方式处理这类事情

这是我的密码：

        function makeOneCar() {
            var newCarGroup = new THREE.Group();

            // 1. CAR-Body:
            const bodyGeometry = new THREE.BoxGeometry(30, 10, 10);
            const bodyMaterial = new THREE.MeshPhongMaterial({ color: "yellow" } ); 
            const carBodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial);

            // 2. TIRES:
            const tireGeometry = new THREE.SphereGeometry(2, 16, 16);;
            const tireMaterial = new THREE.MeshPhongMaterial( { color: "blue" } ); 
            const tire1Mesh = new THREE.Mesh(tireGeometry, tireMaterial);
            const tire2Mesh = new THREE.Mesh(tireGeometry, tireMaterial);
            const tire3Mesh = new THREE.Mesh(tireGeometry, tireMaterial);
            const tire4Mesh = new THREE.Mesh(tireGeometry, tireMaterial);

            // TIRE 1 Position:
            tire1Mesh.position.x = carBodyMesh.position.x - 11;
            tire1Mesh.position.y = carBodyMesh.position.y - 4.15;
            tire1Mesh.position.z = carBodyMesh.position.z + 4.5;

            // TIRE 2 Position:
            tire2Mesh.position.x = carBodyMesh.position.x + 11;
            tire2Mesh.position.y = carBodyMesh.position.y - 4.15;
            tire2Mesh.position.z = carBodyMesh.position.z + 4.5;

            // TIRE 3 Position:
            tire3Mesh.position.x = carBodyMesh.position.x - 11;
            tire3Mesh.position.y = carBodyMesh.position.y - 4.15;
            tire3Mesh.position.z = carBodyMesh.position.z - 4.5;

            // TIRE 4 Position:
            tire4Mesh.position.x = carBodyMesh.position.x + 11;
            tire4Mesh.position.y = carBodyMesh.position.y - 4.15;
            tire4Mesh.position.z = carBodyMesh.position.z - 4.5;

            // Putting it all together:
            newCarGroup.add(carBodyMesh);
            newCarGroup.add(tire1Mesh);
            newCarGroup.add(tire2Mesh);
            newCarGroup.add(tire3Mesh);
            newCarGroup.add(tire4Mesh);

            // Setting (x, y, z) Coordinates - RANDOMLY
            let randy = Math.floor(Math.random() * 10);
            let newCarGroupX = randy % 2 == 0 ? Math.random() * 250 : Math.random() * -250;
            let newCarGroupY = 0.0; 
            let newCarGroupZ = randy % 2 == 0 ? Math.random() * 250 : Math.random() * -250;

            newCarGroup.position.set(newCarGroupX, newCarGroupY, newCarGroupZ)

            scene.add(newCarGroup);
        }




        function makeCars() {
            for(var carCount = 0; carCount < 100; carCount ++) {
                makeOneCar();
            }
        }

函数makeOneCar（）{
var newCarGroup=new THREE.Group（）；
//1.车体：
const bodyGeometry=新的三个BoxGeometry（30,10,10）；
const bodyMaterial=新的3.MeshPhongMaterial（{color:“yellow”}）；
const carBodyMesh=新的三个网格（车身几何结构、车身材料）；
//2.轮胎：
常数比色法=新的三种。比色法（2，16，16）；；
const tireMaterial=新的三点网格材质（{color:“blue”}）；
const Tire1网格=新的三网格（tireGeometry，tireMaterial）；
常数tire2Mesh=新的三个网格（tireGeometry，tireMaterial）；
常量tire3Mesh=新的三个网格（tireGeometry，tireMaterial）；
常数tire4Mesh=新的三个网格（tireGeometry，tireMaterial）；
//轮胎1位置：
tire1Mesh.position.x=carBodyMesh.position.x-11；
tire1Mesh.position.y=carBodyMesh.position.y-4.15；
tire1Mesh.position.z=carBodyMesh.position.z+4.5；
//轮胎2位置：
tire2Mesh.position.x=carBodyMesh.position.x+11；
tire2Mesh.position.y=carBodyMesh.position.y-4.15；
tire2Mesh.position.z=carBodyMesh.position.z+4.5；
//轮胎3位置：
tire3Mesh.position.x=carBodyMesh.position.x-11；
tire3Mesh.position.y=carBodyMesh.position.y-4.15；
tire3Mesh.position.z=carBodyMesh.position.z-4.5；
//轮胎4位置：
tire4Mesh.position.x=carBodyMesh.position.x+11；
tire4Mesh.position.y=carBodyMesh.position.y-4.15；
tire4Mesh.position.z=carBodyMesh.position.z-4.5；
//总而言之：
添加（carBodyMesh）；
新建汽车组。添加（轮胎网）；
添加（tire2Mesh）；
newCarGroup.add（tire3Mesh）；
newCarGroup.add（tire4Mesh）；
//设置（x、y、z）坐标-随机
设randy=Math.floor（Math.random（）*10）；
让newCarGroupX=randy%2==0？Math.random（）*250:Math.random（）*-250；
设newCarGroupY=0.0；
让newCarGroupZ=randy%2==0？Math.random（）*250:Math.random（）*-250；
newCarGroup.position.set（newCarGroupX、newCarGroupY、newCarGroupZ）
场景.添加（newCarGroup）；
}
函数makeCars（）{
对于（变量carCount=0；carCount<100；carCount++）{
makeOneCar（）；
}
}

我想知道这是否是“正确的”/最好的方法

这是主观的。您说该方法对于您当前的用例非常有效，所以对于该用例来说，它很好

那么这个比例是否合适呢

简单的答案是：不。更复杂的答案是：……不太可能

您正在使用几何体和材质，这很好。但是您创建的每个

Mesh

周围都有元信息，这会增加您的总体内存占用

此外，您添加的每个标准

网格

都会产生所谓的“绘制调用”，即GPU绘制该特定形状。相反，请看一看。这允许GPU获得一次关于如何在整个场景中绘制形状的指示。是的，GPU可以同时绘制所有立方体，甚至可以有不同的颜色和变换，而不是单独绘制每个立方体。这个类有一些限制，但它是理解实例如何工作的一个很好的起点