タグバンガーズでは3Dをもりもり・・・使いません。
我々が得意としている業務系アプリは3Dとは無縁で、(すくなくとも今は)派手な見た目は必要とはされません。
ただ、フラットデザインも見た目はフラットですが奥行きを意識したものであったり、3Dの知識はあっても損はしないでしょう。
three.js
three.jsはWebGL、3DCSSを簡単に取り扱うためのJavaScriptの3Dライブラリです。
かなり前から気になっていましたが触らずじまい。重い腰をあげてやっと触ってみようと思います。
公式ドキュメント
今回は変わったことはせずに公式ドキュメントの「Creating a scene」を読みながら、3Dに触れてみます。
まず、three.jsをダウンロードします・・・。お、おぅ。
three.js←これ967kBありますよ。まじか。心折れそう。minifyされても507kB。でかいw
基本の3要素
three.jsで3Dを表示するために必須の3要素があります。これがないといけません。
scene
3Dの世界そのものです。ここにいろんなオブジェクトを配置したり、光を作ってみたり!
日本、地球、宇宙なんでもいいです。世界そのものです。重要。
camera
カメラ。むかーし、むかし。スーパーマリオ64というゲームがありまして。
マリオ初の3D作品だったわけですが、そこにはジュゲム(雲に乗ってるうざい亀)がカメラマンとして登場します。
カメラマンの視点でマリオを見ている。それがゲーム画面だったわけです。
当時は気にしていませんでしたが、エンジニアの遊び心が見られる良い表現ですねぇ!いい!
話はそれましたが、視点です。3Dの世界をどこから見るのか。やはり重要。
renderer
sceneとcameraを元に3Dの世界を画面に表示するやつですね。
ピンとこない?・・・。重要。
サンプル
初めてなので公式のサンプルをそのまま実行してみましょう。
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="../../js/three.js"></script>
<script>
// 世界とカメラと描画するやつ
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 );
// 登場人物を生成:ただの緑の立方体というのは秘密
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
// シーンに登録した時点では原点 x:0、y:0、z:0に配置される
scene.add( cube );
// カメラも原点にいるのでちょっと移動
camera.position.z = 5;
// 描画処理の内容
// 立方体がぐるぐるわまるよ
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>たったこれだけで、緑の立方体がぐるぐる回ります。
目がいい人には見えるはず。これは立方体です。回ってますね。
まとめ
今回はthree.jsに初めて触って見ようということで公式の初歩の初歩を眺めてみました。
結果は真っ暗な世界に、回転している(ように見える)緑の立法体が表示されるだけでした。
しかも、のっぺりとした。
なぜでしょう。なんでこんなにのっぺりしてるのでしょう。
それは影がないからです。つまり光源がないんです。
次回は光源、テクスチャ、アニメーションもう少し発展したことをやってみたいと思います。
それではよい3Dライフを。