Blog

Three.jsでCSS3の3D描画ができた!

前回の記事で、CSS の 3D Transform を利用したコンテンツの作成方法をご紹介しました。
しかしながら、実際やってみると、
前回ご紹介したような、立方体を回転させるという単純なものでも、
結構骨の折れる作業でした。

やりながらふと思ったのは、Three.js だったらもっと楽にできるのになぁということでした。
Three.js は WebGL をとても扱いやすくしてくれる JavaScript ライブラリです。
Three.js を使えば、立方体を回転させるという動作は、とても簡単に実装することができます。

Three.js で CSS を扱えないだろうか。。
そう思い調べてみたところ、↓こちらの記事を発見しました。

WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化

なんと、Three.js には、CSS で描画するためのプラグインが用意されているではないですか!
公式の DEMO でもこちらが使われているものがいくつかあり、
なんか、かっこいい。

WEB コンテンツに 3D の効果を使ったものが増えている現状を考えると、
これは身につけておいて損はないと思い、実際にやってみましたので、
プラグインの使い方について、ご紹介いたします。

↓作ってみた物
DEMO

方法

  1. Three.js とプラグイン(CSS3DRenderer) の読み込み
  2. HTML で 3D 化する要素の準備
  3. JavaScript で CSS3DRenderer による Three.js のコード記述

 

1. Three.js とプラグイン(CSS3DRenderer) の読み込み

Three.jsの公式サイトからファイル一式をダウンロードし、
以下2つのファイルをサイトに配置し、HTML で読み込みます。

three.js-master/build/three.min.js
three.js-master/examples/js/renderers/CSS3DRenderer.js

 

2. HTML で 3D 化する要素の準備

基本、通常の HTML の要領で要素を準備します。
1つだけポイントとして、
今回は .container という要素に Three.js でレンダリングした要素を配置しますが、
この時、直下に div 要素が挿入されることになるので、
こちらに CSS で perspective の設定をしておきます。

 

3. JavaScript で CSS3DRenderer による Three.js のコード記述

いよいよ Three.js のコードを記述していきます。
Three.js の基本的な記述方法は今回は省略いたします(知りたい方はこちら)。
ここでのポイントは 3D で配置する HTML の要素を CSS3DObject で取り込み、
CSS3DRenderer を renderer とする点です。
その他は、基本的に WebGL で描画するときと同じです。

また、CSS3DObjectとしての取り込み後は、元々あった HTML 要素は重複するので削除して下さい。

通常の Three.js の描画では、WebGL として配置するため、
HTML としては Canvas 要素のみとなり、
場合によっては SEO やアクセシビリティが弱くなるデメリットがありますが、
この方法を使えば、HTML のコンテンツとしての要素を損なうこと無く、
比較的簡単に 3D の効果を使ったコンテンツを作成することができるのではないでしょうか。

 

DEMO の JSコード全文

 

参考サイト

WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化

three.js – Javascript 3D library

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