Three.jsを使ってWebで3D表示(WebGL)

トップページJavascript CSS講座⇒Three.jsを使ってWebで3D表示(WebGL)

Three.jsを使ってWebで3D表示(WebGL)


HTML5ではcanvasのgetContextに"WebGL"を指定して3Dを扱えるようになりました。(canvasのgetContextに"2D"を指定した場合は2Dです。)
ですが、WebGLを自力で扱うのはかなり大変です。three.jsを使うと3Dを簡単に扱うことができます。

		<canvas id="can" style="width: 600px; height: 400px;" width="600" height="400"></canvas>
		
		<script src="./three_files/three.min.js"></script>
		<script src="./three_files/OrbitControls.js"></script>
		
		<script>
		var main = function () {
			//シーンを作成
			scene = new THREE.Scene();
			
			//カメラを作って設定
			var width  = 600;
			var height = 400;
			var fov    = 60;
			var aspect = width / height;
			var near   = 1;
			var far    = 10000;
			camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
			camera.position.set( 0, 0, 100 );
			
			//レンダラーをDOM上に設置する
			renderer = new THREE.WebGLRenderer({'canvas':document.getElementById('can')});
			renderer.setSize( width, height );
			renderer.shadowMapEnabled = true;//影可能
			
			//光源------------------------------------------------
				//環境光(すべての物体にすべての方向から与える光)これがないと光の当たらない部分は真っ黒になる
				var AmbientLight=new THREE.AmbientLight(0x666666);
				scene.add( AmbientLight );
				
				//方向光(太陽の光のようなもの)の設定と追加
				var directionalLight = new THREE.DirectionalLight( 0xaaaaaa );
				directionalLight.position.set( 0, 0.7, 0.7 );
				scene.add( directionalLight );
				
				//スポットライト
				var spot=new THREE.SpotLight(0xffffff);
				spot.position.set(0,100,0);
				spot.target.position.set(0,-100,0);
				//spot.shadowCameraVisible=true;//これをtrueにすると位置が線で表示される
				spot.castShadow=true;//影を表示可能に
				spot.shadowMapWidth = 2048;	//影をきれいにする
				spot.shadowMapHeight = 2048;	//影をきれいにする
				scene.add(spot);
				
			//物体を追加する
				//幅,高さ,奥行き,幅の分割数,高さの分割数,奥行きの分割数 ちなみにCubeGeometryはBoxGeometryのエイリアス
				var geometry = new THREE.BoxGeometry( 20, 20, 20 );
				var material = new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } );
				mesh[0] = new THREE.Mesh( geometry, material );
				mesh[0].position.set(0,0,0);
				mesh[0].castShadow=true;//影を落とす
				mesh[0].receiveShadow=true;//影が落ちる
				scene.add( mesh[0] );
				
				//半径,経度分割,緯度分割,開始経度,経度中心角,開始緯度,緯度中心角
				var geometry = new THREE.SphereGeometry( 10, 16, 16 );
				var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
				mesh[1] = new THREE.Mesh( geometry, material );
				mesh[1].position.x=-20;
				mesh[1].castShadow=true;//影を落とす
				mesh[1].receiveShadow=true;//影が落ちる
				scene.add( mesh[1] );
				
				//幅,高さ,幅分割数,高さ分割数
				var plane = new THREE.PlaneGeometry(300, 300, 10, 10);
				var material = new THREE.MeshLambertMaterial( { color: 0x666666 } );
				mesh[2] = new THREE.Mesh( plane, material );
				mesh[2].rotation.x = -1;
				mesh[2].position.set( 0, -10, 0 );
				//mesh[2].castShadow=true;//影を落とす
				mesh[2].receiveShadow=true;//影が落ちる
				scene.add( mesh[2] );
			
			var controls = new THREE.OrbitControls(camera, renderer.domElement);  
			//表示する
			renderer.render( scene, camera );
			
			//動かす
			( function renderLoop () {
				requestAnimationFrame( renderLoop );
				mesh[0].rotation.set(
					0,
					mesh[0].rotation.y + 0.01,
					mesh[0].rotation.z + 0.01
				)
				//マウスの左ドラッグ(視点の回転)、右ドラッグ(視点の平行移動)、中ボタン(上下ローラーで拡大縮小)に応答する
				controls.update();
				renderer.render( scene, camera );
			} )();
		};
		
		window.addEventListener( 'DOMContentLoaded', main, false );
		
		</script;>
			
			

three.jsを使ったサンプル
Mam's WebSite