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

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

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

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

Three.js

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

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

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

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

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

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

完成動画 :

用意する物 :

[/crayon]

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

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

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

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

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

5. Material を作成する。

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

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

大まかな流れは以上です。

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

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

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

【週刊bitWave】(メルマガ)始めました!
登録はこちらからメールアドレスを入力してお申込みください。

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

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

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...