コーダー目線で始めるThree.js - その１
「DOCTOR AIR 3D SUPER BLADE」が我が家にやってきて1週間、特に体重・体型共に変化が見られない kouraku です。こんにちは。 まだまだ始めたばかりなので、気長に続けていきます。
さてさて、VR元年もそろそろ終わりが近づいてきた今日この頃、ターゲットブラウザもIE11からとなりつつあり、仕事でもプライベートでもWebGLに触れる機会が増えてきました。
しかし、平面デザインのコーディングをメインに仕事をしてきたため、3Dコンテンツの制作なんてどうすればいのかさっぱり分からない・・・そんな状態の方は、きっと自分だけではないと思います。
だったら、コーダー目線で3Dコンテンツを作る方法を学んでやろう！そんな感じで記事を書くことに決めました。
専門的な方々から見ると、きっと稚拙な部分が多々出てくるとは思いますが、「フッ」っと鼻で笑って
生温かく見守ってやってください。
なお、ここでは「WebGL」や「Three.js」に関する細かい説明は省きます。
ただ、これだけは知っておかないといけないかな？という点については、Google先生の結果と被ることもあるかと思いますが、ご了承ください。
【この記事で必要な知識】
- HTML/CSS
- JavaScript
- jQuery
そもそも「WebGL」とは？
簡単に触れますと、WebGLとは3次元グラフィックスを描画するためのAPIで、JavaScriptで制御することができます。GPU（Graphics Processing Unit: 画像処理を専門に行うハードウェア）で演算処理を行うため、CPUで処理する2次元グラフィックス（Canvas2Dなど）よりも速く、精密な描画を行えます。
ただし、扱う難易度としては２次元に比べると高く、専門的な知識を持った人でないとなかなか使いこなすことが難しいものでした。そのWebGLを、比較的簡単に扱えるようにしたライブラリが「Three.js」や「Away3D」です。
実行環境も、今ではほぼほぼカバーされているので（最新ブラウザであればまず見られないことはない）、 今後は採用される機会がより多くなることは間違いでしょう。
そのほか、特徴や関連情報などについては、２年前の情報になりますが以前のバシャログ記事
『WebGLをはじめたい時の入り口サイトいろいろ』などを参考にしてください。
コーダー目線でライブラリを選ぶ
さて、WebGLによる3Dコンテンツを作るには、上記の通り「Three.js」、「Away3D」といったライブラリがありますが、ここはあくまで「コーダー目線」で始めたいので、取っ付き易さと、HTMLとCSSの知識をそのまま利用ことができるレンダラー（描画システム） 「CSS3DRenderer」 が使える「Three.js」でいきたいと思います。
では、今あるHTMLとCSSをどんな感じで利用できるのか、 ただ単純に中央に3つのコンテンツが並んでいるものに対して、Three.jsを使って3D空間に表示させるサンプルを用意しました。ホイールによるスクロールやドラッグなどで動かしてみてください。
サンプル1: HTML/CSSのみ
サンプル2: Three.jsを追加
※各コンテンツをラップしているブロックのpaddingのみコメントアウトしています。
なお、IE11はCSS3DRendererが非対応のため、正しく動作しません。
CSSを見ていただくとわかりますが、リンクやhoverのみならず、nth-childの設定なんかもしっかりと効いていることが分かります。なんだか、不思議な感じです。
まとめ
コンテンツの高さなども考慮しないといけませんが、これだけでも色々な用途に使えそうですよね。
ということで次回より、まずはこのサンプルを目標に、コーダー目線でThree.jsを学んでいきたいと思います。
