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】