3DCGアニメーションを作成する【Apple風のかっこいいサイト作り Part2】

こんにちは。洋梨🍐です。前回「スクロールごとに背景が動くWebページを作る【Apple風のかっこいいサイト作り Part1】」の続きです。

今回は、「3DCGアニメションの作り方」についてです。

前回紹介した

これに使う3DCGを作成した工程の解説になります。

なお、Blender(無料のくせに鬼機能あるからね!)を使用します。

モデルを用意する

モデルデータ

まず3Dモデルを用意します。

スマートフォンは比較的簡単にモデリングできるので、モデルを探すのではなく作るのも普通にありだと思います。

自分が用意したのは「Xperia X」の3Dモデルです。

Xperia Xはデザイン、コスパと色々な面からめちゃくちゃ好き☻

こちら以前私が簡単に作ったものになります。

※もしこのモデル使いたい方はこちらから ダウンロード できます。(stlでの配布です _ _)

マテリアル

オブジェクトにマテリアルを設定していきます。

なお、紹介するのは「Cyclesレンダー」です。「Blenderレンダー」ではありません。

Cyclesのほうがいい感じになる気がします。

部分ごとマテリアルを割り当てていきます。

その後、ノードを使ったりしてマテリアルの設定をしていきます。

埋め込むスクリーンショットの画像

埋め込む用の画像を用意し、ノードで組み込みます。

このように放射を挟むことによってディスプレイの明るさを持つことができます。

レンダリングする

アニメーションをつける

キーフレームを用いてアニメーションを付けます。

光源を用意する

スマートフォンなのでやはり反射する部分は欲しいところ。

なので光源を上下に用意し、回転中に端が反射するようにします。

これで動画or連番画像として出力すれば完成です。

GIFなので画質が悪いのはご愛嬌♡

さて、今回はここまでです。

今回は簡単なものだったので、次回はもうちょっと凝ったものを作ろうかななんて思います。


前:スクロールごとに背景が動くWebページを作る

次:(-q-)


ここまで読んでくれてありがとうございました!!

ホームページでは他にも

・様々な記事や作った作品および過程
・ソースコード、素材ファイル
・あらゆる”モノ”の作り方

などなど随時、記事や作品を新規公開・更新していますので是非見ていってくださいね!見ていただけると本当に嬉しいです!