ITエンジニア/デザイナ向けにオープンソースを毎日紹介

3Dプリンタの発展もあって、立体物に対する注目が集まっています。しかし3Dオブジェクトは2D以上に描いたり作成したりするのが難しいです。

そんな中紹介したいのがJSC3Dです。オブジェクトの作成は容易ではありませんが、Webブラウザ上で3Dオブジェクトを描画するすごいビューワーです。

一例です。女性のアバターを表示しています。
一例です。女性のアバターを表示しています。

回転したり服を変えたりできます。
回転したり服を変えたりできます。

BMW。データはCanvasタグで描かれています。
BMW。データはCanvasタグで描かれています。

アニメーションさせることもできます。格好もなんですが、髪型がすごいですね…
アニメーションさせることもできます。格好もなんですが、髪型がすごいですね…

プテラノドン。細かく描画されているのが分かります。
プテラノドン。細かく描画されているのが分かります。

ティラノサウルス。これもまた描画がリアルですね。
ティラノサウルス。これもまた描画がリアルですね。

回転する地球。
回転する地球。

iPhone。絵が貼付けられています。
iPhone。絵が貼付けられています。

地図。3Dオブジェクトを使うとこんな表現もできます。
地図。3Dオブジェクトを使うとこんな表現もできます。

ゲームのキャラクター。走ったり武器を振ったりします。
ゲームのキャラクター。走ったり武器を振ったりします。

FPSにぴったりですね。
FPSにぴったりですね。

ロボット。これもゲームに良さそうです。
ロボット。これもゲームに良さそうです。

バニー+剣…。このセンスは理解しがたい。
バニー+剣…。このセンスは理解しがたい。

かなりリアルな地図。拡大しても奇麗です。
かなりリアルな地図。拡大しても奇麗です。

裏通り。ゲームなどで使えそうですね。
裏通り。ゲームなどで使えそうですね。

潜水艦。これまたリアル。
潜水艦。これまたリアル。

何かのヒートマップを投影した図。こういう使い方も良いですね。
何かのヒートマップを投影した図。こういう使い方も良いですね。

ワイヤーフレームだけに展開した例。
ワイヤーフレームだけに展開した例。

動画を貼付けた例。Chromeでは回転できませんでしたが、動画を再生しながら回転できたりすると面白そうですね。
動画を貼付けた例。Chromeでは回転できませんでしたが、動画を再生しながら回転できたりすると面白そうですね。

最後にクオリティのサンプル。こちらはロークオリティ。
最後にクオリティのサンプル。こちらはロークオリティ。

そしてこちらがハイクオリティ。細かいテクスチャの違いが分かります。
そしてこちらがハイクオリティ。細かいテクスチャの違いが分かります。

JSC3Dにはたくさんのサンプルが掲載されていますので、どれほどのことができるのかすぐに分かることでしょう。レンダリングはソフトウェアベースまたはWebGLを選択できます。WebGLを使えないブラウザであってもサポートされており、IE7から動くのが大きな利点です。

さらにレンダリング速度は気になるもののスマートフォンなどもサポートされています。対応しているフォーマットはWavefront OBJファイル、STLファイル、Autodesk 3DSファイル、OpenCTMファイルとなっています。

JSC3DはJavaScript製のオープンソース・ソフトウェア(MIT License )です。

jsc3d - A web 3d object viewer using pure javascript and html canvas - Google Project Hosting

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2