three.jsの準備 - ちゃっくのメモ帳

three.jsを使って何かを書こうとした時、最初に何を書けばいいか分かんなくなりそうだったからおおまかなテンプレートを残しておこうと思った。適当に入門サイトとかドットインストール見ながら作ったからかなり似てたりすると思う。

HTML

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>three.js</title>
	</head>
	<body>
		<script src="three.min.js"></script>
		<script src="OrbitControls.js"></script>
		<script src="main.js"></script>
		<script>
		window.addEventListener('DOMContentLoaded',main,false);
		</script>
	</body>
</html>

javascript(ファイル名:main.js)

var main = function(){
	var width=600;
	var height=400;
	var fov=60;
	var aspect=width/height;
	var near=1;
	var far=1000;

	//scene
	var scene = new THREE.Scene();

	//helper
	var axis = new THREE.AxisHelper(1000);
	axis.position.set(0,0,0);
	scene.add(axis);


	//camera
	var camera=new THREE.PerspectiveCamera(fov,aspect,near,far);
	camera.position.set(300,300,300);


	//立方体
	var cg=new THREE.BoxGeometry(10,10,10);
	var cm=new THREE.MeshBasicMaterial({color:0x0000ff});
	var cent = new THREE.Mesh(cg,cm);
	scene.add(cent);


	//light
	var directionalLight = new THREE.DirectionalLight(0xffffff);
	directionalLight.position.set(0,0.7,0.7);
	scene.add(directionalLight);


	//renderer on DOM
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(width,height);
	document.body.appendChild(renderer.domElement);


	//orbitcontrol
	var controls = new THREE.OrbitControls(camera,renderer.domElement);


	function render(){
		requestAnimationFrame(render);

		/*ここに動かしたい内容を書く*/

		renderer.render(scene,camera);
		controls.update();
	}
	render();
};

こんな感じでだいたい動くはず。
まあ、それぞれのオブジェクトの作り方とかそのへんは公式ドキュメントに載ってる。
気が向いたら良さそうなのをまとめたいけど気が向くかは怪しい。