以前、ご紹介した A360 ビューワー に ウィジェット が登場しました。https://360.autodesk.com/Viewer を直接開かなくても、みなさんの Web ページに Drag & Drop 領域を埋め込んで、A360 ビューワーを起動することが出来るようになります。 埋め込み方法は、https://a360.autodesk.com/viewer/widget/ に紹介されていますが、簡単にご案内しておきましょう。
ウィジェットは数行の JavaScript のコードとウィジェットの表示領域を HTML の <div> 要素で実現することが出来ます。まず、ウィジェットを埋め込みたい HTML ページに、次の 3 行を追加して JavaScript を参照します。
<link href="https://360.autodesk.com/Content/css/a360Viewer/widget.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://360.autodesk.com/Scripts/a360Viewer/widget.js" type="text/javascript"></script>
次に埋め込んだウィジェットを表示領域を一意な id とともに指定します。
<div id="dropAreaContainer" style="width: 400px; height: 300px;"</div>
style で要素幅を指定していますが、この指定は任意です。あとは、実施に処理を担う JavaScript を記述するのみです。
<script type="text/javascript">
var adskViewerWidget = adskViewerWidget();
adskViewerWidget.Init('#dropAreaContainer', true);
</script>
この HTML 記述で下記のような領域が表示されるようになるはずです。
表示には 2 通りがありますが、adskViewerWidget.Init() の第二引数を false にすることで、英語の説明文入りの完全なウィジェットを表示することが出来ます。
あとは、 Drag & Drop 領域に CAD データ ファイルをドロップするだけです。ぜひお試しください。
Subscribe
コメント