Three.jsを使ってWebで3D表示（WebGL）

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

実行サンプル

マウスの左ドラッグ、右ドラッグ、中ボタンの上下で、視点回転、視点平行移動、拡大縮小ができます。

HTML,Javascriptソースコード

<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);
  	
  //物体を追加する
  	var mesh = new Array();
  	//幅,高さ,奥行き,幅の分割数,高さの分割数,奥行きの分割数 ちなみに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;>

Javascriptで3Dコンテンツ一覧へ