社員ブログ

WebGL (three.js) を体験してみた!

2014年12月07日 日曜日

みなさんこんにちは。
最近急に寒くなってきて、毎日お鍋が食べたくなる三橋です。

今日は最近話題のWebGLという技術を使って
javaScriptで3D表現に挑戦しました。

こちらの本を参考にしております。
丁寧な解説でおすすめです。

jpeg

 

 

 

 

 

3Dに関してまったく素人な僕は
「すりーでぃー」と聞くと、MAYAというソフトなどを使って、モデリングして、
レンダリングにはかなり時間がかかって、、、、というイメージで遠い世界に感じますが、
jsで作れるいう話をきいて挑戦してみました。

 

1,WebGLとは
—————————–

「WebGL」とは簡単に言うと、
ブラウザー上で3DCGプログラミングを実現できる技術です。
(OpenGLというグラフィックAPIのweb版らしいです)

こちらのスライドがわかりやすいです。
■WebGL and Three.js
http://www.slideshare.net/yomotsu/webgl-and-threejs

しかしこのWebGLをそのままで書くとかなりやっかいで難しいのです、、
それを書きやすくしてくれたのがThree.jsです。
webGL界のjQueryみたいな感じですね!!
今回はこのThree.jsを使って記述していきます。

■Three.js公式サイト

ブラウザでこんな表現できるんだ!と驚くサンプルもたくさんあります。
http://threejs.org/ スクリーンショット 2014-12-07 0.30.55

 

 

 

 

 

 

 

 

 

1,Three.jsをつかって挑戦
—————————–

3d表現の手順は、

1、空間(シーン)の作成
2、視点と範囲(カメラ)を作成
3、表示するオブジェクトを作成
4、ライトを追加  
5、制作した3d空間を表示(レンダリング)

という順次で進んできます。

5番以外は順不同です。4番は今回は割愛します。
では、早速javaScrpit をかいていきます。

完成図はこちら

ますは下準備として
ダウンロードしたthree.jsの本体を読み込んで、
ステージを追加するdivを作成してください。

<script src="three.min.js"></script>
<div id="stage"></div>

それでは書いてきます!

1、シーン(空間)の作成

var scene = new THREE.Scene();

2、視点と範囲(カメラ)を作成

// カメラの視野角  (fov, aspect, near, far)
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
// fov	垂直方向の視野角()
// aspect 描画範囲の縦横比
// near	視点からどれだけ離れた位置から表示するか
// far	視点からどれだけ離れた位置まで表示するか

// カメラの位置設定(x, y, z)
camera.position.set(200,200,200);

3、メッシュ(物体)の作成
ジオメトリー(形状)、マテリアル(材質)を定義します。

var geometry = new THREE.SphereGeometry(); // ジオメトリー
// 引数に分割数など持たせれば、綺麗な球体にもなります
var material = new THREE.MeshNormalMaterial(); // マテリアル
sphere = new THREE.Mesh(geometry, material);
sphere.position.set(0, 0, 0); // 位置をセット
scene.add(sphere); // シーンに追加

4、表示処置(レンダラー)

var renderer = new THREE.WebGLRenderer(); //WebGLRendererをつかいます
renderer.setSize(width, height); //レンダリングするサイズをセットします
renderer.setClearColor(000000, 1); // 背景色設定します
renderer.render(scene, camera); // レンダリングします 
document.getElementById('stage').appendChild(renderer.domElement); // div#stageに追加します

球体ができました!
スフィアと呼ぶらしいです。


他にもマウスで視点を変えたり
ぐるんぐるんアニメーションさせたり色々できます!
拡張して遊んでみました。

 


jsが扱える方は挑戦できると思うので、よかったら
遊んでみてください。


読んでくれた方ありがとうございます!
それではお互い食べ過ぎに注意しましょう!
失礼致しますー。

 

 

 

文字サイズサイズ小サイズ中サイズ大