イントロダクション-シーンの作成-
ここでは、簡単なイントロについて話すよ。
まず、回転する球を作ることで、シーンのセットアップをしていくね。
コード例に関しては、一番下に載ってるんで何か迷ったら是非活用してくださいね。
まずthree.jsって何？
簡単にお話しましょう。
three.jsは、webGL(ブラウザ上で3Dで動かすツール)を簡単に動かすためのツールです。
webGLだと結構ごちゃごちゃしてることが、three.jsだと、そのごちゃごちゃの中のほんの少しで済むよ。
始める前に
three.jsを始める前にthree.jsを表示するための何かしらが必要だよね。
まず下に書いてあるHTMLファイルをsaveして、three.min.jsと同じところに置いてみようか。
そして、ファイルを開いてみてよ。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
<style> body { margin: 0; } canvas { width: 100%; height: 100% } </style>
</head>
<body>
<script src="js/three.min.js"></script>
<script> // Our Javascript will go here. </script>
</body>
</html>
これで、全部だね。
three.jsの全てのコードは、<script>の中に書いてね。
シーンの作成
実際に、全てのことを、three.jsで表示するためには、3つのことが必要なのですよ。
それは、
scean camera そして renderer
なんだよね。
だから、カメラと一緒にシーンをレンダリングするよ。
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 );
ちょっとここで、ここで一体何が起こってるのかについて説明しようか。
今シーンと、カメラ、そしてレンダラーのセットアップをしたよね。
three.jsの中には、いくつかの異なるカメラがあるんだよ。
ここでは、PerspectiveCameraを使おうか。
初めの特性は、視覚的な広さについてだよ。
二つ目の特性は、比率について。
君は、いつも高さによって、分割された素材の広さを使いたいって言うよね。
そうしないと、広いスクリーンのTVで、古い映画を見る時と、同じような結果が得られるよ。上下をぐしゃっとつぶされたような感じだね。
次の二つの特性は、近く、そして遠い切り抜き平面のことだよ。
どういう意味かって言うと、近くなることや遠くなることの値において、レンダラーになり得ないカメラよりも、物体が遠くなることをいうよ。
今の時点でこのことに対して心配する必要はないよ。
でも、もっといいアプリケーションを作ろうとするなら、この特性は重要なものになるだろうね。
次は、レンダラーについてだ。
ここでは、魔法が起こるんだ。
ここで使うwebGLのレンダラーに加えて、Three.jsは、他の何かと共に来るんだ。
よく使われるのは、別のwebGLに対応していないようなブラウザを使う人のためのに何かを表示するために使われるよ。
レンダラーのインスタンスを作ることに加えて、自分たちのアプリケーションを、レンダリングするためだったり、
サイズのセットをする必要があるよ。
自分たちのアプリケーションを表示させたい部分にwidthと、heightを使うのは最適な方法だね。
いい状態でアプリケーションを動かすためには、window.Width/2と、window.innerHeight/2のようなもの
を使うのがいいと思うよ。アプリケーションを半分のサイズで動かせるんだ。
もし、アプリケーションのサイズを維持したい。でも、より小さい結果で動くんなら、updateStyleを呼び出し
て、それをfalseにするといいよ。
例えば、
setSize(window.innerWidth/2, window.innerHeight/2, false)
ってするんだ。
そうすれば、レンダリングのサイズは、半分の解で、しかも<canvas>は、100%の、高さと、幅を維持
できるようになるよ。
最後にはなっちゃったけど、HTMLファイルにrendererドキュメントを追加しよう。
これは、あくまでも<canvas>自分たちに、シーンをよりよく見せるための要素なんだ。
"That's all good, but where's that cube you promised?”
それじゃあ加えてみよう！
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); camera.position.z = 5;
cubeを作るために必要なのは、BoxGeometryが必要ってことなんだ。
このBoxGeometoryってのは、verticesの全てのポイントと、球のfacesを含めているんだ。
将来的に、こういうところについてもより詳しく説明していくよ。
geometoryに加えて、自分たちは、色をつけるために、materialが必要になるんだ。
Three.jsは、いくつかのmaterialsからなるよ。だけど、ここでは、MeshBasicMaterialについてだけ説明するよ。
全てのmaterialsは、物体の特性に関してのみ与えるんだ。
シンプルにし続けるために、自分たちは、色に関しては、0x00ff00のみを扱うことにするよ。
これは、greeenだね。この働きは、cssやphotoshopでもできるよね。
3つ目に、自分たちは、mesh要素が必要になってくるんだ。
meshは、geometoryや、materialsの要素を含んだそのものになってるよ。
つまり、自分たちの作ったものを実際に扱えたりするようになるってこと！
scean.add()を呼ぶ時は、位置的には、(0,0,0)で呼び出すことになるんだ。このことが
意味するのは、カメラと、球がお互いの内側にあるってことなんだ。これを避けるために、
カメラを少しだけ、外側に置くよ。
シーンのレンダリング
初めの段階で作っていたHTMLの上の上の部分に書いてくれれば。きっと何も見えなくなるよ。
なぜなら、実際に何もレンダリングできていないからね。
renderererのleepが必要になって来るんだ。
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
これは、シーンを1秒間に60回描けるような、レンダラーを作り出しているんだ。
もしブラウザでゲームを作るのが初めてなら、たぶん
setintervalは使わないのかよ！
って思うかもね。そんなことは自分たちには、できないんだ。
でも、requestAnimationFrameは、いくつかのアドバンテージを持っているんだ。
もしかしたら一番の利点は、ユーザーが、対応してないブラウザで見た時に、止まることかもしれない。そのおかげで、バッテリーとかも無駄に失われないしね！
球をアニメーションさせてみよう！
自分たちが、始める前にファイルに、上の全てのコードを書き込んだのなら、
きっと緑色の箱が見えるはずだよ。
一緒に、もっと面白くさせるために回転させてみようよ！
レンダラー関数の中に、下のコードを入れ込んでみて。
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
これが、1秒間に60回動くようになってるよ。
そして、いい感じに動き出したね。
基本的にアプリが動いている間に、動かしたり、変えたりしたいものは、レンダラーのループをし続ける必要があるよ。
もちろんここから他の関数を呼び出すことも可能だし、つまり、まだレンダラーfunctionは始まったばかりだよ！
結果
おつかれさま！！
たった今、君の初めてのアプリケーションが完成したよ。それはシンプルだし、どこかで、始めなきゃね。
全部のコードは下に記しておくよ。どのようにして動くのかをより理解するために、mおっと活用してみてね。
<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.min.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 );
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>
