如何修复three.js加载超过2分钟，它崩溃了

我正在创建一个3D游戏，我刚刚开始。但是，我很快就遇到了本地主机GET的问题，花了超过2分钟，在生命的15-45秒之后，画布变成白色并且在控制台中，我收到警告，表明WebGL上下文已经丢失。此外，在任务管理器中，游戏占用了CPU的30％和100％的GPU。

这是一个新的在线3D多人游戏。我尝试在新帧之后处理内存，但这不起作用。我也尝试过预加载所有纹理以减少使用CPU，但30％的CPU保持不变。这是我的代码:(客户端）

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    scene.autoUpdate = false;
    var preLoad = new THREE.TextureLoader();
    var sunTexture = preLoad.load("/static/sun-texture.jpg");
    var mercuryTexture = preLoad.load("/static/mercury-texture.jpg");
    var socketio = io();
    var Geometries = [];
    socketio.on("TX2", function (data) {
        Geometries = [];
        var collectedEntities = [];
        data.objects.forEach(obj => {
            collectedEntities.push(obj);
        });
        DisplayAllEntities(collectedEntities);
    });
    function DisplayAllEntities(objects) {
        var loader;
        objects.forEach(obj => {
            if (obj.geometry == "sphere") {
                if (obj.type != "ordinary_sphere") {
                    switch (obj.type) {
                        case "sun":
                            var material = new THREE.MeshBasicMaterial({ map: sunTexture });
                            break;
                        case "mercury":
                            var material = new THREE.MeshBasicMaterial({ map: mercuryTexture });
                            camera.position.z = obj.z + 500;
                            break;
                    }
                }
                loader = new THREE.TextureLoader();
                var texture = loader.load(obj.texture)
                var geometry = new THREE.SphereGeometry(obj.radius, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);

                var mesh = new THREE.Mesh(geometry, material);
                Geometries.push(mesh);

            } else if (obj.geometry == "cube") {
                loader = new THREE.TextureLoader();
                var texture = loader.load(obj.texture)
                var geometry = new THREE.CubeGeometry(obj.width, obj.height, obj.depth);

                var material = new THREE.MeshBasicMaterial({ map: texture });
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position = {"x": obj.x, "y": obj.y, "z": obj.z}
                Geometries.push(mesh);

            }
            loader = null;
        });

        scene.children = [];
        scene.dispose();
        Geometries.forEach(obj => {
            scene.add(obj);
        });
        render();
    }
    function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    } 

服务器只计算位置，并将它们发送给客户端以进行渲染。

我期望获得更低的CPU和GPU使用率以及更低的加载时间，但性能仍然保持不变。

每次需要渲染时都要创建每个对象，尤其是加载相应的纹理效率非常低。一个更好的解决方案是预先设置对象，然后不断更新这些对象。这需要

• 服务器发出初始化（设置对象，加载纹理等）
• 服务器发出游戏状态更新（如果需要，添加/删除项目）
• 服务器发出以更新位置。 （这是每秒执行60次的那个）
• 每个对象在创建时由服务器提供唯一ID，以便客户端知道哪个对象服务器引用。

这需要更多的努力，但会大大提高性能