ずっと君のターン

2015-05-03 半袖でも暑い

宇宙船

| 01:16 | 宇宙船を含むブックマーク

少しちゃんとしたっぽいものを3Dプリントしてみたかったので、素人なりに123D Designで頑張りました。

f:id:technohippy:20150504010423p:image

宇宙船の本体をひっくり返してるのは、そうしないと底面の出っ張りがうまく造形されなかったから。おかげでサポート材取るのが相当面倒だった・・・。

f:id:technohippy:20150501130424j:image

途中でフィラメントが切れたりしたけど、同僚の助けを借りてなんとか完成。

f:id:technohippy:20150501133955j:image

なんか入れるとこんな感じ。

f:id:technohippy:20150501133840j:image

フタをするとこう。

f:id:technohippy:20150504010840p:image

https://www.rinkak.com/jp/item/technohippy/6321098457088000

rinkakで販売中です。いま話題のウッドライクを使って、土を入れて花でも一輪植えてみたら植物に侵食されている荒廃した文明っぽくてなかなかいいのではないでしょうか。お値段たったの12564円*1。よろしければご購入ください。

*1:体積と素材で決まります

2015-04-27 小春日和を通り越してほぼ夏

プリンセスパフューム

| 00:47 | プリンセスパフュームを含むブックマーク

週末に娘とプリキュアオールスターズを観に行ったら(たぶん)テレビの映像使いまわしまくってすっごい低予算で良い子とその親からぼったくるために作りましたみたいな映画でホントびっくりしたんだけど、プリキュアの映画って毎回あんな感じなんですかね?まぁ娘さんはとても楽しそうに見ていたのでいいっちゃいいけど。

で、その映画のおまけにドレスアップキーというおもちゃがもらえたんですが、それとペアになる鍵穴の付いたアイテムがうちにはないので、娘さんはお茶碗とかをひっくり返して代わりにそれっぽく使って遊んでたりするわけです。本人は楽しそうだけど、なんか見てる方は不憫で不憫で。

ということでプリンセスパフューム作りました。会社の3Dプリンタで。入社時に「好きに使っていいですよ」的なことを言われた気がするのでホントに好きに使ってるけどいいんですかね、ホントのとこ。

f:id:technohippy:20150428003359p:image:w250

ちなみに本物はこんなん。

f:id:technohippy:20150428003522p:image:w250

わりと全然似てない気がするけど「それでも3才児なら・・・3才児ならきっと(想像力で)何とかしてくれる・・・」と信じて渡してみたらわりと喜んでくれて安心しました。

f:id:technohippy:20150428003756j:image:w250

ちょっと削ったけどドレスアップキーがホントぴったりはまって結構な達成感。ノギスどころかメジャーもないのでわりと目見当で寸法決めたのに・・・。

あと今回はAutodesc 123D Designでちゃんと(?)設計してみました。というか実際のところこの練習がメインだったり。

f:id:technohippy:20150428004444p:image

しかしまぁこの程度のものならその気になれば一般家庭でも作ることができるということで、ホントすごい時代になったもんです。

2015-04-21 覚えてない

みお

| 23:21 | みおを含むブックマーク

会社の3Dプリンタで初3Dプリント。どちらかといえば3Dプリンタを使ってみることが目的だったのでとりあえず娘さんの名前など。大きさは1.5cm x 3.0cmくらい。

f:id:technohippy:20150427231546p:image

データは以前作ったJS版Teddyで描いてSTLエクスポートしたものを使いました。

f:id:technohippy:20150427231542p:image:w200

2015-04-16 本日は大変お日柄もよかった

転職しました

| 01:07 | 転職しましたを含むブックマーク

よくあるかもしれない質問と回答
 Q.「おまえ誰よ」
 A.「まぁ気にすんな」

mixiには約4年在籍していて、前半2年はmixiプラットフォーム(APIとか)、後半2年は社内ベンチャーノハナと、いろいろ得難い経験をさせていただきました。お役に立てたかどうかは正直自分でも疑問ですが、このAPIに関してはいい仕事したなと自画自賛しています。あとノハナは特に小さいお子さんがいる人にとってはホントにいいサービスだと思うので使えばいいと思います。

ちなみに転職先は株式会社カブクという会社です。会社のサイトを見てもらえれば分かりますが、社員になると自分を3Dにしてもらえるというのが決め手でした*1。3Dモデルに負けないようにがんばります。

*1:まだなってません

2015-04-14 ここ数日春なのに梅雨っぽい

Three.jsを諦めた人のためのWebComponents作りました

| 10:12 |  Three.jsを諦めた人のためのWebComponents作りましたを含むブックマーク

先月の7日にPolymerのコードラボがありスタッフ側で参加したんですが、その際空いた時間にというか自分のセッションの時間以外はずっと当日のLTネタとしてthree.jsのWebComponentsを作ってました。

で、なんとなく動くようになったものを実際に触ってると「これ真面目に作ったら結構いいモノになるんでは?」という予感がしてイベント終了後もちびちび機能を作りこんでて、ようやくある程度動くようになってきたので公開します。

http://technohippy.github.io/three-canvas/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/three-canvas/dist/three-canvas.html">
  </head>
  <body>
    <three-canvas width="200" height="200" antialias="true" clearColor="#000000" defaultLight="true">
      <three-camera position="0,0,8" lookAt="0,0,0" controls="orbit"></three-camera>
      <three-box name="box" width="1" height="1" depth="1" rotation="0.2,0.2,0" color="#ff0000"></three-box>
    </three-canvas>
    <button onclick="rotateBox()">Rotate a Box</button>
    <script>
    function rotateBox() {
      var canvas = document.getElementsByTagName('three-canvas')[0];
      var threeJsMesh = canvas.scene.getObjectByName('box');
      threeJsMesh.rotation.x += 0.1;
    }
    </script>
  </body>
</html>

f:id:technohippy:20150414011125p:image

これだけの記述でcanvasに立方体を表示してマウスで視点移動させたり、ボタン押下で回転させたりできます。

「Polymerを使ってthree.jsをラップしただけでしょ」と言われたらまさにそのとおりなんですが、「宣言的に3Dのシーンを定義して、複雑な動きや設定が必要であればthree.jsオブジェクトを取り出して使用する」というのは、小規模な3Dの利用に限れば実際なかなかいい感じなのでちょっと試していただきたく。環境にbowerが入ってたらとても簡単で

$ bower install three-canvas

して、HTMLファイルのheadに

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/three-canvas/dist/three-canvas.html">

を追加するだけ。

その後はチュートリアルを参考にいろいろ試していただければ。特にControlsやLoaderの利用、Shaderの定義あたりはキレイにまとめられた気がしてます。

まだ作り始めたばかりなので当然シリアスな用途には向いていません。ただ、three.jsに挑戦して真っ黒なキャンバスから先に進まなかった人は、とりあえずこの辺参考に何かしらのシーンを表示して、そこから取り出したthree.jsオブジェクトを操作してみたりするとモチベーションが保ちやすいのではないかと思います。

基本的にthree.jsを使う際にまず必要になるシーン構築を簡単にするだけのライブラリなので「ラッパーを覚えてもthree.jsの知識が身につかなくて無駄」という心配はそれほどないはずです。後でこのライブラリに依存しないように作り変えたければ、シーン構築部分をthree.jsで置き換えるだけなので大した手間ではないはずですし。

three.jsの機能が豊富すぎてまだまだ実装が追いついていませんが、要望があれば優先的に実装します。お気軽にissue追加またはpullreqください。