创建 JavaScript 360 度图像旋转效果需要多少图像？
我在 Apple 上观看了一些演示，其中展示了一些很酷的 HTML5、CSS3 和 JavaScript 演示，我对 很感兴趣这个，是一种 360 度产品查看器。
我想知道你认为我需要尝试复制的许多照片。苹果自己在页面上说几个，但这并不是很具有描述性。
尝试完成这似乎是一项非常艰巨的任务，所以我可能不会这样做，但我只是想知道。
谢谢。
I was looking at some demos over at Apple showcasing some cool HTML5, CSS3 and JavaScript demos and I got intrigued by this one, a 360 degree product viewer of sorts.
I was wondering out many photos you think I would need to try and replicate this. Apple themselves say several on the page, but that isn't very descriptive.
It seems like it would be a very arduous task to try and accomplish so I may not do it, but I'm just wondering.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
他们没有具体说明，因为没有真正的答案。如果你想让它超级平滑，360 度图像会很好。 Apple 使用了 72。从技术上讲，您可以使用从 2 到 72 到 360 到无穷大的任何数字来获得效果，因此您可以决定需要付出多少努力以及效果有多流畅。
对不起。
They don't specify because there is no real answer. If you want it to be super-smooth, 360 images would be nice. Apple used 72. You can use any number from 2 to 72 to 360 to infinity to technically get the effect, so it's your call just how much work is worth just how smooth an effect.
Sorry.
该演示使用 72 张图像。
顺便说一下，该演示似乎只是更新了图像
src属性。The demo uses 72 images.
Incidentally, the demo seems to just update the image
srcattribute.取决于您想要的旋转精度。
没有固定的数字。
在该特定示例中，他们使用 72。
图像可以在 找到http://developer.apple.com/safaridemos/showcase/thirdsixty/images/optimized/Seq_v04_640x378_72.jpg
将网址的最后 72 部分替换为 01 > 到 72 以获取所有图像。
Depends on the precision of the rotation you want.
There is no fixed number.
In that specific example they are using 72.
the images can be found at http://developer.apple.com/safaridemos/showcase/threesixty/images/optimized/Seq_v04_640x378_72.jpg
replace the last 72 part of the url with 01 to 72 to get all images.
您需要
几个，这是最具有描述性的。但请注意一件事。如果按照特定的顺序加载它们，可以获得渐进的效果。
例如，首先加载“北”和“南”。然后是“东”和“西”。然后是“西北”、“西南”、“东北”和“东南”等等，这样您就可以拥有超过 72 张图像，但用户不必等待即可获得逐渐流畅的体验。
请注意，在这种情况下，您将以 2 的幂次方加载它们。
第一次加载（在一张图像已经存在之后）：1 张图像（相反）
第二次加载：2 张图像（侧面）
第三次加载：4 张图片
第四次加载：8 张图片
...
第 8 次加载：128 张图像。
请注意，您不会那么容易地使用学位。 （他们只需除以 5，360/5=72）
为了计算哪个图像在给定度数上，您可以使用插值法。
因此，首先您需要将 360 度插值到 2 个（图像），然后插值到 4 个，然后是 8 个...以了解要根据您拥有的图像选择哪个图像
插值的简单解释是 此处。
You need
several, that's as descriptive as it gets.But note one thing. If you load them in a specific order, you can get a progressive effect.
For example, load first "north" and "south". Then "east" and "west". Then "northwest", "southwest", "northeast" and "southeast" and so on, that way you can have more than 72 images but the user won't have to wait to get a progressively smooth experience.
Note that in this case you'd be loading them in powers of two.
1st load (after one image is already there): 1 image (the opposite)
2nd load: 2 images (the sides)
3rd load: 4 images
4th load: 8 images
...
8th load: 128 images.
Note that you wouldn't use degrees as easily. (they just had to divide by 5, 360/5=72)
For calculating which image is on a given degree you'd use interpolation.
So first you'd interpolate 360 degrees down to 2 (images), then to 4, then 8... to know which image to pick based on which you have
An easy explanation of interpolation is here.
从视觉上而不是技术上...旋转的平滑度是您想要查看需要多少图像的因素。如果对象的大小和详细程度对答案有帮助，那么您就拥有了带宽。至少 20 张图像，建议 40 张，但 72 张看起来很棒。请记住，如果是摄影，每张图像都会增加更多的工作和难度。
这是一个有助于展示图像数量的图表。
http://www.photospherix.com/matrix.html
From the visual not the technical... The Smoothness of the rotation is the factor that you want to look at on how many images you need. The size if the object and the level of detail help in the answer, you then have the bandwidth. 20 images is a minimum, 40 is a good recommendation, but 72 looks great. Remember that if it is photography, each image adds more work and difficulty.
Here is a chart the helps showcase the amount of images.
http://www.photospherix.com/matrix.html
您可以从这里下载演示
尝试一下，我认为 24 是一个不错的数字，但这取决于您计划创建多少个旋转视图。
http://lukedurrant.com/ 2011/08/apples-360-rotating-ipod-html-5-source-code-download/
You can download the demo from here
Have a play around with it I reckon 24 is a good number but it depends how many rotating view you plan on creating.
http://lukedurrant.com/2011/08/apples-360-rotating-ipod-html-5-source-code-download/