plunkerでthree.js その2

概要

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

練習問題

モデリング言語をパースして描画するsandboxを作れ。

写真

サンプルコード

function run() {
	var code = document.getElementById("code");
	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 textArray = code.value.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[4] - 1, tmp[3] - 1, tmp[2] - 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();
}

成果物

以上。