弊社のWEBサイトのトップページはthree.js（http://threejs.org/）という、WEBブラウザーで3D表現が行えるjavascriptのライブラリーを使用しています。
（※残念ながらインターネットエクスプローラーでは動作が安定しないため3Dではありません。）
以前はWEBブラウザー上で動きのあるWEBサイトを作る場合、Flashなどが使用されていましたが、スマートフォンでFlashがサポートされなくなったこともあり、javascriptを使うことが多くなっています。
three.jsはthree.jsのWEBサイトを見てもらうとわかるのですが、3Dでの多彩な表現事例が数多く載っています。ブラウザーでここまでできるのかと驚くばかりです。

今回サンプルとしてthree.jsで簡単なものを作成しjavascript部分を全行コメントしてみました。

あらかじめ、three.jsとマウスで動かすためのOrbitControls.jsを読み込んでおきます。

(function(){

//シーンの作成
var scene = new THREE.Scene();

//画面上にある座表軸の線の定義
var axisHelper = new THREE.AxisHelper(1000);

//座標軸の線を置く場所
axisHelper.position.set(0, 0, 0 );

//シーンに置く
scene.add( axisHelper );

//■■■■■■■■■■■■■■■■■■■　物体1　■■■■■■■■■■■■■■■■■■■
//四角いボックスを定義
var geometry = new THREE.BoxGeometry( 10, 10, 10 );

//塗る赤い色を定義
var material = new THREE.MeshLambertMaterial( {color: “red”} );

//cubeと名付けて上で定義した形と色を指定
var cube = new THREE.Mesh( geometry, material );

//影をつける
cube.castShadow = true;

//場所を指定
cube.position.set(0,10,0);

//シーンに置く
scene.add( cube );

//■■■■■■■■■■■■■■■■■■■　物体2　■■■■■■■■■■■■■■■■■■■
//丸を定義
var geometry = new THREE.SphereGeometry( 5, 32, 32 );

//塗る色を指定
var material = new THREE.MeshLambertMaterial( {color: 0x00eecf} );

//sphereと名前をつけて定義した丸い形と色を指定
var sphere = new THREE.Mesh( geometry, material );

//影をつけましたつける
sphere.castShadow = true;

//場所を指定
sphere.position.set(20,10,0);

//シーンに置く
scene.add( sphere );

//■■■■■■■■■■■■■■■■■■■　地面　■■■■■■■■■■■■■■■■■■■
//地面を作るため平面を定義
var geometry = new THREE.PlaneGeometry( 100, 100, 1 );

//色を定義
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );

//planeと名付けて定義した丸い形と色を指定
var plane = new THREE.Mesh( geometry, material );

//影をつける
plane.receiveShadow = true;

//そのままだと壁になるので90回転
plane.rotation.x=90*Math.PI /180;

//シーンに置く
scene.add( plane );

//■■■■■■■■■■■■■■■■■■■　カメラ　■■■■■■■■■■■■■■■■■■■
//カメラの横幅
var width= 1500;

//カメラの縦幅
var height = 1000;

//カメラの画角
var fov= 5;

//アスペクト比
var aspect = width / height;

//見える範囲の始め
var near = 1;

//見える範囲の終わり
var far= 1000;

//カメラの定義
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );

//カメラ位置
camera.position.set( 300, 300, 700 );

//カメラをcubeに向ける
camera.lookAt(cube.position);


//■■■■■■■■■■■■■■■■■■■　ライト　■■■■■■■■■■■■■■■■■■■
//カメラの定義
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2, 0);
//影を出す
directionalLight.castShadow = true;
//カメラ位置
directionalLight.position.set( 0, 100, 30 );
//カメラを置く
scene.add( directionalLight );

//■■■■■■■■■■■■■■■■■■■　環境光　■■■■■■■■■■■■■■■■■■■
//環境光の定義
var ambientlight = new THREE.AmbientLight( 0x404040 ); 

//環境光を置く
scene.add( ambientlight );

//■■■■■■■■■■■■■■■■■■■　レンダラー　■■■■■■■■■■■■■■■■■■■
//今回はWebGLRendererを使用
var renderer = new THREE.WebGLRenderer();

//レンダラーのサイズ
renderer.setSize(500, 500);

//レンダラーの色
renderer.setClearColor(0xffffff,1);

//影を有効にする
renderer.shadowMapEnabled　= true;

//div#stageに置く
document.getElementById(‘stage’).appendChild(renderer.domElement);

//■■■■■■■■■■■■■■■■■■■　マウスコントロール　■■■■■■■■■■■■■■■■■■■

//読み込んでるOrbitControlsを使用できるようにしてます。
var controls = new THREE.OrbitControls(camera,renderer.domElement);

//■■■■■■■■■■■■■■■■■■■　アニメーション　■■■■■■■■■■■■■■■■■■■

function render () {
//アニメーション開始

requestAnimationFrame(render);
    //cubeをサインコサインで丸く回してます。
cube.position.x += Math.sin(new Date().getTime() / 500) *1;
cube.position.z += Math.cos(new Date().getTime() / 500) *1;

//シーンとカメラをレンダラーに
renderer.render(scene,camera);
}

//実行
render();

})();