JavaScript 360度の画像スピンエフェクトを作成するために必要な画像はいくつ必要でしたか？

Question

私はAppleでいくつかのデモを見ていました、いくつかのクールなHTML5、CSS3、JavaScriptデモを紹介していましたが、私は興味をそそられました これです, 、ある種の360度の製品視聴者。

私はあなたがこれを再現しようとする必要があると思う多くの写真を疑問に思っていました。リンゴ自身が言う several ページでは、それはそれほど説明的ではありません。

試して達成するのは非常に困難な仕事のように思われるので、私はそれをしないかもしれませんが、私はただ疑問に思っています。

ありがとう。

Answer 1

本当の答えがないので、彼らは指定しません。あなたがそれを非常に滑らかにしたいなら、360の画像がいいでしょう。 Appleは72を使用しました。2〜72から360までの任意の数字を使用して技術的に効果を得ることができます。

ごめん。

Answer 2

デモは72の画像を使用します。

^{ちなみに、デモは画像を更新するだけのようです src 属性。}

Answer 3

必要な回転の精度に依存します。

固定番号はありません。

その特定の例では、72を使用しています。

画像はで見つけることができます http://developer.apple.com/safaridemos/showcase/threesixty/images/optimized/seq_v04_640x378_72.jpg

最後を交換します 72 とのURLの一部 01 に 72 すべての画像を取得します。

Answer 4

あなたが必要です several, 、それはそれが得るのと同じくらい記述的です。

しかし、1つに注意してください。特定の順序でそれらをロードすると、進歩的な効果を得ることができます。

たとえば、最初の「北」と「南」をロードします。その後、「東」と「西」。次に、「北西」、「南西」、「北東」、「南東」など、72を超える画像を持つことができますが、ユーザーは次第にスムーズな体験をするのを待つ必要はありません。

この場合、2つの力でそれらをロードすることに注意してください。

最初の負荷（1つの画像がすでにそこにある後）：1画像（反対）
2番目の負荷：2画像（側面）
3番目の負荷：4つの画像
4番目の負荷：8画像
...
8番目の負荷：128画像。

学位を簡単に使用しないことに注意してください。 （彼らは5、360/5 = 72で分割する必要がありました）
どの画像が特定の程度にあるかを計算するために、補間を使用します。
したがって、最初に360度（画像）に干渉し、次に4、次に8 ...

補間の簡単な説明はです ここ.

Answer 5

技術的ではなく視覚から...回転の滑らかさは、必要な画像の数を調べたい要因です。サイズは、オブジェクトと詳細のレベルが答えに役立つ場合、帯域幅が得られます。 20枚の画像は最小限です。40は良い推奨事項ですが、72は見栄えがよくあります。写真の場合、各画像はより多くの作業と難易度を追加することを忘れないでください。

ここに、ヘルプが画像の量を紹介するチャートがあります。http://www.photospherix.com/matrix.html

Answer 6

ここからデモをダウンロードできます。それを使ってプレイします。24は良い数字だと思いますが、作成する予定の回転ビューの数に依存します。

http://lukedurrant.com/2011/08/apples-360-rotating-ipod-html-5-source-code-download/