3分で3Dコンテンツが作れる！「cables」で始めるビジュアルプログラミング

2019年8月20日公開 / 株式会社ICS 昆野史弥

今日ではwebサイトでも積極的に3Dおよびインタラクティブな手法が用いられています。これによって画面に入りこむような、より没入感のある体験が可能となりました。商品を3D化して360度から見られるwebサイトなど見たことはないでしょうか。

一方で、インタラクティブな3Dコンテンツを作るには導入の敷居が高く感じられ、尻込みしてしまう方も多いでしょう。その敷居を下げてくれるのが『cablesケーブルス』です。

cablesは開発はundevというベルリン/ケルンが拠点のデザインスタジオが行っており、ブラウザ上で視覚的にプログラミングが行えるツールです。インタラクティブな3Dコンテンツの作成を簡単に行うことができ、デザイナーにもエンジニアにも使いやすいツールとなっています。面倒なセットアップも必要ありません。

▼ 編集画面の例

本記事ではcablesを極めればどんなコンテンツが作れるかを紹介し、簡単かつ魅力的なコンテンツの作り方を紹介します。

cablesでどんなものが作れるか

cables公式サイトを見てみましょう。うねうね動く3Dのオブジェクトが表示されており、マウスで視点を操作できます。

デモ動画

cablesは実際のwebサイトにも使われており多くのブラウザで利用可能です。cablesで制作されたサイトの事例としてwebサイト『Website Of The Year』をご覧ください。中心にある球体がマウス操作とともに動いています。このような動きのあるコンテンツがcablesなら比較的簡単に作ることができます。

以降では、実際に手を動かしながら作ってみましょう。

作品を作ってみよう

今回は下の動画のような作品を作ります。

トップページから会員登録をするとマイページが表示されます。上部の「Create」メニューから空のプロジェクトを生成してください。

オブジェクトを設置してみよう

左の「add op」から「MainLoop」を検索しaddします。エディターにMainLoopという名前の要素が設置されました。これをオペレーターと呼びます。cablesではこのオペレーターをケーブルのようにつなげて画面を作成していきます。

エディター内の移動はなにもないところで右クリック+ドラッグにより可能です。オペレーターを見失ったらCキーをクリックすることで最後に選択したオペレーターがエディター中心に移動します。

オペレーターのパラメーターをドラッグ+ドロップすることでオペレーターを追加できます。下の動画を参考にしながらcubeを作成してみましょう。

右上のビューに箱が表示されましたね！

オブジェクトに角度や色を与えよう

次は大きさや長さ、角度を変えたいのでTransformオペレーターを追加してみましょう。

MatCapMaterialNewオペレーターは箱に質感を与えてくれます。画面右下のパラメーターウィンドウで好きな色に変更してみましょう。マテリアルはいくつか種類があるので色々試してみるとおもしろいかもしれません。

さらに、OrbitControlsオペレーターを追加するとマウスで回転できるようになりました！

次はcubeを増やしてみましょう。

オブジェクトを増やしてアニメーションさせよう

たった一つのオペレーターを追加することで箱を増やすことができます。MatCapMaterialの直前に、RandomClusterを設置してください。

いい感じに増えてくれました！　パラメーターから箱の数や配置パターンを変えられるのでお好みで変えましょう。

次に、箱に回転と動きを加えます。RandomClusterにあるRotate ZとScroll XにTimerオペレーターを追加しましょう。

いい感じですね！

ところでTimerオペレーターは何をしているのでしょう？　これは経過時間をプロパティに持つオペレーターです。RandomClusterのRotate ZとScroll Xがその値を受け取っています。

それでは最後に、この画面を書き出してwebサイトに埋め込んでみましょう。

書き出してwebサイトに組み込む

書き出しについてはこちらのチュートリアル動画を参考に行います。サンプルとして、こちらのアイキャッチに埋め込んでみたいと思います。

サンプルを別ウィンドウで開く

完成したプロジェクトを保存し、Exportします。ここではSingle JavaScript Fileとして書き出します。

書き出されたフォルダーのindex.htmlを開き、canvas要素とscriptを埋め込みたいhtmlファイルに貼り付けましょう。また、書き出されたフォルダ内のjsフォルダをhtmlファイルが入ったプロジェクトフォルダにコピーしましょう。

ここで気をつけるのはcanvasのサイズをウィンドウに合わせるか親要素に合わせるかscript内で指定することです。この設定は上記画像の「画面サイズ等の設定」の部分で行えます。前者はglCanvasResizeToWindowをtrueに、後者はglCanvasResizeToParentをtrueにしましょう。

▼ windowいっぱいに表示したい時

document.addEventListener('DOMContentLoaded', function(event) {
  CABLES.patch = new CABLES.Patch({
    patch: CABLES.exportedPatch,
    prefixAssetPath: '',
    glCanvasId: 'glcanvas',
    glCanvasResizeToWindow: true,  //windowに合わせる
    onError: showError,
    onPatchLoaded: patchInitialized,
    onFinishedLoading: patchFinishedLoading,
  });
});

▼ 親要素に合わせたい時

document.addEventListener('DOMContentLoaded', function(event) {
  CABLES.patch = new CABLES.Patch({
    patch: CABLES.exportedPatch,
    prefixAssetPath: '',
    glCanvasId: 'glcanvas',
    glCanvasResizeToParent: true,  //親要素に合わせる
    onError: showError,
    onPatchLoaded: patchInitialized,
    onFinishedLoading: patchFinishedLoading,
  });
});