Three.js入門

提供: socialakiba wiki
移動: 案内検索

three.js は webGL を使って、html + css + javascript だけで 3Dモデルを描画したり動かしたりするもの。

maya や 3dsmax から three.js (JSON、javascriptのデータ) 形式で書き出すこともできるが、 実質的にサポートされているのは blender だけだと言って良い。

Three.js 形式でエクスポート

Hiyoko.blend0.png

ファイル→エクスポート→Three.js (.js)

Hiyoko.blend.png

(アニメーションを書き出さない場合)すべてデフォルト設定で書き出せばよいはず。

書き出した .js ファイルは JSON という javascript 形式で書かれている。 テキストエディタで確認して、以下のようになっていればOK。

<nowiki>
{

	"metadata" :
	{
		"formatVersion" : 3.1,
		"generatedBy"   : "Blender 2.7 Exporter",
		"vertices"      : 105,
		"faces"         : 104,
		"normals"       : 105,
		"colors"        : 0,
		"uvs"           : [102],
		"materials"     : 1,
		"morphTargets"  : 0,
		"bones"         : 0
	},

	"scale" : 1.000000,

	"materials" : [	{
		"DbgColor" : 15658734,
		"DbgIndex" : 0,
		"DbgName" : "Material",
		"blending" : "NormalBlending",
		"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
		"colorEmissive" : [0.0, 0.0, 0.0],
		"colorSpecular" : [0.5, 0.5, 0.5],
		"depthTest" : true,
		"depthWrite" : true,
		"mapDiffuse" : "hiyoko.png",
		"mapDiffuseWrap" : ["repeat", "repeat"],
		"shading" : "Lambert",
		"specularCoef" : 50,
		"transparency" : 1.0,
		"transparent" : false,
		"vertexColors" : false
	}],

	"vertices" : [・・・],

	"morphTargets" : [],

	"normals" : [・・・],

	"colors" : [],

	"uvs" : [[・・・]],

	"faces" : [・・・],

	"bones" : [],

	"skinIndices" : [],

	"skinWeights" : [],

  "animations" : []


}
</nowki>

vertices (頂点)、normals (法線)、uvs (UV展開のデータ)、faces (面のデータ) に数値が入っている。

animations (アニメーション)などは空。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/threejs/r67/three.min.js"></script>
<script src="OrbitControls.js"></script>
<style>
#canvas {
	width: 600px;
	height: 400px;
}
</style>
<script>
var scene, camera, controls, renderer, mesh;

var init = function() {
	var canvas = document.getElementById('canvas');// 描画要素
	var width = canvas.clientWidth;
	var height = canvas.clientHeight;
    
	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(15,  width / height, 1, 10000);
	// 視野角度 fov、アスペクト比 x/y、クリッピング手前、クリッピング奥
	camera.position.z = 2000;// カメラの位置
    
	controls = new THREE.OrbitControls(camera);// カメラの操作
	controls.target = new THREE.Vector3(0, 0, 0);

	scene.add(new THREE.AmbientLight(0xffffff));// 環境光
	var directionalLight = new THREE.DirectionalLight(0xaaaaaa, 3);// 平行光
	directionalLight.position.set(0, 3, 1);// 光源の位置
	scene.add(directionalLight);

	var loader = new THREE.JSONLoader();// モデルの読み込み
	loader.load( 'hiyoko.js', function(geometry, materials){
		var faceMaterial = new THREE.MeshFaceMaterial(materials);
		mesh = new THREE.Mesh(geometry, faceMaterial);
		mesh.position.set(0, 0, 0);
		mesh.scale.set(100, 100, 100);
		scene.add(mesh);
	});

	renderer = new THREE.WebGLRenderer();
	renderer.setClearColor('#777777', 1);// 背景色
	renderer.setSize(width, height);// 描画領域の大きさ
	canvas.appendChild(renderer.domElement);
}

var animate = function() {
	requestAnimationFrame(animate);
	mesh.rotation.y += 0.01;
	renderer.render(scene, camera);
}
</script>
</head>
<body>
<div id="canvas"></div>
<script>
init();
animate();
</script>
</body>
</html>

ひよこを三つに増やしてみる

hiyoko3.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/threejs/r67/three.min.js"></script>
<script src="OrbitControls.js"></script>
<style>
#canvas {
	width: 600px;
	height: 400px;
}
</style>
<script>
var scene, camera, controls, renderer, mesh, mesh2, mesh3;

