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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

3D画像処理スタイリングしよう!

ページ(HTML)の作成

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>3D Boxes Background</title>
  </head>
  <body>
    <button id="btn" class="magic">Magic 🎩</button>
    <div id="boxes" class="boxes big"></div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"

integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="

crossorigin="anonymous"

<title>3D Boxes Background</title>

</head>

<body>

<button id="btn" class="magic">Magic 🎩</button>

</body>

</html>

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

スタイル(CSS)を装飾

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.magic {
  background-color: #f9ca24;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  border: 0;
  border-radius: 3px;
  font-size: 16px;
  padding: 12px 20px;
  cursor: pointer;
  position: fixed;
  top: 20px;
  letter-spacing: 1px;
  box-shadow: 0 3px rgba(249, 202, 36, 0.5);
  z-index: 100;
}

.magic:focus {
  outline: none;
}

.magic:active {
  box-shadow: none;
  transform: translateY(2px);
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 500px;
  width: 500px;
  position: relative;
  transition: 0.4s ease;
}

.boxes.big {
  width: 600px;
  height: 600px;
}

.boxes.big .box {
  transform: rotateZ(360deg);
}

.box {
  background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
  background-repeat: no-repeat;
  background-size: 500px 500px;
  position: relative;
  height: 125px;
  width: 125px;
  transition: 0.4s ease;
}

.box::after {
  content: '';
  background-color: #f6e58d;
  position: absolute;
  top: 8px;
  right: -15px;
  height: 100%;
  width: 15px;
  transform: skewY(45deg);
}

.box::before {
  content: '';
  background-color: #f9ca24;
  position: absolute;
  bottom: -15px;
  left: 8px;
  height: 15px;
  width: 100%;
  transform: skewX(45deg);
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #fafafa;

font-family: 'Roboto', sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

}

.magic {

background-color: #f9ca24;

color: #fff;

font-family: 'Poppins', sans-serif;

border: 0;

border-radius: 3px;

font-size: 16px;

padding: 12px 20px;

cursor: pointer;

position: fixed;

top: 20px;

letter-spacing: 1px;

box-shadow: 0 3px rgba(249, 202, 36, 0.5);

z-index: 100;

}

.magic:focus {

outline: none;

}

.magic:active {

box-shadow: none;

transform: translateY(2px);

}

.boxes {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

height: 500px;

width: 500px;

position: relative;

transition: 0.4s ease;

}

.boxes.big {

width: 600px;

height: 600px;

}

.boxes.big .box {

transform: rotateZ(360deg);

}

.box {

background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');

background-repeat: no-repeat;

background-size: 500px 500px;

position: relative;

height: 125px;

width: 125px;

transition: 0.4s ease;

}

.box::after {

content: '';

background-color: #f6e58d;

position: absolute;

top: 8px;

right: -15px;

height: 100%;

width: 15px;

transform: skewY(45deg);

}

.box::before {

content: '';

background-color: #f9ca24;

position: absolute;

bottom: -15px;

left: 8px;

height: 15px;

width: 100%;

transform: skewX(45deg);

}

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

JavaScriptの実装

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

要素を取得する

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

// 要素取得
const boxesContainer = document.getElementById('boxes')
const btn = document.getElementById('btn')

// 要素取得

const boxesContainer = document.getElementById('boxes')

const btn = document.getElementById('btn')

bigクラスの付け替え

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

// クリックイベントの登録
btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))

1 2	// クリックイベントの登録 btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))

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

画像の配置

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

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

// ボックスを作成
function createBoxes() {
  // 縦
  for (let i = 0; i < 4; i++) {
    // 横
    for (let j = 0; j < 4; j++) {
      // div要素作成
      const box = document.createElement('div')
      // boxクラス付与
      box.classList.add('box')
      // 画像位置の調整(一つのボックスの大きさは125*125)
      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
      // 要素を追加
      boxesContainer.appendChild(box)
    }
  }
}

createBoxes()

// ボックスを作成

function createBoxes() {

// 縦

for (let i = 0; i < 4; i++) {

// 横

for (let j = 0; j < 4; j++) {

// div要素作成

const box = document.createElement('div')

// boxクラス付与

box.classList.add('box')

// 画像位置の調整(一つのボックスの大きさは125*125)

box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`

// 要素を追加

boxesContainer.appendChild(box)

}

createBoxes()

これで完成です。

おわりに

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

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

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素取得
const boxesContainer = document.getElementById('boxes')
const btn = document.getElementById('btn')

// クリックイベントの登録
btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))

// ボックスを作成
function createBoxes() {
  // 縦
  for (let i = 0; i < 4; i++) {
    // 横
    for (let j = 0; j < 4; j++) {
      // div要素作成
      const box = document.createElement('div')
      // boxクラス付与
      box.classList.add('box')
      // 画像位置の調整
      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
      // 要素を追加
      boxesContainer.appendChild(box)
    }
  }
}

createBoxes()

// 要素取得

const boxesContainer = document.getElementById('boxes')

const btn = document.getElementById('btn')

// クリックイベントの登録

btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))

// ボックスを作成

function createBoxes() {

// 縦

for (let i = 0; i < 4; i++) {

// 横

for (let j = 0; j < 4; j++) {

// div要素作成

const box = document.createElement('div')

// boxクラス付与

box.classList.add('box')

// 画像位置の調整

box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`

// 要素を追加

boxesContainer.appendChild(box)

}

createBoxes()

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

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

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

bigクラスの付け替え

画像の配置

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

bigクラスの付け替え

画像の配置

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

CSSでクイズアプリケーションをスタイリングしよう!

[初学者向け]Helmを学ぼう!~Templateを深く深く知ろう2~

Go言語とVue.jsで作るユーザー認証アプリ~フロントエンド開発編Vol1…

[Golang]アルゴリズムにチャレンジ ~Channelでワーカープールを…

[React]~Admin画面: React環境構築~

[golang]アプリ開発~デジタル時計を作ろう!~

Kubernetes(k8s)を学ぼう! Microservices編~アプ…

cssでスクロールアニメーションをスタイリングしよう！

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル