Web Turntable Viewer Widget

模型やCGのターンテーブル動画を、Webブラウザ上でドラッグしてグリグリ回転させられるウィジェットを作ってGitHubで公開してみた。まだ手探り段階なのでベータ版。

Web Turntable Viewer Widget

模型や3DCGモデルを360度回転させたターンテーブル動画をWebブラウザ上でドラッグ操作して自由な角度から鑑賞できるウィジェットスクリプトです。 Vimeoの動画埋め込みをラップするもので、動画のアップロード・公開にはVimeoを利用します。

Vimeoの動画埋め込み機能を利用して、埋め込み動画をドラッグUIでラップしたもの。JavaScriptとCSSはjsDelivrを利用して配信。埋め込みコードを作成するデモサイトも作成した。



こちらが実際にウィジェットコードをブログ記事中に貼りつけてみたもの↓

Loading turntable…

0%

View on Vimeo

こちらが使用した埋め込みコード↓

<script src="https://player.vimeo.com/api/player.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/NegativeMind/web-turntable-viewer-widget@v0.1.4-beta/dist/turntable-viewer.css">
<div class="turntable-wrapper">
    <div vimeo-video-id="1114427944" clockwise-rotation>
        <iframe width="480" frameborder="0" allowfullscreen></iframe>
        <div class="drag-overlay"></div>
        <div class="loading-overlay">
            <div class="loading-content">
                <div class="loading-text">Loading turntable...</div>
                <div class="progress-container">
                    <div class="progress-bar"><div class="progress-fill"></div></div>
                    <div class="progress-text">0%</div>
                </div>
            </div>
        </div>
    </div>
    <a class="vimeo-link" href="#" target="_blank">View on Vimeo</a>
</div>
<script src="https://cdn.jsdelivr.net/gh/NegativeMind/web-turntable-viewer-widget@v0.1.4-beta/dist/turntable-viewer.js"></script>

開発に至った経緯

オイラは模型とか3DCGとか、立体フェチ。
過去10年以上、模型SNSが立ち上がってはサービス終了してしまう流れを見てきた。

模型SNSにアップロードできるのは大抵、文字と画像。しかし、立体造形物の写真だけ共有してもその魅力はなかなか伝わらない。かといって、Web上で3Dの情報を表示するリッチコンテンツは、ストレージや演算リソースの維持費がネックになる。

そこで、既存の動画投稿プラットフォームを利用する形で安価に立体造形物を疑似的に共有する体験を作れないか試してみた。
完全な3D自由視点ではなく、回転軸を固定した360度ターンテーブルであれば、動画再生のシークバーの1次元の移動で見る角度の変化を表現できる。立体造形物を眺める行為とは、能動的に視点を変えることだと仮定してみた。

最初はYouTubeの動画を利用して実装しようとしたが、APIの仕様的に目的の操作が難しかったため、Vimeoを利用することにした。