制作の準備
Roquroの開発と使用にはPCとLeap Motionが必要です。
Leap Motionは手の動きを感知するデバイスで、Roquroの操作に必須です。
RoquroのコードはGitHub上で管理しているため、希望される方には完成形のコードをお渡しすることが可能ですが、以下では開発の大まかな流れを説明します。
Leap Motionは手の動きを感知するデバイスで、Roquroの操作に必須です。
RoquroのコードはGitHub上で管理しているため、希望される方には完成形のコードをお渡しすることが可能ですが、以下では開発の大まかな流れを説明します。
Three.jsを使って、ブラウザ上で3D空間を作る
基本的にはJavaScriptでコーディングし、ブラウザ上で機能するサービスとして実装します。
ブラウザ上でのWebGLによる3D描画をサポートするライブラリ「Three.js」を使って3D空間を作り、器の原型となる立方体を生成して配置し、回転させます。
背景が何もないと淋しいので、「ゴースト〜ニューヨークの幻〜」の印象的なワンシーンを配置して雰囲気を出します。
ブラウザ上でのWebGLによる3D描画をサポートするライブラリ「Three.js」を使って3D空間を作り、器の原型となる立方体を生成して配置し、回転させます。
背景が何もないと淋しいので、「ゴースト〜ニューヨークの幻〜」の印象的なワンシーンを配置して雰囲気を出します。
leap.jsを使って3D空間に手を配置させる
Leap Motionでの認識をJavaScriptでも可能にするライブラリ「leap.js」を使い、3D空間上で手を動かせるようにします。Three.jsの機能を使って当たり判定なども実装します。
同時進行でしっくりくる背景を模索します。
同時進行でしっくりくる背景を模索します。
茶碗の形状を作り、手で変形可能にする
Three.jsの回転体を生成するメソッドにサイン波を利用して、茶碗の原型となる形状を作ります。
手との当たり判定が起こった場合、その指の位置に最も近い頂点を内側に動かして回転体を再描画するようにし、器の変形を可能にします。
サービスの使いやすさに直接関わる部分なので、細かく数値を調整して使い心地を試しながら進めます。
白い器のローポリな形状に合わせて、背景はカラフルなポリゴンの背景が読み込むごとにランダムに変わるようにしました。
また、右上のMakeボタンを押すことでこのオブジェクトを3Dデータファイル(.stl)としてダウンロードできるようにしました。
手との当たり判定が起こった場合、その指の位置に最も近い頂点を内側に動かして回転体を再描画するようにし、器の変形を可能にします。
サービスの使いやすさに直接関わる部分なので、細かく数値を調整して使い心地を試しながら進めます。
白い器のローポリな形状に合わせて、背景はカラフルなポリゴンの背景が読み込むごとにランダムに変わるようにしました。
また、右上のMakeボタンを押すことでこのオブジェクトを3Dデータファイル(.stl)としてダウンロードできるようにしました。
パーソナル3Dプリンターで造形
ダウンロードしたSTLファイルを、今回はPLA樹脂で造形します。
私は3Dプリンターを持っていないので、3Dプリンターを持っている友人に使わせてもらいました。
私は3Dプリンターを持っていないので、3Dプリンターを持っている友人に使わせてもらいました。
器を完成させる
サポート材をはがして、器の完成です。
今回造形した形状は比較的シンプルな形状です。
今回造形した形状は比較的シンプルな形状です。
ポリゴンを細かくしてより普通の器に近づけることもできますが、あえてパキパキの形状にすることで、普通のろくろでは作れないソリッドな印象になります。
飯をよそう
ソリッドな形状の器に白い飯をよそうことで、日常と非日常が組み合わさった絶妙な違和感を感じることができます。
飯を食う
見事、3Dプリンターで飯が食えることが証明されました。