息抜きプログラミング ~ Three.js ~

  • 2015年6月15日
  • by 
息抜きプログラミング ~ Three.js ~

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

仕事の合間の息抜きです。

久しく 3D を触ってなかったので息抜きに「Three.js」に手を出してみました。

Three.js

JavaScript の 3D ライブラリです。
GitHub : https://github.com/mrdoob/three.js

ドキュメントもちゃんと用意されていてサンプルも沢山あるので気軽に使う事ができます。

WebGL については、
https://www.khronos.org/webgl/

3D で最初に表示させる物体と言えば「ティーポット」という先入観があります(ティーポット形状は3Dサンプルモデルの王道・・と言われています。)。

が、今回は、せっかくの息抜きなので、
「球体っぽいモデルを作成して描画する」
って方向でいきたいと思います。

「球体っぽいモデルを作成して描画する」

完成動画 :

用意する物 :

1. WebGLがサポートされてるブラウザ
    (環境 Mac の Google Chrome version 43)
2. <a href="https://github.com/mrdoob/three.js" target="_blank">https://github.com/mrdoob/three.js</a> から three.js

今回は three.js の README に記述されているコードをベースに作成します。

1. シーンとカメラを作成する。

[javascript] scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
[/javascript]

2. 球体っぽいモデルを構成する Vertices を作成する。

[javascript] var vertices = [];
var i, j, x, y, z, r, hRad, wRad;

for (i = 1; i < heightSegments; ++i) {
hRad = Math.PI * i / heightSegments;
y = Math.cos(hRad);
r = Math.sin(hRad);
for (j = 0; j < widthSegments; ++j) {
wRad = 2 * Math.PI * j / widthSegments;
x = r * Math.cos(wRad);
z = r * Math.sin(wRad);
vertices.push(x);
vertices.push(y);
vertices.push(z);
}
}
[/javascript]

3. 球体っぽいモデルのポリゴンを構成する Indices を作成する。

[javascript] var indices = [];
var position;

for (i = 1; i < heightSegments – 1; i += 2) {
for (j = 0; j < widthSegments – 1; ++j) {

position = (widthSegments * (i – 1)) + j;

indices.push(position);
indices.push(position + 1);
indices.push(position + widthSegments);

++position;

indices.push(position);
indices.push(position + widthSegments);
indices.push(position + widthSegments – 1);
}
position = (widthSegments * (i – 1)) + j;

indices.push(position);
indices.push(position – (widthSegments – 1));
indices.push(position + widthSegments);

position = position – (widthSegments – 1);

indices.push(position);
indices.push(position + widthSegments);
indices.push(position + widthSegments + (widthSegments – 1));
}
[/javascript]

4. 作成した Vertices と Indices から Geometry 作成する。

[javascript] var geometry = new THREE.PolyhedronGeometry(vertices, indices, radius);
[/javascript]

5. Material を作成する。

[javascript] var material = new THREE.MeshBasicMaterial({wireframe: true, vertexColors: THREE.VertexColors});
[/javascript]

6. 頂点色を乱数から設定する。

[javascript] for (i = 0; i < geometry.faces.length; ++i) {
var n = ( geometry.faces[i] instanceof THREE.Face3 ) ? 3 : 4;
for (j = 0; j < n; ++j) {
geometry.faces[i].vertexColors[j] = new THREE.Color(Math.random() % 255, Math.random() % 255, Math.random() % 255);
}
}
[/javascript]

7. Geometry と Material から Mesh を作成する。

[javascript] var mesh = new THREE.Mesh(geometry, material);
[/javascript] 大まかな流れは以上です。

細かいところは突っ込みなしでお願いします!

3D に触れるたびに学生時代にもっと線形代数の勉強を
しっかりやっとけばよかったと後悔します…

息抜きの頭の体操としてはちょうどよいので
ぜひ遊んでみてください。

[html]






[/html]

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