three.jsはじめました jsでWebGLを用いて3D作成

無断転載禁止 three.jsはじめました jsでWebGLを用いて3D作成

↑急に動くから見逃したじゃないか!!!ホントに動くのか!?

という方はどうぞ落ち着いて。
左上のResultをクリックするともう一度動きます。
free1
ちなみにprophetのロゴが表示されているエリアをダブルクリックするとキラーン☆となります。

 

three.jsを使って、3D描画に挑戦

説明が遅れましたが、three.jsで動くロゴを作ってみました。(現在の最新r77を使いました。)
プログラマーでも3D描画できるのは、何とも嬉しいかぎりですね。

Three.jsは、ウェブブラウザ上で動的3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリ及びアプリケーションプログラミングインタフェースである。
引用元:wikipedia

まあ上のソースがすべてなわけですが、3Dの概念みたいなものが理解できておらず、作るのに苦労したのでそれについて書くことにします。(少し考えれば当然のことばかりなんですけど。)

three.jsの使い方は検索すればわかりやすいサイトが沢山出てきます。(ちょっと古いのも多いですが。。)
あとそんなにわかりやすくはないですが、公式サイトのexamplesは見てるだけでスッゲーッてなるのでおすすめです。

 
3Dやってみたいけど何したらいいのさ、というと、要は現実の世界で写真とかビデオを撮るのと同じようなことをすればいいようです。
空間を作ってとなるに撮影対象となるものを作って配置して、を作っていい感じに当てて、用意したカメラで撮っていきます。

だいたいどうやってつくっているのか、ソースを読まなくても雰囲気でわかるように説明してみようと思います。

空間

まずこれから3Dを表現していく空間を用意します。
当然と言えば当然ですが、ペイントの白い2次元のキャンバスとは違って3次元の空間です。

  scene = new THREE.Scene();

ただの何もない空間です。
現実世界だと背景とかが含まれそうな気がしますが、一般的な背景(壁とか町並みとか森とか)は次の撮影対象の方に含まれます。

撮影対象

先ほど作った空間に何か作って置いてみましょう。
今回は最初に球を作り、後から円柱を追加しています。
作るのは基本的に3次元のハリボテです。形と見た目の色や質感を決めて作ります。
作った後動かしたり形を変えたりいろいろできます。

    spheres[i] = new THREE.Mesh(new THREE.IcosahedronGeometry(5, 3), new THREE.MeshPhongMaterial({
      color: color
    }));
    spheres[i].position.x = startPositions[i][0];
    spheres[i].position.y = startPositions[i][1];
    spheres[i].position.z = startPositions[i][2];
    scene.add(spheres[i]);

球を作るの部分のソースを抜き出してみました。

作り方はこのほかにもいろいろあるようで、objファイルを取り込んだりもできます。
positionは表示させる場所です。3次元なのでx,y,zの3つの値で場所が決まります。
球を動かすときはこの値を更新しています。とはいえ今回、球はスタート地点から放射状に進む動きしかしていません。
作り終わったら空間(scene)に追加してやります。

何もない空間に球を置きましたが、それだけだと撮影対象は真っ黒な物体として登場します。
光を追加してやることで、撮影対象の色や質感が見えるようになります。
いろいろな種類があるようですが、今回使ったのは下の2つです。

・環境光

  var ambient = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambient);

昼間であれば曇りの日や電気をつけていない室内でもなんとなく明るいですが、そういう光源を意識しないタイプの光です。

・無限遠平行光

  var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
  directionalLight.position.set(0, 10, 10);
  scene.add(directionalLight);

こちらは直射日光に近いですかね。
光には色や強さ、光源の位置や向きなども指定することができます。
キラーン☆の所はこれをもう1個作ってロゴの回りを斜めに一周させています。

光も作成したら空間(scene)に追加してやります。

カメラ

最終的に見ることができるのは、これまで作ってきた3次元の空間を2次元に焼き直した画像になります。
3次元の空間を切り取って2次元にするのは現実世界と同じようにカメラの役目です。
カメラを用意して作った世界を見てみましょう。

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

2種類あるようですが今回は、人間の目のように遠くのものは小さく見えるカメラを使います。
カメラには視野の広さのような値を設定していきます。
位置や向きもいろいろ動かせます。動かすときは、位置と向きをうまく調整して撮影対象をカメラ内に収めます。

背景がないのでわかりにくいですが、ぐるっと回っているのはロゴではなくカメラの方です。
直線的な動きだけではつまらなそうだったので三角関数を利用してぐるりと動かしました。
三角関数が苦手な方も多いと思いますが、基本ぐるぐる回ってるだけでバターになることも噛み付くこともないのでビビらなくても大丈夫です。
そういえばあの話しはインドの方をモデルにした話しであって、アフリカにはいないトラも出てくるのに、なんで問題になったのか?ということを聞いたことがありますね。。

それはさておき、これまで作成してきたものは空間に追加していきましたが、カメラは追加しません。

  renderer = new THREE.WebGLRenderer({ antialias: false, preserveDrawingBuffer: false,alpha: true });
  ...
  renderer.render(scene, camera);

カメラは空間と一緒にレンダラことWebGLに渡します。
後はこいつがうまくやってくれます。レンダラ(WebGL)はこの世界の物理法則のようなものです。

うまくいかない時は自分が間違っているだけです!
プログラムは作った通りにしか動いてくれないのです!!!

普通にjavascriptのエラーだったり、ライトの色が変な色だったり、作った撮影対象を空間に追加していなかったり。。

ちょっとわかりにくいかもしれませんが、だいたいこんな感じです。
今回はロゴでしたが、他のソフトで作りこんだデータや3Dスキャナから取り込んだ現実の物を自由に動かしたりしたら楽しそうですよね。これからもっと勉強していきたい分野です。

Pocket
LINEで送る