JavaScriptで3D画像処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、3D画像処理をJavaScriptで実装します。3Dといいつつ、2D画像をCSSを使って3Dっぽく見せる感じのアプリケーションですね^^

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

JavaScriptの実装

3Dっぽく見せる処理はCSSがほぼやってくれるので、JavaScriptではboxクラスが付与されているHTML要素に「big」クラスを付け替えする処理と画像の配置処理を実装します。

要素を取得する

最初に、画面操作に必要な要素を取得します。

bigクラスの付け替え

clickイベントを登録します。これは、Magicボタンが押下された時に発火するイベントです。

classList.toggleで、bigクラスの付け替えをしています。

画像の配置

demoでは、画像(正しくは動画)が16個のブロックに別れて表示されていますが、実は、これらはもともと一つの画像だったのです。

cssのbackgroundPositionを設定すると、16個の画像の位置を個別に設定できるので、これで上手く調整すれば分割しているように見せることができます。

これで完成です。

おわりに

一つの画像を分割して表示したいという要望は、現場でもよくありますね。私が昔所属したチームでもそのようなことがありました。

その時はCSSの担当者が対応したので、どうやったのかな?と疑問を持つつスルーしてきましたが、その答えを知れてよかったです^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す