私はAppleでいくつかのクールなHTML5、CSS3、JavaScriptのデモを紹介しているデモを見ていましたが、360度の製品ビューアであるこのデモに興味をそそられました。
これを再現する必要があると思われる写真がたくさんあるのではないかと思っていました。Apple自身several
がそのページで言っているが、それはあまり説明的ではない。
やろうとすると大変な作業になりそうなので、やらないかもしれませんが、気になっています。
ありがとう。
私はAppleでいくつかのクールなHTML5、CSS3、JavaScriptのデモを紹介しているデモを見ていましたが、360度の製品ビューアであるこのデモに興味をそそられました。
これを再現する必要があると思われる写真がたくさんあるのではないかと思っていました。Apple自身several
がそのページで言っているが、それはあまり説明的ではない。
やろうとすると大変な作業になりそうなので、やらないかもしれませんが、気になっています。
ありがとう。
本当の答えがないので、彼らは特定しません。非常に滑らかにしたい場合は、360度の画像がいいでしょう。Appleは72を使用しました。2から72、360から無限大までの任意の数値を使用して、技術的に効果を得ることができます。したがって、効果をどれだけスムーズにするかは、どれだけの作業が価値があるかということです。
ごめん。
デモでは72枚の画像を使用しています。
ちなみに、デモは画像src
属性を更新するだけのようです。
必要な回転の精度によって異なります。
固定数はありません。
その特定の例では、72を使用しています。
すべての画像を取得するには、URLの最後の72部分を01から72に置き換えます。
あなたが必要とするseveral
、それはそれが得るのと同じくらい記述的です。
ただし、1つ注意してください。それらを特定の順序でロードすると、プログレッシブ効果を得ることができます。
たとえば、最初に「北」と「南」をロードします。次に「東」と「西」。次に、「北西」、「南西」、「北東」、「南東」などのように、72を超える画像を作成できますが、ユーザーは徐々にスムーズなエクスペリエンスを得るのを待つ必要はありません。
この場合、2の累乗でそれらをロードすることに注意してください。
1回目の読み込み(1枚の画像が既にある後):1枚の画像(反対)
2回目の読み込み:2枚の画像(側面)
3回目の読み込み:4枚の画像
4回目の読み込み:8枚の画像
...
8回目の読み込み:128枚の画像。
度はそれほど簡単には使用できないことに注意してください。(5で割る必要がありました。360/ 5 = 72)
特定の次数の画像を計算するには、補間を使用します。
したがって、最初に360度を2(画像)、次に4、次に8まで補間して、どの画像を選択するかを判断します。
補間の簡単な説明はここにあります。
技術的なものではなく視覚的なものから...回転の滑らかさは、必要な画像の数を確認したい要素です。オブジェクトのサイズと詳細レベルが答えに役立つ場合は、帯域幅があります。20枚の画像が最小で、40枚が適切な推奨ですが、72枚は見栄えがします。写真の場合、各画像はより多くの作業と困難を追加することを忘れないでください。
これは、画像の量を示すのに役立つグラフです。 http://www.photospherix.com/matrix.html
ここからデモをダウンロードできます。試してみてください。24は適切な数だと思いますが、作成する予定の回転ビューの数によって異なります。
http://lukedurrant.com/2011/08/apples-360-rotating-ipod-html-5-source-code-download/