本や雑誌の「3Dアニメーション」が作れちゃう!?【3D Book Image CSS Generator】とは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「3D Book Image CSS Generator」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・3Dブックを作成したい方
・表紙画像を本にしたときのイメージを掴みたい方
・3Dモデルで遊びたい方

本にした時のイメージが見たい!

おさかな
おさかな

表紙作ったんだけど、これ本にしたらどんな感じになるのかな…?

ナビまる
ナビまる

それなら「3D Book Image CSS Generator」で確認できるよ!

おさかな
おさかな

え!そうなの〜!

PC上で「無料」で遊べる【3Dピンボールゲーム】!【OUIGO】とは?
みなさんこんにちは!おさかなです!今回は「OUIGO」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ピンボールで遊びたい方・ミニゲームをしたい方・息抜きをしたい方息抜きにゲームし...

「3D Book Image CSS Generator」って何?

3D Book Image CSS Generator」とは、(@scastiel)さんが開発した、雑誌の3Dアニメーションを作成することができるサービスのことです!(面白い!)

3D Book — Give some perspective to your book cover
Upload your cover, customize the settings you want, and embed the resulting 3D animated cover on your website.
【3Dマイルーム】を「カスタマイズ」して遊べちゃう!【My Room in 3D】とは?
みなさんこんにちは!おさかなです!今回は「My Room in 3D」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・3Dグラフィックで遊びたい方・Three.jsを使ったサービスを知りた...

実際につかってみよう!

作れるものをチェック!

それでは早速サイトにアクセスします!

少しページをスクロールすると…?
こんな感じで、3Dアニメーションの見本を見ることができます!(すごいキレイ!)

左側のウィンドウにある「Choose my cover…」をクリックすると、本の表紙にしたい画像を選択することができます。(ふむふむ…。)

こんな感じで、おさかなブックが簡単にできました!(すごい可愛い!)
画像サイズに合わせて、本の大きさも自動で変更してくれるみたいですね。

アカウントを作成しよう!

無料のアカウントを作成すると「本の厚さ」の編集や「ブログに貼り付ける」ことが出来るみたいなので、早速作成してみます!(おー!)

まずはこちらのサインアップ画面を開きましょう!

メールアドレス」「パスワード」を決めたら「Continue」ボタンを押します!(ポチッと)

3Dブックを作ろう!

アカウントの作成が完了すると「My book covers」というページが開きます!(おお!)

Create a new book」ボタンを押して、新しい本を作成してみましょう!(よいしょ!)

すると、このような設定画面が開きました!

タイトルやリンクなども設定できますが、とりあず「Book cover image」>「Choose…」から、表紙画像を選択しましょう!

(いい感じです🌼)

次に「Customize 3D setteings」を押して、本のカスタマイズを行っていきましょう!

こちらのバーを動かしたり、16進数のカラーコードを使用したりすると、本をカスタマイズすることができます!

・Rotate … 回転
・Rotate(hover) … マウスカーソルを乗せたときの回転
・Perspective … 視点
・Anim.duration …アニメーションの所要時間
・Radius … 半径
・Thickness … 厚さ
・Width … 幅 
・Height … 高さ
・Pages offset …  ページオフセット
・Background color … 背景色
・Shadow color … 影の色

カスタマイズが完了したら「Save」ボタンを押して、保存していおきましょう!

ちなみに「Embed your book cover」のところにあるコードを、サイト内に埋め込むと、サイト上に「3Dブック」を表示させることができるので、興味のある方はぜひ試してみてください〜✨

↓実際に作成したものがこちら
(マウスカーソルを乗せてみると…?)

おさかな
おさかな

3Dブックで遊んじゃおう〜!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【商用利用OK!】フリー「3Dアイコン」が見つかる!【3dicons】とは?
みなさんこんにちは!おさかなです!今回は「3dicons」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・3Dアイコンを使用したい方・商用利用OKのアイコンを探している方・無料で使える画像...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました