By U Zensen.

欲しいものはプログラミングで自分で作る。

【入門編】three.jsの基礎のき!!初めてでも簡単!!

2016 / 10 / 7 2016 / 10 / 30
JavaScript
161007_title

はじめに!!

どうも!JavaScript大好き!ぴーすけです!

JavaScriptでゲームを作ったり、WEBサービスを作ったりしているときに3Dを扱いたなーと思って調べてみました。

JavaScriptで3Dグラフィックを扱えるAPIでWebGLというものがあります。

そしてそのWebGLを簡単に使えるライブラリとしてthree.jsがあります。

今回はそんなthree.jsに入門してみたいと思います。

スポンサードリンク

three.jsを読み込む

three.jsファイルを公式サイトからダウンロードしてきます。以下サイトにアクセスして「download」を押せばダウンロードできます。

ダウンロードしたファイルの「build」内にある「three.min.js」をhtmlファイルに読み込みます。

以下が基礎となるhtmlになります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>three</title>
<script src="three.min.js"></script>//three.jsを読み込む
</head>
<body>
<script>
//メイン変数を作る。
//この中にthree.jsの記述する
var main = function() {
  //ここにthree.jsの記述
}
//DOMの準備ができたらメインを読み込む
window.addEventListener('DOMContentLoaded', main, false);
</script>
</body>
</html>

これから「//ここにJS(three.jsの記述)」以外は省略して記述していきます。

宣言

まずは必要な変数を定義します。

//シーンとカメラの準備
var scene  = new THREE.Scene(),//シーン
	width = 200,//横幅
	height = 100,//高さ
	fov = 60,//画角
	aspect = width / height,//縦横比
	near = 1,//ニアークリップの距離(コレより近い領域は表示されない) 
	far = 1000,//ファーークリップの距離(コレより遠い領域は表示されない)
	camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
	
//カメラは初期値では0,0,0(x,y,z)で真ん中に位置するオブジェクトを置いたときに見やすいように少し引いて
camera.position.set(0, 0, 50);

レンダリング

レンダリング用の変数を用意し、HTMLと紐付けます。

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//レンダリングする箇所
document.body.appendChild(renderer.domElement);

光源を用意

光源を作ってシーンに配置します。

var directionalLight = new THREE.DirectionalLight(0xffffff);//白
directionalLight.position.set(0, 0.7, 0.7);//光源の位置
scene.add(directionalLight);//シーンにセット

物体を用意

物体を作ってシーンに配置します。

var geometry = new THREE.CubeGeometry(10, 10, 10),//図形(四角)
material = new THREE.MeshPhongMaterial({color: 0xff0000}),//材質(赤)
mesh = new THREE.Mesh(geometry, material);//図形と材質を合わせた奴
scene.add(mesh);//シーンにセット

作ったシーンを表示

作ったシーンを実際に表示します。

renderer.render(scene, camera);//レンダラーにシーンとカメラをレンダリングさせる

まとめるとこんな感じ

まとめるとこんな感じです。Resultを見ると黒い背景に赤い四角が表示されていると思います。

See the Pen three.js入門 by p-suke (@p-suke) on CodePen.

これだと少しわかりづらいので物体を動かします

このままでは立体かどうかわかりづらいので、少し物体を動かします。

さっきの表示部を以下のように修正します。

//表示
(function renderLoop() {
	//自分で自分を呼び出すことでアニメーションしてレンダリング...を繰り返す
	requestAnimationFrame(renderLoop);
	//自転の値を少し動かす
	mesh.rotation.set(
		0,
		mesh.rotation.y + 0.01,
		mesh.rotation.x + 0.01
	)
	//レンダリング
	renderer.render(scene, camera);
})();

物体の自転のx軸とy軸を0.01ずつずらして、レンダリングを繰り返します。

See the Pen three.js入門2 by p-suke (@p-suke) on CodePen.

以上!!

以上となります!

以外と簡単にここまでできました!JavaScriptさえわかればなんとなくでできると思います。

three.jsの公式サイトを見るとめちゃくちゃ凄いサンプルがたくさんあります!ぜひ見てみてください!

今回の記事は以下のページのソースをほとんどそのままお借りしています。

これからはこの機能を使ってゲームとかWEBサービスを作っていきます!

成果はこのブログで紹介したいと思いまーす!

Pocket

コメント

コメントを残す