var init = function() {
	var canvas = document.getElementById('canvas');// 描画要素
	var width = canvas.clientWidth;
	var height = canvas.clientHeight;
    
	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(15,  width / height, 1, 10000);
	// 視野角度 fov、アスペクト比 x/y、クリッピング手前、クリッピング奥
	camera.position.z = 2000;// カメラの位置
    
	controls = new THREE.OrbitControls(camera);// カメラの操作
	controls.target = new THREE.Vector3(0, 0, 0);

	scene.add(new THREE.AmbientLight(0xffffff));// 環境光
	var directionalLight = new THREE.DirectionalLight(0xaaaaaa, 3);// 平行光
	directionalLight.position.set(0, 3, 1);// 光源の位置
	scene.add(directionalLight);

	var loader = new THREE.JSONLoader();// モデルの読み込み
	loader.load( 'hiyoko.js', function(geometry, materials){
		var faceMaterial = new THREE.MeshFaceMaterial(materials);
		mesh = new THREE.Mesh(geometry, faceMaterial);
		mesh.position.set(0, 0, 0);
		mesh.scale.set(50, 50, 50);
		scene.add(mesh);
		
		mesh2 = mesh.clone();
		mesh2.position.set(200, 0, 0);
		scene.add(mesh2);
		
		mesh3 = mesh.clone();
		mesh3.position.set(-200, 0, 0);
		scene.add(mesh3);
	});

	renderer = new THREE.WebGLRenderer();
	renderer.setClearColor('#777777', 1);// 背景色
	renderer.setSize(width, height);// 描画領域の大きさ
	canvas.appendChild(renderer.domElement);
}

var animate = function() {
	requestAnimationFrame(animate);
	mesh.rotation.y += 0.01;
	mesh2.rotation.y += 0.02;
	mesh3.rotation.y += 0.03;
	renderer.render(scene, camera);
}
</script>
</head>
<body>
<div id="canvas"></div>
<script>
init();
animate();
</script>
</body>
</html>
  loader.load( 'hiyoko.js', function(geometry, materials){

の hiyoko.js のところだけを自分がエクスポートしたファイル名に書き換える。

OrbitControls.js を落としてくる。

xxxxx.html と xxxxx.js と xxxxx.png と OrbitControls.js を同じフォルダにおいて、 xxxxx.html を firefox で開く。

※ chrome では動きません。

※ OrbitControls.js がないと動きません。

(参考)キャラを三つに

hiyoko_kuma_bus.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/threejs/r67/three.min.js"></script>
<script src="OrbitControls.js"></script>
<style>
#canvas {/* 描画範囲の大きさ */
	width: 600px;
	height: 400px;
}
</style>
<script>
var scene, camera, controls, renderer, mesh, mesh2, mesh3;

var init = function() {
	var canvas = document.getElementById('canvas');// 描画要素
	var width = canvas.clientWidth;
	var height = canvas.clientHeight;
    
	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(15,  width / height, 1, 10000);
	// 視野角度 fov、アスペクト比 x/y、クリッピング手前、クリッピング奥
	camera.position.z = 2000;// カメラの位置
    
	controls = new THREE.OrbitControls(camera);// カメラの操作
	controls.target = new THREE.Vector3(0, 0, 0);

	scene.add(new THREE.AmbientLight(0xffffff));// 環境光
	var directionalLight = new THREE.DirectionalLight(0xaaaaaa, 3);// 平行光
	directionalLight.position.set(0, 3, 1);// 光源の位置
	scene.add(directionalLight);

	var loader = new THREE.JSONLoader();// モデルの読み込み

	loader.load( 'hiyoko.js', function(geometry, materials){// モデルその1 ファイル名を変える
		var faceMaterial = new THREE.MeshFaceMaterial(materials);
		mesh = new THREE.Mesh(geometry, faceMaterial);
		mesh.position.set(-200, 0, 0);// 位置
		mesh.scale.set(20, 20, 20);// 大きさ
		scene.add(mesh);
	});
	loader.load( 'neko003.js', function(geometry, materials){// モデルその2 ファイル名を変える
		var faceMaterial2 = new THREE.MeshFaceMaterial(materials);
		mesh2 = new THREE.Mesh(geometry, faceMaterial2);
		mesh2.position.set(200, 0, 0);// 位置
		mesh2.scale.set(100, 100, 100);// 大きさ
		scene.add(mesh2);
	});

	loader.load( 'kanachu_bus.js', function(geometry, materials){// モデルその3 ファイル名を変える
		var faceMaterial3 = new THREE.MeshFaceMaterial(materials);
		mesh3 = new THREE.Mesh(geometry, faceMaterial3);
		mesh3.position.set(0, 0, -2000);// 位置
		mesh3.scale.set(50, 50, 50);// 大きさ
		mesh3.rotation.y = - Math.PI / 2;// 向き(90度回転)
		scene.add(mesh3);
	});

	renderer = new THREE.WebGLRenderer();
	renderer.setClearColor('#777777', 1);// 背景色
	renderer.setSize(width, height);// 描画領域の大きさ
	canvas.appendChild(renderer.domElement);
}

var animate = function() {
	requestAnimationFrame(animate);
	mesh.rotation.y += 0.01;// モデル1を回転
	mesh2.rotation.y += 0.02;// モデル2を回転
	mesh3.position.z += 10;// モデル3を移動
	if(mesh3.position.z > 2000){
		mesh3.position.z = -2000;
	}
	renderer.render(scene, camera);
}
</script>
</head>
<body>
<div id="canvas"></div>
<script>
init();
animate();
</script>
</body>
</html>