勉強したことのメモ.

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

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

   2024/06/06  JavaScript

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件があった。JSC3Dというjavascriptプラグインでいけそうなのでメモ。

 

JSC3D

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

 

サンプル

https://taitan916.info/sample/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フリー素材は以下が色々種類あった。

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

 

その他

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

 - JavaScript

  関連記事

JavaScriptでデバッグ時にconsole.log以外のメソッドを利用する方法
JavaScriptでデバッグ時にconsole.log以外のメソッドを利用する方法

JavaScriptでデバッグ時は基本的にconsole.logを使って配列やオ ...

モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法
モーダルウィンドウ表示時にウィンドウのスクロール位置をリセットする方法

モーダルウィンドウ内で「縦にスクロール→ウィンドウを閉じる→改めてモーダルウィン ...

「emoji-mart」プラグインを利用してsummernoteに絵文字機能を追加する方法
「emoji-mart」プラグインを利用してsummernoteに絵文字機能を追加する方法

summernoteに絵文字機能を追加したい。具体的にはツールバーに新たにボタン ...

Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法
Leafletにて表示されているマップを画像としてダウンロードさせる「leaflet-easyPrint」の利用方法

Leafletにて何らかのボタンをクリックすると表示されているマップを画像として ...

Leafletで「Leaflet.markercluster」プラグインを導入してマーカークラスタ機能を追加する方法
Leafletで「Leaflet.markercluster」プラグインを導入してマーカークラスタ機能を追加する方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...