使用 jQuery 创建 3D 宇宙

发布日期 作者

Universe Screenshot

Will Jessup 刚刚发布了一个很棒的演示，展示了使用 jQuery（以及一般情况下使用 JavaScript）可以实现的功能：一个 3D 宇宙模型。尝试上下移动鼠标来查看不同角度的宇宙，水平移动鼠标可以让宇宙旋转得更快。所有图片都来自 NASA。

Will 使用了很多技巧来真正模拟 3D 体验。

  • 他根据元素的深度调整了图片的不透明度和 z-index。
  • 高度和宽度也是动态调整的，但都是使用 fontSize 和 EMs 布局，让你可以模拟文本的景深（除了静态图片或元素）。
  • 背景会根据旋转的速度和方向移动。

另外，看看 他的代码，里面有具体的缓存优化技术（比如保存对单个 jQuery 对象的引用，并反复调用它，而不是在每次旋转时重新查询）。

一定要 digg 起来，因为它是一个非常棒的 jQuery 功能演示。

关于“使用 jQuery 创建 3D 宇宙”的 8 个想法

  1. Sam 于 说：

    不过，这里有一点非 jQuery 代码……

    document.onmousemove = function(e) {
    if (window.event) e = window.event;

    可以使用以下代码代替

    $(document).mousemove(function(e) {

    不过，希望它也能在 IE 中运行。

  2. wjessup 于 说：

    是的，这是有意为之，目的是减少 $() 查询次数，提高速度。你会注意到，jQuery 的 css 设置方法也被移除了，但仍然保留在代码中，但未被使用。IE 支持，哎……我感到屁股一阵剧痛。

  5. Dan Atkinson 于 说：

    当我点击任何行星时，都会收到以下错误信息

    未找到
    无法在此服务器上找到请求的 URL /sandbox/jquery/solar_system/e。

    此外，在尝试使用 ErrorDocument 处理请求时遇到了 404 未找到错误。
    Apache/1.3.36 Server at http://www.willjessup.com Port 80

    这是故意的吗？因为你的 rotator 也会出现同样的情况？

  6. Ralph Whitbeck 于 说：

    太棒了。让我用 jQuery 做的小视频模板看起来像小孩玩的东西。

    这是一个非常棒的 jQuery 功能演示。

    顺便说一句，我从来没有意识到天王星这么大！

  7. Johan Sundström 于 说：

    另一个我认为很容易实现的附加功能：为什么不将摄像机距离的改变与鼠标滚轮事件关联起来？选择一个对数尺度，效果最佳。（假设代码以一种让添加此功能不那么麻烦的方式编写。）

    不过，已经是一个很棒的演示了！为你的创造力点赞。

  8. flash200 于 说：

    你使用的是 canvas 标签吗？
    http://en.wikipedia.org/wiki/Canvas_%28HTML_element%29

    …还是使用 DOM 来移动和调整图片大小？我做了一个稍微类似的动画，它使用纯 JavaScript 和 DOM……
    http://www.forestpath.org/demos/web_motion/WebMotion.html

    …我发现，显然，每当 DOM 元素被移动或调整大小时，整个页面都会重新绘制 (?)

    只要页面本身为空，我就可以在大多数情况下解决这个问题。但是，当我将动画添加到一个非简单的 HTML 页面时，频繁的页面重绘会导致浏览器响应速度变慢，并且动画速度也慢得令人难以忍受。

    我注意到，“3D 宇宙模型”动画偶尔会卡顿。我也是这样。我尝试了实时动画，但这使得卡顿看起来更明显，因为图像在卡顿之后会“跳跃”得更远。这些卡顿可能是 JavaScript 事件模型不可避免的一部分。

    总的来说，我发现 JavaScript 不适合这种动画。还没有尝试过 canvas 标签（在我上次查看时，它在 IE 中的支持并不理想），但也许值得一看。