lofttecs/README

## README
three.js を少し試してみました。

## jsdoit.css
body {
  background: #fff;
}
div#canvas-frame{
  border: none;
  cursor: pointer;
  width: 300px;
  height: 300px;
  background-color: #EEEEEE;
  max-width: 100%;
}
div#canvas-frame canvas{
  max-width: 100%;
  max-height: auto;
}

## jsdoit.html
<html>
<head>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

## jsdoit.js
var renderer;
var mouse_flg = false;
var drag_start_x = 0;
var drag_start_y = 0;
var cube_rotation_x = 0;
var cube_rotation_y = 0;
var camera_position_y = 200*Math.sin(1/12*Math.PI);
var camera_radian_x = 1/4*Math.PI;
var camera_radian_z = 1/4*Math.PI;
var camera_position_x = 200*Math.sin(camera_radian_x);
var camera_position_z = 200*Math.cos(camera_radian_z);
var zoom = 4;
var camera_lookAt_x = 0;
var camera_lookAt_y = 0;
var camera_lookAt_z = 0;
function initThree() {
	width = document.getElementById('canvas-frame').clientWidth;
	height = document.getElementById('canvas-frame').clientHeight;
	renderer = new THREE.WebGLRenderer({antialias: true});
	renderer.setSize(width, height );
	document.getElementById('canvas-frame').appendChild(renderer.domElement);
	renderer.setClearColorHex(0xcccccc, 1.0);

	document.addEventListener('mousemove', handleMouseMove, false);
	document.getElementById('canvas-frame').addEventListener('mousedown', function(event){
		mouse_flg = true;
		drag_start_x = event.clientX;
		drag_start_y = event.clientY;
		}, false);
	document.addEventListener('mouseup', function(event){mouse_flg = false; return false;}, false);

	if(window.addEventListener){
	document.getElementById('canvas-frame').addEventListener('DOMMouseScroll', function(event){event.preventDefault();camerazoom(event.detail); return false;}, false);
	}
	//IE
	if(document.attachEvent){
	    document.getElementById('canvas-frame').attachEvent('onmousewheel', function(event){camerazoom(event.wheelDelta); return false;});
	}

	//Chrome
	document.getElementById('canvas-frame').onmousewheel = function(event){camerazoom(event.wheelDelta); return false;};

	window.addEventListener('keyup', function(event){return handleKeyUp(event);}, false);

}

