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

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

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

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

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

1,WebGLとは

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

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

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

■Three.js公式サイト
ブラウザでこんな表現できるんだ!と驚くサンプルもたくさんあります。

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

3d表現の手順は、

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

<span style="line-height: 1.5em;">2、視点と範囲(カメラ)を作成
</span><span style="line-height: 1.5em;">3、表示するオブジェクトを作成
</span><span style="line-height: 1.5em;">4、ライトを追加
</span>5、制作した3d空間を表示(レンダリング)

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

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

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が扱える方は挑戦できると思うので、よかったら
遊んでみてください。

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

お問い合わせ

サービスに関するご相談やご質問などこちらからお問い合わせください。

03-55107260

受付時間 10:00〜17:00