xkcd 是怎么做 xk3d 的? [英] How is xkcd doing xk3d?

问题描述

我对 xkcd 上今天的 3D 网络漫画感到惊讶.他怎么会那样做?是否需要手动重做每部漫画，还是有某种方法可以使其自动化?

编辑

仍然可以在 http://xk3d.xkcd.com

上找到 3D 漫画

解决方案

每个图像都被拆分成多个层——每个层都是它自己的 PNG 文件，并包含大量的透明度.

所有这些图像都嵌套在一个

中:

<!-- 样式属性省略--><img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_bike.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_girl.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_mask.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_desk_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_guy.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" ><img src="http://imgs.xkcd.com/xk3d/880/headache_text.png" >

... <div id="comic"> 是相对定位的(或更重要的是，非静态定位)并且每个图像都绝对定位在其中，以及重新定位-大小.当您移动鼠标时，会进行一些密集的数字运算，以重新计算每个图像的 top 和 left CSS 属性的新值.

我在我的网站上写了更多关于它的内容，并解释了如何从头开始构建自己的简化版本:http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

然而，将每个图像分成层是自动的，有一个(愚人节玩笑?)呼吁志愿者把它做得更好.

I'm amazed by today's 3D webcomics found at xkcd. How would he have done that? Would it require manually redoing every single comic or is there some way to automate it?

Edit

The 3D comics are still available on http://xk3d.xkcd.com

解决方案

Each image is split into layers - each layer is its own PNG file and includes a lot of transparency.

All these images are nested inside a <div>:

<div id="comic">
    <!-- style attributes omitted -->
    <img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_bike.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_girl.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_mask.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_guy.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
    <img src="http://imgs.xkcd.com/xk3d/880/headache_text.png" >
</div>

... the <div id="comic"> is relatively positioned (or more importantly, non-statically positioned) and each image is absolutely positioned within it, as well as re-sized. As you move the mouse, some intense number crunching is done to recalculate new values for the top and left CSS properties of each image.

I wrote some more about it on my web site, and explain how to build your own simplified version from the ground up: http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d

The splitting of each image into layers, however, is automated, with a (April fools joke?) call for volunteers to make it better.

这篇关于xkcd 是怎么做 xk3d 的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！