YAS's VB.NET Tips
 
NetCommons Tips
NetCommons Tips >> 記事詳細

2023/02/05

Three.jsでSTLを表示する

Tweet ThisSend to Facebook | by:YAS
 Fusion360で作成したSTLをThree.jsを使ってNetCommons2の内に表示します。なるべく簡単にするために、Three.jsのSTLLoaderを使って表示します。
 まず、https://threejs.org/より、Three.jsをダウンロードします。ダウンロードした、「three.js-master.zip」より、下の3つのファイルをNetCommonsにアップロードし、HTML表示でアップロードIDの数字をメモしておきます。
 three.module.js(./?action=common_download_main&upload_id=416)
 STLLoader.js(./?action=common_download_main&upload_id=420)
 OrbitControls.js(./?action=common_download_main&upload_id=421)
 次に、表示したいSTLをNetCommonsにアップロードしますが、通常では拡張子がSTLのファイルはアップロードできません。NetCommonsのコントロールパネルの「セキュリティ管理」-「一般設定」-「アップロードファイルの許可拡張子」に「stl」を追加すればアップロードできるようになりますが、面倒であれば、STLファイルの拡張子を「.jpg」などに書き換えてアップロードしてもSTLLoaderでちゃんと読み込めます。
 R05 フリクションイレーサー.stl(./?action=common_download_main&upload_id=442)
 下のコード「STLLoader.html」は、Three.jsの「webgl_loader_stl.html」を参考に、と言うか、大部分をコピーして作成しました。コードのimportmap部分をthree.jsのリンクに、STLLoaderの引数をSTLのリンクに変更し、NetCommonsにアップロードします。
 STLLoader.html(./?action=common_download_main&upload_id=472)
 iframeでアップロードしたhtmlファイルを表示したものが、下になります。マウスで向きや大きさを変えることができます。
【R05.02.06追記】iPadで見たところ、表示されていなかったので調べたところ、iOSのブラウザではimportmapをサポートしていないようです。解決策としては、es-module-shims.jsをimportmapの前に読み込んでおくとよいようです。
 es-module-shims.js(./?action=common_download_main&upload_id=467)
【STLLoader.html】


17:00 | 投票する | 投票数(0) | コメント(0)