three.jsで3Dロゴジェネレータ作ってみた

# 3D Logo Generator

動くものはこちらです。
http://ohbarye.github.io/3D-logo-generator/

コードはGitHub参照。
https://github.com/ohbarye/3D-logo-generator

## 概要
ブラウザで入力された文字列を3Dロゴに変換するjsを書いてみました。
↓はギザギザしたgif画像ですが生成されるロゴはこんな感じです。

![20150428-211748_capture.gif](https://qiita-image-store.s3.amazonaws.com/0/30635/a6890d76-5de1-197c-164f-885a429c2b3f.gif)

影をつけてみたり。

![shadow.gif](https://qiita-image-store.s3.amazonaws.com/0/30635/9c00fde3-0344-95b5-6128-1941fbe2d1da.gif)

## three.js
今回はほぼ**three.js**だけで書いています。**three.js**はWebGLで3Dを表現できるライブラリです。友達に教えてもらいました。
http://threejs.org/

今までWebGLの領域に触れたことは無かったのですが、思っていたよりも簡単に3D Renderingを実現でき、それに感動したのでthree.jsのシンプルな例も書いてみます。

```js:makeCube.js
// 描画領域サイズを定義
var width = 1000, 
height = 700;

// scene
var scene = new THREE.Scene();

// mesh
var geometry = new THREE.BoxGeometry(20,20,20);
var material = new THREE.MeshLambertMaterial({color: "#558800"});
var cube = new THREE.Mesh(geometry, material);
cube.position.set(0,30,0)
scene.add(cube);

// camera
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(300,500,300);
camera.lookAt(cube.position);

// rendering
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor("#eeeeee", 1);
// html にあらかじめ描画領域 <div id="stage"></div> を作っておく
document.getElementById('stage').appendChild(renderer.domElement);

renderer.render(scene, camera);

```

これでちょこんとした立方体が無限に広がる3D空間内に爆誕します。この時点で無から有を生んでいる感があり、"神"秘的な気持ちになります。

![blackBox.png](https://qiita-image-store.s3.amazonaws.com/0/30635/978a896e-7fca-6aee-f98e-d664acc7ebfa.png)

`{color: "#558800"}`を指定しているのにブラックボックスなのは光が無いせいです。
"光"をもたらすには`Light`を追加します。

```js:makeCube.js
// light
var light = new THREE.DirectionalLight("#ffffff", 1);
light.position.set(0,100,30);
light.castShadow = true;
scene.add(light);
```

![スクリーンショット 2015-04-19 16.30.27.png](https://qiita-image-store.s3.amazonaws.com/0/30635/f0c4442f-42cf-5057-b29f-30c42e50cd27.png)

色が出るようになりました。

このように、基本は最初に`scene`を作ってそこにオブジェクトを`add`していくだけです。空間にものを放り込んでいくイメージでしょうか。
ほんの少しだけ**Unity**触ったことがあるのですが、似たような用語や表現があった気がするので経験者ならすぐ掴めるのではないかと思います。

あとはドットインストール先生の授業をなぞるだけで、y軸の周囲を回転し続ける立方体群や影を付けたりできるようになります。

* [Three.js入門 (全14回) - プログラミングならドットインストール - ](http://goo.gl/trrzPU)

![スクリーンショット 2015-04-19 16.34.58.png](https://qiita-image-store.s3.amazonaws.com/0/30635/2f650fd6-d221-38e6-20dc-c5763588f7e6.png)

この他にもアニメーションを付けたりマウスコントロールを与えたりできます。本記事では割愛しますが3D Logo Generatorでも実装しているので興味があれば見てみてください。

## 文字列のドット化

**three.js**はちょっと記述量こそ多いもののやってることはそう難しくなく、今回最も悩んだのはここでした。
文字列のドット化したデータを表すビット配列をどうやって得るか…と考えるところから始まり、そもそもそういう技術を何と呼ぶのかわからず（ラスタライズ？）1時間ぐらい広大なネットを彷徨いようやく見つけたのが…　[文字列の画像化ドットデータを得る | Aquaroad](http://goo.gl/whmRES)　でした。

### Canvasを使って画像データを得る

初めて知ったのですがHTML5のCanvas要素からはバイトデータを取得できます。

```js
var canvas = $("<canvas>")[0];
var context = canvas.getContext('2d');
var imgdata = context.getImageData(top, left, width, height);
```

ここで得られるデータを利用することでpixel単位の編集や参照ができるようになるわけです。

また、フォントの設定は`context,font`に対して行ってやります。
この辺りをいじるとロゴイメージが大きく変わるのは試していて面白かったですね。

```js
var fontStyle = "12px 'ヒラギノ角ゴ Pro W3'"
context.font  = fontStyle;
```

ImageDataの操作はだいぶプリミティブですが、そのぶん今後も活用できそうです。

## GitHub.io便利

静的サイトの公開で今回初めてGitHub.ioを使いました。
GitHub上でブランチを切るだけでpublishできて、改めてGitHubの"インフラ力"に驚いたりしました。

今回はやりませんでしたが独自ドメインを割り当てたりもできるそうです。本格的なサイトをopenした際には試してみたいですね。
* [静的サイトをgithub.ioでホスティングし、独自ドメインでアクセスする - 結城浩のブログ -]( http://goo.gl/pgsO2w)

## 広がる夢

### three.jsプラグインとか
利用例やプラグインも色々紹介されていますし、公式サイトのサンプルを見てるだけでも楽しいですね。個人的に興味が湧いたサイトとプラグインを一つずつだけ選んでおきます。

* [George & Jonathan III](http://goo.gl/7tIzW7)
* [Physijs](http://chandlerprall.github.io/Physijs/)

###︎本当に欲しかったもの
元ネタと言うのもおこがましいですが、実は[Perfumeのすばらしいサイト](http://perfume-global.com/font.html)にインスパイアされて作りました。こんなのも作ってみたいですね。