Question

我有一个简单的CSS图片库，当你点击任何图像时，脚本会打开一个带有THREE.JS场景的新模态（弹出窗口）窗口，它基本上建立在图像数据上。

问题在于，每次打开下一张图像时，一切都变得缓慢而缓慢 - 脚本不会杀死以前的场景及其数据。

代码看起来像这样（JQuery）：

$( document ).ready(function() {

$("#modalClose").click(function(e) { $("#modalThree").css("display","none"); $( "#group" ).show(); $( "#container").empty(); while(scene.children.length > 0){ scene.remove(scene.children[0]); } });

        var gallerySize = 6;

            for(var i = 1; i <= gallerySize; i++){

                $("#0" + i).click(function(e) { 

                    $("#modalThree").css("display","block");

                    $( "#group" ).hide();

                          loader.load(

                             $(this).attr("src") ,

                             function ( texture ) { init(texture);  },
                             function ( xhr ) { },
                             function ( xhr ) { }

                          );

                    } );    

            }

});

很确定我需要杀死＆＃39;所有的变量，物体，几何形状，但不知道如果有人在这里可以帮助我会怎么样。请。

Answer 1

在您的示例场景中，在dom准备就绪时清除，而不是点击事件。

试试这段代码：

$( document ).ready(function() {

    var gallerySize = 6;

        for(var i = 1; i <= gallerySize; i++){            

            $("#0" + i).click(function(e) { 
                while(scene.children.length > 0){ scene.remove(scene.children[0]); }
                $("#modalThree").css("display","block");

                $( "#group" ).hide();

                      loader.load(

                         $(this).attr("src") ,

                         function ( texture ) { init(texture);  },
                         function ( xhr ) { },
                         function ( xhr ) { }

                      );

                } );    

        }

});

Answer 2

实际上，由于听众人数不断增加而发生滞后。

而且表现统计显示有34个，然后是43,46,53,56,61,64等......

Three.JS在模态（弹出窗口）窗口运行

2 个答案: