plunkerでthree.js

概要

plunkerでthree.jsやってみた。
練習問題やってみた。

練習問題

文字で3Dモデリングせよ。

方針

インタープリター方式でやる。
モデリング言語を設計する。

言語仕様

p 0 100 0

頂点を作る。x: 0, y: 100, z: 0

s 1 2 3 4

面を作る。頂点は1から

例cube

p 0 0 0
p 100 0 0
p 0 100 0
p 100 100 0
p 0 0 100
p 100 0 100
p 0 100 100
p 100 100 100
s 1 3 4 2
s 1 5 7 3
s 2 4 8 6
s 1 2 6 5
s 3 7 8 4
s 5 6 8 7

写真

サンプルコード

	var width = 400; 
	var height = 400;
	var scene = new THREE.Scene();
	scene.add(new THREE.AmbientLight(0xffffff));
	var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(width, height);
	var container = document.createElement('div');
	document.body.appendChild(container);
	container.appendChild(renderer.domElement);	
	camera.position.set(0, 100, 400);
	scene.background = new THREE.Color(0xeeeeee);
	scene.add(new THREE.GridHelper(400, 10));
	var controls = new THREE.OrbitControls(camera, container);
	var geometry = new THREE.Geometry();
	var norml = new THREE.Vector3(0, 0, 1);
	var html = 
	"p 0 0 0\n" +
	"p 100 0 0\n" +
	"p 0 100 0\n" +
	"p 100 100 0\n" +
	"p 0 0 100\n" +
	"p 100 0 100\n" +
	"p 0 100 100\n" +
	"p 100 100 100\n" +
	"s 1 3 4 2\n" +
	"s 1 5 7 3\n" +
	"s 2 4 8 6\n" +
	"s 1 2 6 5\n" +
	"s 3 7 8 4\n" +
	"s 5 6 8 7";
	var textArray = html.split(/\r\n|\r|\n/);
	for (var i = 0; i < textArray.length; i++)
	{
		var line = textArray[i];
		if (line.indexOf('p ') === 0)
		{
			var tmp = line.split(' ');
			geometry.vertices.push(new THREE.Vector3(tmp[1], tmp[2], tmp[3]));
		}
		else if (line.indexOf('s ') === 0)
		{
			var tmp = line.split(' ');
			geometry.faces.push(new THREE.Face3(tmp[1] - 1, tmp[2] - 1, tmp[3] - 1, [norml, norml, norml]));
			geometry.faces.push(new THREE.Face3(tmp[1] - 1, tmp[3] - 1, tmp[4] - 1, [norml, norml, norml]));
		}
	}	
	geometry.computeFaceNormals();
	geometry.computeVertexNormals();
	var materials = [
		new THREE.MeshLambertMaterial({
			color: 0xffffff
		}),
		new THREE.MeshBasicMaterial({
			color: 0x3333ff, 
			wireframe: true,
			transparent: true
		})
	];
	var mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
	mesh.position.z = -5;
	scene.add(mesh);
function tick() {
  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(tick);
}
tick();

成果物

以上。