こんにちは！
デザイナーの伊東（@ALAKIWebVRAR1）です。
※TwitterでもWebARの事を中心に情報発信中！
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1
前回はWebVRとはどんなものなのか、触りの部分をご紹介しました。
今回は第二回ということで、WebVR開発には欠かせないthree.jsについてのお話です。
three.jsを使いこなせるようになれば、 WebVR開発のハードルはグッと低くなります。
最後までお付き合いよろしくお願いします。
three.jsとは
PCで3Dコンテンツを作成する技術にOpenGLというものがあります。このOpenGLをブラウザ上で動かすためのものが、前回の記事でも触れたWebGLと呼ばれるものです。WebGLをJavascriptで簡単に操作できるようにしたのが、今回スポットライトを当てるthree.jsです。
WebGLを扱うフレームワークは他にもあるのですが、three.jsを使うことがスタンダードになりつつあるようです。
three.jsを使う前準備
ライブラリの読み込み
まずはthree.jsをダウンロードしましょう。
下記の公式サイトからダウンロードできます。
https://threejs.org/
初期設定
先ほどダウンロードしてきたthree.jsのコアファイルを読み込みます。
もしくはCDNから読み込むのもいいかもしれません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Threejs入門</title> <style>canvas { width: 100%; height: 100% }</style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script> <script> /* ここに色々記述していきます */ </script> </body> </html> |
シーンの作成
次にシーンを作成します。
下記のコードを、three.jsを読み込んだ箇所以降の<script></script>に記述しましょう。
|
1 2 3 4 5 |
var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); |
コードを詳しくみていきます。
1行目：シーンを作っています。3D空間の作成です。
2行目：カメラの設定です。3D空間をどこから見るかを指定します。
3行目：レンダラーを作成しています。シーンやオブジェクトをレンダリングするものです。
4行目：レンダラーのサイズ指定です。表示領域の大きさをさします。
5行目：htmlのbodyに対してレンダラーを設定しています。
立方体を作ってみる
シーンの準備ができたら、いよいよオブジェクトを描画してみましょう。
|
1 2 3 4 5 |
var geometry = new THREE.CubeGeometry(1,1,1); var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5; |
このコードも1行ずつみていきましょう。
1行目：3Dオブジェクトの形と大きさを定義します。ここでは、CubeGeometry(立方体)を(1,1,1)(1cm四方)で作成しました。
2行目：3Dオブジェクトの素材と色を定義します。素材は指定せず、色を”赤”にしました。
3行目：形と大きさ、素材と色の設定をオブジェクトに反映します。
4行目：作成したオブジェクトを先ほど作ったシーンに反映します。
5行目：オブジェクトを表示する際のカメラの角度を調節しています。
ここまで記述してもまだ何も表示されません。
レンダリングする記述を追加しましょう。
|
1 2 3 4 5 |
function render() { requestAnimationFrame(render); renderer.render(scene, camera); } render(); |
ここまでのコードでとりあえずキューブをレンダリングできたと思います。
↓スマホで閲覧される際は、”Result”をタップしてください
See the Pen oqEJob by ito nao (@chokuro) on CodePen.
動かしてみる
先ほど作成したオブジェクトを動かしてみます。
|
1 2 3 4 5 6 7 8 |
tick(); function tick() { requestAnimationFrame(tick); cube.rotation.y += 0.01; cube.rotation.x += 0.01; renderer.render(scene, camera); } |
tickという関数を用意し、呼び出しています。
Y軸とX軸の回転をかける命令が、関数の中身に記述されています。
今までのコードを全て合わせるとこんな感じになります。
↓スマホで閲覧される際は、”Result”をタップしてください
See the Pen vRdbRr by ito nao (@chokuro) on CodePen.
いかがだったでしょうか。
今回はWebVR開発の基礎、3Dコンテンツの描画に欠かせないthree.jsをご紹介いたしました。
第3回以降は今回のthree.jsを応用して、実践的な内容をお届けしたいと思います。
次回もよろしくお願いします！
