javascript - 创建 JavaScript 360 度图像旋转效果需要多少张图像？

Question

我在 Apple 上查看了一些演示，展示了一些很酷的 HTML5、CSS3 和 JavaScript 演示，我对这个360 度产品查看器很感兴趣。

我想知道你认为我需要尝试复制的许多照片。苹果自己several在页面上说，但这不是很具描述性。

尝试完成似乎是一项非常艰巨的任务，所以我可能不会这样做，但我只是想知道。

谢谢。

score 2 · Accepted Answer

他们没有具体说明，因为没有真正的答案。如果你想让它超级流畅，360 度图像会很好。Apple 使用了 72。您可以使用从 2 到 72 到 360 到无穷大的任何数字来获得技术上的效果，因此您可以决定需要多少工作才能获得效果的平滑程度。

对不起。

score 1 · Accepted Answer

取决于您想要的旋转精度。

没有固定的数字。

在那个具体的例子中，他们使用的是 72。

将 url的最后72部分替换为01到72以获取所有图像。

score 1 · Accepted Answer

你需要several，这是尽可能描述性的。

但请注意一件事。如果您按特定顺序加载它们，您可以获得渐进式效果。

例如，首先加载“北”和“南”。然后是“东”和“西”。然后是“northwest”、“southwest”、“northeast”和“southeast”等，这样您就可以拥有超过 72 张图像，但用户无需等待即可获得逐渐流畅的体验。

请注意，在这种情况下，您将以 2 的幂次方加载它们。

第一次加载（在一张图片已经存在之后）：1 张图片（相反的）
第二次加载：2 张图片（侧面）
第三次加载：4 张图片
第四次加载：8 张图片
...
第八次加载：128 张图片。

请注意，您不会那么容易地使用度数。（他们只需要除以 5，360/5=72）
为了计算哪个图像在给定的度数上，你可以使用插值。
因此，首先您将 360 度内插到 2（图像），然后到 4，然后是 8... 以了解要根据您拥有的图像选择哪个图像

插值的简单解释在这里。

score 1 · Accepted Answer

从视觉而不是技术...旋转的平滑度是您想要查看需要多少图像的因素。如果对象的大小和详细程度有助于回答，那么您就有了带宽。最少 20 张图片，推荐 40 张，但 72 张看起来很棒。请记住，如果是摄影，每张图片都会增加更多的工作量和难度。

这是一张有助于展示图像数量的图表。 http://www.photospherix.com/matrix.html

score 1 · Accepted Answer

1

该演示使用 72 张图像。

^{顺便说一句，演示似乎只是更新了图像src属性。}

于 2010-12-17T00:11:44.027 回答

score 0 · Accepted Answer

您可以从这里下载演示试一试我认为 24 是一个不错的数字，但这取决于您计划创建多少个旋转视图。

6 回答 6