BLOG
ブログ

2016.07.25

クリエイティブ・ラボ vol.13 three.jsで行う3D表現

弊社の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();

})();
CONTACT

下記のフォームに必要事項を記入してください。※お問い合わせの際には個人情報保護方針のご確認をお願い致します。

会社名
お名前必須
ご住所
郵便番号
都道府県
市区町村
町名番地等
建物名
お電話番号必須
- -
メールアドレス必須
お問い合わせ内容必須
メッセージ