3DモデルARビュワー

著作・制作：信州大学教育学部・村松研究室
対応：Windows，Mac，iPad，Chromebook，Andrido各機種で使用可能かと思います（動作しない場合はご連絡ください）

本教材は，例えばTinkerCADなどで制作した3Dモデル（STL形式もしくはglb形式）を，カメラを通しての画像もしくは事前に撮影した写真等と合成するARアプリです。以下から実行してください（glb形式だとオブジェクト表面の色の情報も表示されます）。

ビュワーを起動したら，まず3Dモデルを選択します。３Dモデルが表示されたら，大きさや向きなどを整えます。次に，カメラもしくは事前に用意した画像のどちらかを背景に選択すると合成ができます。

3Dモデルが画面上に表示されたら，同様に向きや大きさなど自由に操作し，良いところで「画面キャプチャ」を押すと，ブラウザのダウンロード先に「caputer＋タイムスタンプ」のファイル名でjpeg形式で保存されます。

※別タブで開きます
https://gijyutu.com/g-soft/ar/index.html
※テスト用3Dモデル「招き猫」

先行教材ねそプロ様の「ARを作ろう」に触発されて開発してみました。
https://kaihatuiinkai.jp/nesopuro2/ar/index.html
なるべく簡単にしようということで，
・マーカーレスとし，カメラと静止画像の両方を選択的に使える。
・カメラでの撮影画像もしくは事前に撮影した写真の上に，読み込んだ3Dモデルが表示
・3Dモデルの移動，拡大・縮小，回転が自由に。
・画面キャプチャを押すとWindow内の合成画像がjpeg形式でダウンロード先に保存。
材料加工の技術での授業がイメージしやすいですが，他の場面でもポケモンGO的に風景などと3Dモデルを合成可能です。
自由にお使いください。

開発には以下のページを参考にさせていただきました。
Zenn:Three.jsでwebブラウザ上に3Dモデルを表示してみよう

使用しているライブラリ
Three.jsという3Dグラフィックスライブラリ（Webブラウザ上での3D表示・操作を支援）を活用しています。
three.module.js：3Dシーンの構築に必要な基本機能を提供：
STLLoader.js：STL形式を読み込むためのローダー
GLTFLoader.js：GLTF / GLB形式を読み込むためのローダー
OrbitControls.js：直感的に3D空間を操作するためのコントロールユーティリティ

投稿：村松浩幸（信州大学）