プレーン|HTML5|WebGL|Three.js

プレーン|HTML5|WebGL|Three.js

プレーン|WebGL|three.js(HTML5, WebGL, JavaScript, CSS3) : デモ

three.jsのダウンロード:threejs.org

1.HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Cubeオブジェクト</title>
<script src="./build/three.min.js"></script>
</head>
<style>
*{padding:0px; margin:0px}
div#canvas-frame{
	width:512px;
	height:512px;
}
</style>
<script>
	window.addEventListener("load", function()
	{
		threeStart();	//three.jsスタート関数の実行
	});
	
	function threeStart()
	{
		initThree(); //three.js 初期化
		initCamera(); //カメラ初期化
		initObject(); //オブジェクト初期化
		draw();	//描画実行
	}
	
	var renderer, //レンダーオブジェクト
	scene, //シーンオブジェクト
	canvasFrame; //描画エリアのDOM要素
	/////////
	// three.js 初期化
	/////////
	function initThree()
	{
		canvasFrame = document.getElementById("canvas-frame"); //描画エリアのDOM要素の取得
		renderer = new THREE.WebGLRenderer(); //レンダラーオブジェクトの生成
		renderer.setSize(canvasFrame.clientWidth, canvasFrame.clientHeight);
		canvasFrame.appendChild(renderer.domElement); //DOM要素にcanvas要素を追加
		renderer.setClearColorHex(0x000000, 1.0); //レンダラークリアカラーの設定、 背景色
		scene = new THREE.Scene();
	}
	////////////
	// カメラ初期化
	////////////
	var camera; //カメラオブジェクト
	function initCamera()
	{
		//45 カメラの視野角
		//camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
		camera = new THREE.PerspectiveCamera(45, canvasFrame.clientWidth / canvasFrame.clientHeight, 1, 10000);
		camera.position.set(50, 50, 200); //カメラ位置の設定、軸オブジェクトの位置座標
		camera.up.set(0,0,1); //カメラ上ベクトルの設定 一般的にはy軸方向。ここではz軸方向にしている
		camera.lookAt({x:0,y:0,z:0}); //カメラの中心位置ベクトルの設定、カメラの視野中心座標
	}
	//////////
	// オブジェクト初期化
	//////////
	var axis, //軸オブジェクト
	cube;
	function initObject()
	{
		var geometry = new THREE.PlaneGeometry(100, 100, 10, 10);
		var material = new THREE.MeshNormalMaterial();
		cube = new THREE.Mesh(geometry, material);
		scene.add(cube);
		
		axis = new THREE.AxisHelper(50); //軸オブジェクトの生成、軸オブジェクトの軸の長さ
		scene.add(axis); //軸オブジェクトのシーンへの追加
		axis.position.set(0,0,0); //軸オブジェクトの位置座標を設定、軸オブジェクトの位置座標
		
		//クォータニオンの利用宣言
		/*cube.useQuaternion = true;
		//回転軸ベクトルを宣言
		var axis2 = new THREE.Vector3(1,1,1);
		//回転軸ベクトルの規格化
		axis2.normalize();
		var angle = Math.PI/3;
		//クォータニオンオブジェクトの宣言
		var q = new THREE.Quaternion();
		//回転軸と角度からクォータニオンを計算
		q.setFromAxisAngle(axis2, angle);
		//3軸矢印オブジェクトのaraowsにクォータニオンを代入
		cube.setRotationFromQuaternion(q);*/
	}
	///////////
	// 描画
	///////////
	function draw()
	{
		renderer.clear(); //クリアカラーで初期化
		renderer.render(scene, camera); //レンダリング
	}
</script>
<body>
	<div id="canvas-frame"></div><!-- canvas要素を配置するdiv要素 -->
</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です