勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

3Dデータ(obj,stlファイル)をブラウザ上で表示する方法  

  JavaScript

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件があった。

JSC3Dというjavascriptプラグインでいけそうなのでメモ。

 


 

■ダウンロード先とサンプル

 

・JSC3D
https://code.google.com/p/jsc3d/

・サンプルstlファイル版
http://sample.taitan916.info/3dview/stl.html

・サンプルobjファイル版
http://sample.taitan916.info/3dview/obj.html

 


 

 ■PC上で3Dデータを見るフリーソフト

 

2D画像だったらwindowsのデフォルトのビュアーとかペイントで見られるけど、3Dデータを見る場合は「DesignSpark Mechanical」がフリーソフトで良さそう。

 

・DesignSpark Mechanical
http://www.vector.co.jp/soft/dl/winnt/business/se504347.html

・使い方
http://www.rs-online.com/designspark/electronics/jpn/tutorial/designspark-mechanical-download-installation-and-activation

 


 

■サンプル用のフリー素材

 

サンプル用の3Dフリー素材は以下が色々種類あった。

 

・TURBOSQUID
http://www.turbosquid.com/Search/3D-Models/free

 


 

■その他

3Dデータのサイズが大きいとブラウザで見たときに、かなり重たく感じた。固定回線でこれだったら、無線とか出先で見る場合はファイルサイズ自体を落としておかないと厳しそう。

 - JavaScript

  関連記事

ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)

あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...

マウスオーバーでの画像切り替えをJavaScriptで簡単に対応

マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...

jQueryやJavaScriptで認識違いしていたところのメモ(高速化)

認識違いしていたり、知らなかったりでもっと高速な 処理を行えそうな点があったので ...

ブラウザの広告ブロッカーを検知し、ブロックしている場合は何らかの処理を行う方法

普段何らかのサイトを見る際はAdBlock等の広告ブロッカー系プラグインを導入し ...

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...