2017-01-15 8 views
0

私は学校のプロジェクトに取り組んでおり、私たちはAフレームフレームワークを使ってインタラクティブなストーリーを開発しています。アイデアはあなたの古い家を訪問し、良い昔の思い出を持つことです。だから私たちは空のエンティティで360°の画像を使用しており、現在と過去の間でそれらの画像を切り替えています。Aフレーム空のエンティティでCSSマスクの切り替えを使用

私の考えはここにCSSマスクの移行に似た何かを得ることであろう...画像を切り替えたときに、私は移行に取り組んでいるが、私は開発することができます唯一の良い遷移が黒に簡単なフェードです:https://tympanus.net/Tutorials/CSSMaskTransition/

同様の結果を得ることは、いかなる方法で可能ですか? そうでない場合は、私ができる良いと簡単な移行の考えがありますか?

私はWeb開発に慣れていないので、この経験を終えるのに3日しかないし、A-Frameフレームワークも全く新しいです(私は3日間今だけ)。

ありがとうございました。お時間をいただきありがとうございます。

Augustin。

+0

これに似た遷移が実装にはかなり関係していますが、数日のスパンではあまりグラフィックスの経験はありません。ほとんどの場合、各ピクセルのアルファ値を変更する独自のシェーダを記述する必要があります。または、アルファマップGIFまたはビデオを作成し、それを使用してテクスチャのアルファ値を制御することもできます。 – ngokevin

+0

それは私が悲しそうに考えていたことです...私は5つの空を重ねて使用しているため、単純なフェードから黒への移行に問題があります。私は、ビデオ(大きすぎる)やgif(品質があまりにも悪い)を使う代わりに、CSSを使って特定の空の不透明度を変更することでシンプルなアニメーションを得ることをやっています。空にアニメーションの例がありますか? – Augustin

答えて

1

これに似たような移行が実装にはかなり関わっていますが、数日間のグラフィック体験では可能ではないと私は考えています。ほとんどの場合、各ピクセルのアルファ値を変更する独自のシェーダを記述する必要があります。または、アルファマップGIFまたはビデオを作成し、それを使用してテクスチャのアルファ値を制御することもできます。

Aフレームには、360画像間で遷移する例があります。パフォーマンスを向上させるために、1つの画像があり、黒にフェードアウトし、画像をスワップアウトしてフェードアウトします。https://github.com/aframevr/360-image-gallery-boilerplate

関連する問題