javascript - 优化 3D 世界 Javascript 动画

Question

我最近萌生了创建标签云的想法，就像地球形状的动画一样。我从 ngdc.noaa.gov 中提取了海岸线坐标，并编写了一个小脚本，将其显示在我的浏览器中。现在您可以想象，整个海岸线由大约 48919 个点组成，我的脚本将单独渲染这些点(每个坐标由一个跨度表示)。显然，没有浏览器能够流畅地呈现这一点——但如果我能在我的旧 p4 2.8 Ghz(作为代表性基准)上呈现多达 200 个跨度(是现在的两倍)，那就太好了。我可以使用任何 javascript 优化来加速这些跨度的显示吗？

一个“坐标”:

<div id="world_pixels">
<span id="wp_0" style="position:fixed; top:0px; left:0px; z-index:1; font-size:20px; cursor:pointer;cursor:hand;" onmouseover="magnify_world_pixel('wp_0');" onmouseout="shrink_world_pixel('wp_0');" onClick="set_askcue_bar('', 'new york')">new york</span>
</div>

脚本:

$(document).ready(function(){

        world_pixels = $("#world_pixels span");

        world_pixels.spin();

        setInterval("world_pixels.spin()",1500);

});


z = new Array();

$.fn.spin = function () {

    for(i=0; i<this.length; i++) {

            /*actual screen coordinates: x/y/z --> left/font-size/top
                  300/13/0  300/6/300
                         | /
                         |/
            0/13/300 ----|----  600/13/300
                        /|
                       / |
              300/20/300    300/13/600
            */

            /*scale font size*/
        var resize_x = 1;
            /*scale width*/
        var resize_y = 2.5;
            /*scale height*/
        var resize_z = 2.5;

        var from_left = 300;
        var from_top = 20;

            /*actual math coordinates:

                        1  -1
                         | /
                         |/
                  1  ----|---- -1
                        /|
                       / |
                      1  -1 
            */

         //var get_element = document.getElementById();
         //var font_size = parseInt(this.style.fontSize);
         var font_size = parseInt($(this[i]).css("font-size"));

         var left = parseInt($(this[i]).css("left"));




         if (coast_line_array[i][1]) {

         } else {

            var top = parseInt($(this[i]).css("top"));

            z[i] = from_top + (top - (300 * resize_z)) / (300 * resize_z);
            //global beacause it's used in other functions later on 

            var top_new = from_top + Math.round(Math.cos(coast_line_array[i][2]/90*Math.PI) * (300 * resize_z) + (300 * resize_z));

            $(this[i]).css("top", top_new);

            coast_line_array[i][3] = 1;

         }


         var x = resize_x * (font_size - 13) / 7;

         var y = from_left + (left- (300 * resize_y)) / (300 * resize_y);




         if (y >= 0) {

             this[i].phi = Math.acos(x/(Math.sqrt(x^2 + y^2)));

         } else {

             this[i].phi = 2*Math.PI - Math.acos(x/(Math.sqrt(x^2 + y^2)));
             i
         }

         this[i].theta = Math.acos(z[i]/Math.sqrt(x^2 + y^2 + z[i]^2));

         var font_size_new = resize_x * Math.round(Math.sin(coast_line_array[i][4]/90*Math.PI) * Math.cos(coast_line_array[i][0]/180*Math.PI) * 7 + 13);

         var left_new = from_left + Math.round(Math.sin(coast_line_array[i][5]/90*Math.PI) * Math.sin(coast_line_array[i][0]/180*Math.PI) * (300 * resize_y) + (300 * resize_y));



         //coast_line_array[i][6] = coast_line_array[i][7]+1;

         if ((coast_line_array[i][0] + 1) > 180) {

            coast_line_array[i][0] = -180;

         } else {

            coast_line_array[i][0] = coast_line_array[i][0] + 0.25;

         }

         $(this[i]).css("font-size", font_size_new);

         $(this[i]).css("left", left_new);




    }

}

resize_x = 1;

function magnify_world_pixel(element) {

    $("#"+element).animate({
        fontSize: resize_x*30+"px"
                    }, {
        duration: 1000  
                    });

}

function shrink_world_pixel(element) {

    $("#"+element).animate({
        fontSize: resize_x*6+"px"
                    }, {
        duration: 1000  
                    });



}

如果有任何优化我的脚本的建议，我将不胜感激，甚至可能有一种完全不同的方法来解决这个问题。存储所有坐标数组的整个 .js 文件在我的页面上可用，该文件大约 2.9 MB，因此您可以考虑拉取 .zip 进行本地测试:

metaroulette.com/files/31218.zip

metaroulette.com/files/31218.js

附言我用来创建跨度的 php:

<?php

                //$arbitrary_characters = array('a','b','c','ddsfsdfsdf','e','f','g','h','isdfsdffd','j','k','l','mfdgcvbcvbs','n','o','p','q','r','s','t','uasdfsdf','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9',);
                $arbitrary_characters = array('cat','table','cool','deloitte','askcue','what','more','less','adjective','nice','clinton','mars','jupiter','testversion','beta','hilarious','lolcatz','funny','obama','president','nice','what','misplaced','category','people','religion','global','skyscraper','new york','dubai','helsinki','volcano','iceland','peter','telephone','internet', 'dialer', 'cord', 'movie', 'party', 'chris', 'guitar', 'bentley', 'ford', 'ferrari', 'etc', 'de facto');


                    for ($i=0; $i<96; $i++) {

                        $arb_digits = rand (0,45);

                        $arbitrary_character = $arbitrary_characters[$arb_digits];
                        //$arbitrary_character = ".";

                        echo "<span id=\"wp_$i\" style=\"position:fixed; top:0px; left:0px; z-index:1; font-size:20px; cursor:pointer;cursor:hand;\" onmouseover=\"magnify_world_pixel('wp_$i');\" onmouseout=\"shrink_world_pixel('wp_$i');\" onClick=\"set_askcue_bar('', '$arbitrary_character')\">$arbitrary_character</span>\n";

                    }

                ?>

Answer 1

你总是可以使用 <canvas> element .它在支持它的浏览器上呈现很多的速度更快。

不过，在版本 9 发布之前，您必须使用 Internet Explorer 的变通方法。您可以使用 ExplorerCanvas模拟 IE 的 Canvas 支持。但是，只要知道它非常慢——甚至可能比您的算法还慢。如果 IE 支持对您很重要，您可以要求用户安装 Google Chrome Frame如果他们希望在仍使用 Internet Explorer 浏览器的同时获得更好的体验；但除此之外，您无法在 IE 中加快此类操作的速度。