var camera;
function initCamera() {
	camera = new THREE.OrthographicCamera(window.innerWidth / zoom * -1, window.innerWidth / zoom, window.innerWidth / zoom, window.innerWidth / zoom * -1, - 2000, 1000 );

	camera.position.set(camera_position_x,camera_position_y,camera_position_z);
	camera.lookAt( {x:camera_lookAt_x, y:camera_lookAt_y, z:camera_lookAt_z } );
}
var scene;
function initScene() {
	scene = new THREE.Scene();
}
var light;
function initLight() {
	light = new THREE.DirectionalLight(0xffffff, 1.0);
	light.position.set( 50, 100, 200 );
	scene.add(light);
	scene.add(new THREE.AmbientLight(0x333333));

}
var cube;
var sphere;
var plane;
function initObject(){
	cube = new THREE.Mesh(
	new THREE.CubeGeometry(20,20,20),
	new THREE.MeshLambertMaterial({color: 0xff0000})
	);
	scene.add(cube);
	cube.position.set(0,0,0);
	sphere = new THREE.Mesh(
	new THREE.SphereGeometry(20,20,20),
	new THREE.MeshLambertMaterial({color: 0xffff00})
	);
	scene.add(sphere);
	sphere.position.set(0,0,0);

	plane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20),new THREE.MeshLambertMaterial({color: 0x3300ff, wireframe: true}));
	scene.add(plane);
	plane.position.set(0,50,0);

	// Grid
	var geometry = new THREE.Geometry();
	geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
	geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
	for ( var i = 0; i <= 20; i ++ ) {
		var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
		line.position.z = ( i * 50 ) - 500;
		scene.add( line );
		line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
		line.position.x = ( i * 50 ) - 500;
		line.rotation.y = 90 * Math.PI / 180;
		scene.add( line );
	}
}
var t=0;
var t_y=0;
var f=true;
var f_y=true;
function loop() {
		t++;
	var y = (1-(t/360)^2)^(1/2)*50;
	var x = t^(1/2);
  plane.rotation.set( t/500, 30/100, 0 );
  sphere.position.set(50*Math.cos(t/100) , 50*Math.sin(t/100) , 0);
  renderer.clear();
  renderer.render(scene, camera);
  window.requestAnimationFrame(loop);
}
function threeStart() {
	initThree();
	initCamera();
	initScene();
	initLight();
	initObject();
	loop();

	elm_label_c_p_x = document.createElement("label");
	elm_label_c_p_x.innerHTML = "<br />camera_position_x : ";
	elm_input_c_p_x = document.createElement("input");
	document.body.appendChild(elm_label_c_p_x);
	elm_label_c_p_x.appendChild(elm_input_c_p_x);
	elm_input_c_p_x.value = camera_position_x;
	elm_input_c_p_x.id = 'elm_input_c_p_x';

	elm_label_c_p_y = document.createElement("label");
	elm_label_c_p_y.innerHTML = "<br />camera_position_y : ";
	elm_input_c_p_y = document.createElement("input");
	document.body.appendChild(elm_label_c_p_y);
	elm_label_c_p_y.appendChild(elm_input_c_p_y);
	elm_input_c_p_y.value = camera_position_y;
	elm_input_c_p_y.id = 'elm_input_c_p_y';

	elm_label_c_p_z = document.createElement("label");
	elm_label_c_p_z.innerHTML = "<br />camera_position_z : ";
	elm_input_c_p_z = document.createElement("input");
	document.body.appendChild(elm_label_c_p_z);
	elm_label_c_p_z.appendChild(elm_input_c_p_z);
	elm_input_c_p_z.value = camera_position_z;
	elm_input_c_p_z.id = 'elm_input_c_p_z';

	elm_label_c_l_x = document.createElement("label");
	elm_label_c_l_x.innerHTML = "<br />camera_lookAt_x : ";
	elm_input_c_l_x = document.createElement("input");
	document.body.appendChild(elm_label_c_l_x);
	elm_label_c_l_x.appendChild(elm_input_c_l_x);
	elm_input_c_l_x.value = camera_lookAt_x;
	elm_input_c_l_x.id = 'elm_input_c_l_x';

	elm_label_c_l_y = document.createElement("label");
	elm_label_c_l_y.innerHTML = "<br />camera_lookAt_y : ";
	elm_input_c_l_y = document.createElement("input");
	document.body.appendChild(elm_label_c_l_y);
	elm_label_c_l_y.appendChild(elm_input_c_l_y);
	elm_input_c_l_y.value = camera_lookAt_y;
	elm_input_c_l_y.id = 'elm_input_c_l_y';

	elm_label_c_l_z = document.createElement("label");
	elm_label_c_l_z.innerHTML = "<br />camera_lookAt_z : ";
	elm_input_c_l_z = document.createElement("input");
	document.body.appendChild(elm_label_c_l_z);
	elm_label_c_l_z.appendChild(elm_input_c_l_z);
	elm_input_c_l_z.value = camera_lookAt_z;
	elm_input_c_l_z.id = 'elm_input_c_l_z';

	elm_label_zoom = document.createElement("label");
	elm_label_zoom.innerHTML = "<br />zoom : ";
	elm_input_zoom = document.createElement("input");
	document.body.appendChild(elm_label_zoom);
	elm_label_zoom.appendChild(elm_input_zoom);
	elm_input_zoom.value = zoom;
	elm_input_zoom.id = 'elm_input_zoom';

	elm_label_c_l = document.createElement("label");
	elm_label_c_l.innerHTML = "<br />camera.left : ";
	elm_input_c_l = document.createElement("input");
	document.body.appendChild(elm_label_c_l);
	elm_label_c_l.appendChild(elm_input_c_l);
	elm_input_c_l.value = camera.left;
	elm_input_c_l.id = 'elm_input_c_l';

	elm_label_c_r = document.createElement("label");
	elm_label_c_r.innerHTML = "<br />camera.right : ";
	elm_input_c_r = document.createElement("input");
	document.body.appendChild(elm_label_c_r);
	elm_label_c_r.appendChild(elm_input_c_r);
	elm_input_c_r.value = camera.right;
	elm_input_c_r.id = 'elm_input_c_r';

	elm_label_c_t = document.createElement("label");
	elm_label_c_t.innerHTML = "<br />camera.top : ";
	elm_input_c_t = document.createElement("input");
	document.body.appendChild(elm_label_c_t);
	elm_label_c_t.appendChild(elm_input_c_t);
	elm_input_c_t.value = camera.top;
	elm_input_c_t.id = 'elm_input_c_t';

	elm_label_c_b = document.createElement("label");
	elm_label_c_b.innerHTML = "<br />camera.bottom : ";
	elm_input_c_b = document.createElement("input");
	document.body.appendChild(elm_label_c_b);
	elm_label_c_b.appendChild(elm_input_c_b);
	elm_input_c_b.value = camera.bottom;
	elm_input_c_b.id = 'elm_input_c_b';

	elm_label_l_p_x = document.createElement("label");
	elm_label_l_p_x.innerHTML = "<br />light_position_x : ";
	elm_input_l_p_x = document.createElement("input");
	document.body.appendChild(elm_label_l_p_x);
	elm_label_l_p_x.appendChild(elm_input_l_p_x);
	elm_input_l_p_x.value = light.position.x;
	elm_input_l_p_x.id = "elm_input_l_p_x";

	elm_label_l_p_y = document.createElement("label");
	elm_label_l_p_y.innerHTML = "<br />light_position_y : ";
	elm_input_l_p_y = document.createElement("input");
	document.body.appendChild(elm_label_l_p_y);
	elm_label_l_p_y.appendChild(elm_input_l_p_y);
	elm_input_l_p_y.value = light.position.y;
	elm_input_l_p_y.id = "elm_input_l_p_y";

	elm_label_l_p_z = document.createElement("label");
	elm_label_l_p_z.innerHTML = "<br />light_position_z : ";
	elm_input_l_p_z = document.createElement("input");
	document.body.appendChild(elm_label_l_p_z);
	elm_label_l_p_z.appendChild(elm_input_l_p_z);
	elm_input_l_p_z.value = light.position.z;
	elm_input_l_p_z.id = "elm_input_l_p_z";


	elm_label_button = document.createElement("label");
	elm_label_button.innerHTML = "<br /><br />";
	elm_input_button = document.createElement("input");
	document.body.appendChild(elm_label_button);
	elm_label_button.appendChild(elm_input_button);
	elm_input_button.value = "set";
	elm_input_button.id = "elm_input_button";
	elm_input_button.type = "button";
	elm_input_button.onclick = function(){handleButton();};

}
function handleMouseMove(event) {
	if(mouse_flg){
		cube_rotation_x = cube_rotation_x + ( drag_start_x - event.clientX);
		cube_rotation_y = cube_rotation_y - ( drag_start_y - event.clientY);
		camera_position_y = camera_position_y - ( drag_start_y - event.clientY);
		camera_radian_x = ( drag_start_x - event.clientX)/180*Math.PI + camera_radian_x;
		camera_radian_z = ( drag_start_x - event.clientX)/180*Math.PI + camera_radian_z;
		camera_position_x = 200*Math.sin(camera_radian_x);
		camera_position_z = 200*Math.cos(camera_radian_z);
		drag_start_x = event.clientX;
		drag_start_y = event.clientY;
		 camera.position.x = camera_position_x;
		 camera.position.y = camera_position_y ;
		 camera.position.z = camera_position_z ;
		camera.lookAt( {x:camera_lookAt_x, y:camera_lookAt_y, z:camera_lookAt_z } );

		document.getElementById('elm_input_c_p_x').value = camera_position_x;
		document.getElementById('elm_input_c_p_y').value = camera_position_y;
		document.getElementById('elm_input_c_p_z').value = camera_position_z;
	}
}
function camerazoom(d) {
	if(d > 0){
		zoom = zoom + zoom / 2  ;
	}else{
		zoom = zoom - zoom / 2 ;
	}
	camera.left = window.innerWidth / zoom * -1;
	camera.right = window.innerWidth / zoom;
	camera.top = window.innerWidth / zoom;
	camera.bottom = window.innerWidth / zoom * -1;
	camera.updateProjectionMatrix();
	document.getElementById('elm_input_zoom').value = zoom;
	document.getElementById('elm_input_c_l').value = camera.left;
	document.getElementById('elm_input_c_r').value = camera.right;
	document.getElementById('elm_input_c_t').value = camera.top;
	document.getElementById('elm_input_c_b').value = camera.bottom;
}
function handleKeyUp(event) {
	event.preventDefault();
	if(event.keyCode == 38){
		camera_lookAt_y = camera_lookAt_y + 5;
	}

	if(event.keyCode == 40){
		camera_lookAt_y = camera_lookAt_y - 5;
	}

	if(event.keyCode == 37){
		camera_lookAt_x = camera_lookAt_x + 5;
	}

	if(event.keyCode == 39){
		camera_lookAt_x = camera_lookAt_x - 5;
	}

	document.getElementById('elm_input_c_l_x').value = camera_lookAt_x;
	document.getElementById('elm_input_c_l_y').value = camera_lookAt_y;

	camera.lookAt( {x:camera_lookAt_x, y:camera_lookAt_y, z:camera_lookAt_z } );
	if(event.keyCode >= 37 && event.keyCode <= 40){
		return false;
	}

}
function handleButton(d) {
	camera_position_x = document.getElementById('elm_input_c_p_x').value;
	camera_position_y = document.getElementById('elm_input_c_p_y').value;
	camera_position_z = document.getElementById('elm_input_c_p_z').value;
	camera.position.x = camera_position_x;
	camera.position.y = camera_position_y ;
	camera.position.z = camera_position_z ;
	zoom = document.getElementById('elm_input_zoom').value;
	camera.left = window.innerWidth / zoom * -1;
	camera.right = window.innerWidth / zoom;
	camera.top = window.innerWidth / zoom;
	camera.bottom = window.innerWidth / zoom * -1;
	camera.updateProjectionMatrix();

	camera_lookAt_x = document.getElementById('elm_input_c_l_x').value;
	camera_lookAt_y = document.getElementById('elm_input_c_l_y').value;
	camera_lookAt_z = document.getElementById('elm_input_c_l_z').value;

	camera.lookAt( {x:camera_lookAt_x, y:camera_lookAt_y, z:camera_lookAt_z } );

	light.position.x = document.getElementById('elm_input_l_p_x').value;
	light.position.y = document.getElementById('elm_input_l_p_y').value;
	light.position.z = document.getElementById('elm_input_l_p_z').value;

	document.getElementById('elm_input_c_p_x').value = camera_position_x;
	document.getElementById('elm_input_c_p_y').value = camera_position_y;
	document.getElementById('elm_input_c_p_z').value = camera_position_z;
	document.getElementById('elm_input_zoom').value = zoom;
	document.getElementById('elm_input_c_l').value = camera.left;
	document.getElementById('elm_input_c_r').value = camera.right;
	document.getElementById('elm_input_c_t').value = camera.top;
	document.getElementById('elm_input_c_b').value = camera.bottom;
}
	body {
	background: #fff;
	}
	div#canvas-frame{
	border: none;
	cursor: pointer;
	width: 300px;
	height: 300px;
	background-color: #EEEEEE;
	max-width: 100%;
	}
	div#canvas-frame canvas{
	max-width: 100%;
	max-height: auto;
	}
	<html>
	<head>
	</head>
	<body onload="threeStart();">
	<div id="canvas-frame"></div>
	</body>
	</html>
	var renderer;
	var mouse_flg = false;
	var drag_start_x = 0;
	var drag_start_y = 0;
	var cube_rotation_x = 0;
	var cube_rotation_y = 0;
	var camera_position_y = 200Math.sin(1/12Math.PI);
	var camera_radian_x = 1/4*Math.PI;
	var camera_radian_z = 1/4*Math.PI;
	var camera_position_x = 200*Math.sin(camera_radian_x);
	var camera_position_z = 200*Math.cos(camera_radian_z);
	var zoom = 4;
	var camera_lookAt_x = 0;
	var camera_lookAt_y = 0;
	var camera_lookAt_z = 0;
	function initThree() {
	width = document.getElementById('canvas-frame').clientWidth;
	height = document.getElementById('canvas-frame').clientHeight;
	renderer = new THREE.WebGLRenderer({antialias: true});
	renderer.setSize(width, height );
	document.getElementById('canvas-frame').appendChild(renderer.domElement);
	renderer.setClearColorHex(0xcccccc, 1.0);

	document.addEventListener('mousemove', handleMouseMove, false);
	document.getElementById('canvas-frame').addEventListener('mousedown', function(event){
	mouse_flg = true;
	drag_start_x = event.clientX;
	drag_start_y = event.clientY;
	}, false);
	document.addEventListener('mouseup', function(event){mouse_flg = false; return false;}, false);

	if(window.addEventListener){
	document.getElementById('canvas-frame').addEventListener('DOMMouseScroll', function(event){event.preventDefault();camerazoom(event.detail); return false;}, false);
	}
	//IE
	if(document.attachEvent){
	document.getElementById('canvas-frame').attachEvent('onmousewheel', function(event){camerazoom(event.wheelDelta); return false;});
	}

	//Chrome
	document.getElementById('canvas-frame').onmousewheel = function(event){camerazoom(event.wheelDelta); return false;};

	window.addEventListener('keyup', function(event){return handleKeyUp(event);}, false);

	}

	var camera;
	function initCamera() {
	camera = new THREE.OrthographicCamera(window.innerWidth / zoom * -1, window.innerWidth / zoom, window.innerWidth / zoom, window.innerWidth / zoom * -1, - 2000, 1000 );

	camera.position.set(camera_position_x,camera_position_y,camera_position_z);
	camera.lookAt( {x:camera_lookAt_x, y:camera_lookAt_y, z:camera_lookAt_z } );
	}
	var scene;
	function initScene() {
	scene = new THREE.Scene();
	}
	var light;
	function initLight() {
	light = new THREE.DirectionalLight(0xffffff, 1.0);
	light.position.set( 50, 100, 200 );
	scene.add(light);
	scene.add(new THREE.AmbientLight(0x333333));

	}
	var cube;
	var sphere;
	var plane;
	function initObject(){
	cube = new THREE.Mesh(
	new THREE.CubeGeometry(20,20,20),
	new THREE.MeshLambertMaterial({color: 0xff0000})
	);
	scene.add(cube);
	cube.position.set(0,0,0);
	sphere = new THREE.Mesh(
	new THREE.SphereGeometry(20,20,20),
	new THREE.MeshLambertMaterial({color: 0xffff00})
	);
	scene.add(sphere);
	sphere.position.set(0,0,0);

	plane = new THREE.Mesh(new THREE.PlaneGeometry(20, 20),new THREE.MeshLambertMaterial({color: 0x3300ff, wireframe: true}));
	scene.add(plane);
	plane.position.set(0,50,0);

	// Grid
	var geometry = new THREE.Geometry();
	geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
	geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
	for ( var i = 0; i <= 20; i ++ ) {
	var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
	line.position.z = ( i * 50 ) - 500;
	scene.add( line );
	line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
	line.position.x = ( i * 50 ) - 500;
	line.rotation.y = 90 * Math.PI / 180;
	scene.add( line );
	}
	}
	var t=0;
	var t_y=0;
	var f=true;
	var f_y=true;
	function loop() {
	t++;
	var y = (1-(t/360)^2)^(1/2)*50;
	var x = t^(1/2);
	plane.rotation.set( t/500, 30/100, 0 );
	sphere.position.set(50Math.cos(t/100) , 50Math.sin(t/100) , 0);
	renderer.clear();
	renderer.render(scene, camera);
	window.requestAnimationFrame(loop);
	}
	function threeStart() {
	initThree();
	initCamera();
	initScene();
	initLight();
	initObject();
	loop();

	elm_label_c_p_x = document.createElement("label");
	elm_label_c_p_x.innerHTML = "<br />camera_position_x : ";
	elm_input_c_p_x = document.createElement("input");
	document.body.appendChild(elm_label_c_p_x);
	elm_label_c_p_x.appendChild(elm_input_c_p_x);
	elm_input_c_p_x.value = camera_position_x;
	elm_input_c_p_x.id = 'elm_input_c_p_x';

	elm_label_c_p_y = document.createElement("label");
	elm_label_c_p_y.innerHTML = "<br />camera_position_y : ";
	elm_input_c_p_y = document.createElement("input");
	document.body.appendChild(elm_label_c_p_y);
	elm_label_c_p_y.appendChild(elm_input_c_p_y);
	elm_input_c_p_y.value = camera_position_y;
	elm_input_c_p_y.id = 'elm_input_c_p_y';

	elm_label_c_p_z = document.createElement("label");
	elm_label_c_p_z.innerHTML = "<br />camera_position_z : ";
	elm_input_c_p_z = document.createElement("input");
	document.body.appendChild(elm_label_c_p_z);
	elm_label_c_p_z.appendChild(elm_input_c_p_z);
	elm_input_c_p_z.value = camera_position_z;
	elm_input_c_p_z.id = 'elm_input_c_p_z';

	elm_label_c_l_x = document.createElement("label");
	elm_label_c_l_x.innerHTML = "<br />camera_lookAt_x : ";
	elm_input_c_l_x = document.createElement("input");
	document.body.appendChild(elm_label_c_l_x);
	elm_label_c_l_x.appendChild(elm_input_c_l_x);
	elm_input_c_l_x.value = camera_lookAt_x;
	elm_input_c_l_x.id = 'elm_input_c_l_x';

	elm_label_c_l_y = document.createElement("label");
	elm_label_c_l_y.innerHTML = "<br />camera_lookAt_y : ";
	elm_input_c_l_y = document.createElement("input");
	document.body.appendChild(elm_label_c_l_y);
	elm_label_c_l_y.appendChild(elm_input_c_l_y);
	elm_input_c_l_y.value = camera_lookAt_y;
	elm_input_c_l_y.id = 'elm_input_c_l_y';

	elm_label_c_l_z = document.createElement("label");
	elm_label_c_l_z.innerHTML = "<br />camera_lookAt_z : ";
	elm_input_c_l_z = document.createElement("input");
	document.body.appendChild(elm_label_c_l_z);
	elm_label_c_l_z.appendChild(elm_input_c_l_z);
	elm_input_c_l_z.value = camera_lookAt_z;
	elm_input_c_l_z.id = 'elm_input_c_l_z';

	elm_label_zoom = document.createElement("label");
	elm_label_zoom.innerHTML = "<br />zoom : ";
	elm_input_zoom = document.createElement("input");
	document.body.appendChild(elm_label_zoom);
	elm_label_zoom.appendChild(elm_input_zoom);
	elm_input_zoom.value = zoom;
	elm_input_zoom.id = 'elm_input_zoom';

	elm_label_c_l = document.createElement("label");
	elm_label_c_l.innerHTML = "<br />camera.left : ";
	elm_input_c_l = document.createElement("input");
	document.body.appendChild(elm_label_c_l);
	elm_label_c_l.appendChild(elm_input_c_l);
	elm_input_c_l.value = camera.left;
	elm_input_c_l.id = 'elm_input_c_l';

	elm_label_c_r = document.createElement("label");
	elm_label_c_r.innerHTML = "<br />camera.right : ";
	elm_input_c_r = document.createElement("input");
	document.body.appendChild(elm_label_c_r);
	elm_label_c_r.appendChild(elm_input_c_r);
	elm_input_c_r.value = camera.right;
	elm_input_c_r.id = 'elm_input_c_r';

	elm_label_c_t = document.createElement("label");
	elm_label_c_t.innerHTML = "<br />camera.top : ";
	elm_input_c_t = document.createElement("input");
	document.body.appendChild(elm_label_c_t);
	elm_label_c_t.appendChild(elm_input_c_t);
	elm_input_c_t.value = camera.top;
	elm_input_c_t.id = 'elm_input_c_t';

	elm_label_c_b = document.createElement("label");
	elm_label_c_b.innerHTML = "<br />camera.bottom : ";
	elm_input_c_b = document.createElement("input");
	document.body.appendChild(elm_label_c_b);
	elm_label_c_b.appendChild(elm_input_c_b);
	elm_input_c_b.value = camera.bottom;
	elm_input_c_b.id = 'elm_input_c_b';

	elm_label_l_p_x = document.createElement("label");
	elm_label_l_p_x.innerHTML = "<br />light_position_x : ";
	elm_input_l_p_x = document.createElement("input");
	document.body.appendChild(elm_label_l_p_x);
	elm_label_l_p_x.appendChild(elm_input_l_p_x);
	elm_input_l_p_x.value = light.position.x;
	elm_input_l_p_x.id = "elm_input_l_p_x";

	elm_label_l_p_y = document.createElement("label");
	elm_label_l_p_y.innerHTML = "<br />light_position_y : ";
	elm_input_l_p_y = document.createElement("input");
	document.body.appendChild(elm_label_l_p_y);
	elm_label_l_p_y.appendChild(elm_input_l_p_y);
	elm_input_l_p_y.value = light.position.y;
	elm_input_l_p_y.id = "elm_input_l_p_y";

	elm_label_l_p_z = document.createElement("label");
	elm_label_l_p_z.innerHTML = "<br />light_position_z : ";
	elm_input_l_p_z = document.createElement("input");
	document.body.appendChild(elm_label_l_p_z);
	elm_label_l_p_z.appendChild(elm_input_l_p_z);
	elm_input_l_p_z.value = light.position.z;
	elm_input_l_p_z.id = "elm_input_l_p_z";


	elm_label_button = document.createElement("label");
	elm_label_button.innerHTML = "<br /><br />";
	elm_input_button = document.createElement("input");
	document.body.appendChild(elm_label_button);
	elm_label_button.appendChild(elm_input_button);
	elm_input_button.value = "set";
	elm_input_button.id = "elm_input_button";
	elm_input_button.type = "button";
	elm_input_button.onclick = function(){handleButton();};

	}
	function handleMouseMove(event) {
	if(mouse_flg){
	cube_rotation_x = cube_rotation_x + ( drag_start_x - event.clientX);
	cube_rotation_y = cube_rotation_y - ( drag_start_y - event.clientY);
	camera_position_y = camera_position_y - ( drag_start_y - event.clientY);
	camera_radian_x = ( drag_start_x - event.clientX)/180*Math.PI + camera_radian_x;
	camera_radian_z = ( drag_start_x - event.clientX)/180*Math.PI + camera_radian_z;
	camera_position_x = 200*Math.sin(camera_radian_x);
	camera_position_z = 200*Math.cos(camera_radian_z);
	drag_start_x = event.clientX;
	drag_start_y = event.clientY;
	camera.position.x = camera_position_x;
	camera.position.y = camera_position_y ;
	camera.position.z = camera_position_z ;
	camera.lookAt( {x:camera_lookAt_x, y:camera_lookAt_y, z:camera_lookAt_z } );

	document.getElementById('elm_input_c_p_x').value = camera_position_x;
	document.getElementById('elm_input_c_p_y').value = camera_position_y;
	document.getElementById('elm_input_c_p_z').value = camera_position_z;
	}
	}
	function camerazoom(d) {
	if(d > 0){
	zoom = zoom + zoom / 2 ;
	}else{
	zoom = zoom - zoom / 2 ;
	}
	camera.left = window.innerWidth / zoom * -1;
	camera.right = window.innerWidth / zoom;
	camera.top = window.innerWidth / zoom;
	camera.bottom = window.innerWidth / zoom * -1;
	camera.updateProjectionMatrix();
	document.getElementById('elm_input_zoom').value = zoom;
	document.getElementById('elm_input_c_l').value = camera.left;
	document.getElementById('elm_input_c_r').value = camera.right;
	document.getElementById('elm_input_c_t').value = camera.top;
	document.getElementById('elm_input_c_b').value = camera.bottom;
	}
	function handleKeyUp(event) {
	event.preventDefault();
	if(event.keyCode == 38){
	camera_lookAt_y = camera_lookAt_y + 5;
	}

	if(event.keyCode == 40){
	camera_lookAt_y = camera_lookAt_y - 5;
	}

	if(event.keyCode == 37){
	camera_lookAt_x = camera_lookAt_x + 5;
	}

	if(event.keyCode == 39){
	camera_lookAt_x = camera_lookAt_x - 5;
	}

	document.getElementById('elm_input_c_l_x').value = camera_lookAt_x;
	document.getElementById('elm_input_c_l_y').value = camera_lookAt_y;

	camera.lookAt( {x:camera_lookAt_x, y:camera_lookAt_y, z:camera_lookAt_z } );
	if(event.keyCode >= 37 && event.keyCode <= 40){
	return false;
	}

	}
	function handleButton(d) {
	camera_position_x = document.getElementById('elm_input_c_p_x').value;
	camera_position_y = document.getElementById('elm_input_c_p_y').value;
	camera_position_z = document.getElementById('elm_input_c_p_z').value;
	camera.position.x = camera_position_x;
	camera.position.y = camera_position_y ;
	camera.position.z = camera_position_z ;
	zoom = document.getElementById('elm_input_zoom').value;
	camera.left = window.innerWidth / zoom * -1;
	camera.right = window.innerWidth / zoom;
	camera.top = window.innerWidth / zoom;
	camera.bottom = window.innerWidth / zoom * -1;
	camera.updateProjectionMatrix();

	camera_lookAt_x = document.getElementById('elm_input_c_l_x').value;
	camera_lookAt_y = document.getElementById('elm_input_c_l_y').value;
	camera_lookAt_z = document.getElementById('elm_input_c_l_z').value;

	camera.lookAt( {x:camera_lookAt_x, y:camera_lookAt_y, z:camera_lookAt_z } );

	light.position.x = document.getElementById('elm_input_l_p_x').value;
	light.position.y = document.getElementById('elm_input_l_p_y').value;
	light.position.z = document.getElementById('elm_input_l_p_z').value;

	document.getElementById('elm_input_c_p_x').value = camera_position_x;
	document.getElementById('elm_input_c_p_y').value = camera_position_y;
	document.getElementById('elm_input_c_p_z').value = camera_position_z;
	document.getElementById('elm_input_zoom').value = zoom;
	document.getElementById('elm_input_c_l').value = camera.left;
	document.getElementById('elm_input_c_r').value = camera.right;
	document.getElementById('elm_input_c_t').value = camera.top;
	document.getElementById('elm_input_c_b').value = camera.bottom;
	}