慢速计算机上的三个js闪烁/闪烁

Question

我有一个包含许多对象的应用程序。在我的计算机上可以，但是在较慢的计算机上，它会闪烁。当listArtPaths的数量减少时也可以。

以下是我的一些代码。

 var material = new THREE.MeshPhongMaterial({
  color: color,
  emissive: color,
  wireframe: false,
  transparent: true,
  alphaTest: 0.5,
});
var listArtMesh = [];

listArtPaths.map((pathart_item, n) => {
    pathart_item = pathart_item.trim();
    if (pathart_item) {
        var stroke = floor_art.stroke ? floor_art.stroke + "" : "";
        if((listArtPaths.length < 3) || (stroke !== "" && stroke !== "null")){
            var path = $d3g.transformSVGPath("M " + pathart_item);
            var simpleShapes = path.toShapes(true);
            for (var j = 0; j < simpleShapes.length; j++) {
               var simpleShape = simpleShapes[j];
               if (stroke !== "" && stroke !== "null") {
                    var shape3d = new THREE.BufferGeometry().setFromPoints(simpleShape.getPoints());
                    var meshFacility = new THREE.Line(shape3d, new THREE.LineBasicMaterial({ color: color, lineWidth: 4 }));
                    meshFacility.material.opacity = 1;
                    meshFacility.material.depthWrite = false;
                    meshFacility.userData = { is3D: false, isNode: false };
                    meshFacility.rotation.x = Math.PI;
                    meshFacility.translateZ(-depth - 0.01);
                    meshFacility.translateX(-this.center.width / 6);
                    meshFacility.translateY(-this.center.height / 6);
                    meshFacility.renderOrder = 0.1;
                    this.groupZoom.add(meshFacility);
               }
               else if(listArtPaths.length < 3){
                    var shapeFacility = new THREE.ExtrudeBufferGeometry(simpleShape, {
                                                                            depth: 0.1,
                                                                            bevelEnabled: false
                                                                        });
                    var meshFacility = new THREE.Mesh(shapeFacility, material);
                    meshFacility.material.opacity = 0.8;
                    meshFacility.material.depthWrite = false;
                    meshFacility.userData = { is3D: false, isNode: false, isFloorArt: true };
                    meshFacility.rotation.x = Math.PI;
                    meshFacility.translateZ(-depth - 0.001);
                    meshFacility.translateX(-this.center.width / 6);
                    meshFacility.translateY(-this.center.height / 6);
                    meshFacility.renderOrder = 0.2;
                    this.groupZoom.add(meshFacility);
               }
            }
       }
       else{
            var checkPoints = pathart_item.split(",");
            if (pathart_item && checkPoints.length > 2) {
                if (pathart_item.indexOf('Z') == -1) {
                    pathart_item += " Z";
                }
                var path = $d3g.transformSVGPath("M " + pathart_item, false);
                var floorArtGeo = getFloorArtGeometry(path, 0.1);
                var floorArtMesh = new THREE.Mesh(floorArtGeo);
                floorArtMesh.geometry.computeBoundingBox();
                var boundingBoxMesh = floorArtMesh.geometry.boundingBox.clone();
                if ((parseInt(boundingBoxMesh.min.x) != parseInt(boundingBoxMesh.max.x)) && (parseInt(boundingBoxMesh.min.y) != parseInt(boundingBoxMesh.max.y))) {
                    var floorArtMeshBSP = new ThreeBSP(floorArtMesh);
                    var floorArtMeshBSPNormal = new ThreeBSP(floorArtMesh);
                    for (var k = 0; k < listArtMesh.length; k++) {
                        var meshToCut = listArtMesh[k];
                        meshToCut = meshToCut.subtract(floorArtMeshBSPNormal);
                        floorArtMeshBSP = floorArtMeshBSP.subtract(meshToCut);
                        listArtMesh[k] = meshToCut;
                    }
                    listArtMesh.push(floorArtMeshBSP);
                }
            }
       }
    }
});

for (var k = 0; k < listArtMesh.length; k++) {
   var displayMesh = listArtMesh[k];
   var resultMeshCut = displayMesh.toMesh(material);
   var bbox = new THREE.Box3().setFromObject(resultMeshCut);
   if (bbox.max.x != -Infinity) {
       resultMeshCut.material.opacity = 0.9;
       resultMeshCut.userData = { is3D: false, isNode: false, isFloorArt: true };
       resultMeshCut.rotation.x = Math.PI;
       resultMeshCut.translateZ(-depth - 0.0001*k);
       resultMeshCut.translateX(-this.center.width / 6);
       resultMeshCut.translateY(-this.center.height / 6);
       resultMeshCut.geometry.computeVertexNormals();
       resultMeshCut.renderOrder = 0.3;
       this.groupZoom.add(resultMeshCut);
   }
}

此外，我使用Qt QwebEngineView来显示此网站。在Chrome上也可以，就在我的QwebEngineView 5.8上

如何解决此问题？