Skip to content

Latest commit

 

History

60 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebAR

ARです。以上です。

文化祭の展示に向けて個人制作した、画像認識型のWeb ARミュージアムです。ブラウザのカメラで登録済みの画像を認識すると、画像に対応する3Dモデルを表示します。

Demo

WebARを体験する

カメラを使用するため、アクセス時にブラウザから求められるカメラ権限を許可してください。AR表示には登録済みの画像マーカーが必要です。

Features

  • 画像認識をきっかけにした3Dモデル表示
  • 複数の画像マーカーと3Dモデルへの対応
  • アニメーション付きglTF / GLBモデルの再生
  • 展示モデルと制作メンバーの紹介ページ
  • スマートフォンから操作できるナビゲーション

Tech Stack

  • HTML / CSS / JavaScript
  • MindAR.js
  • A-Frame
  • aframe-extras
  • glTF / GLB
  • GitHub Pages

How to Use

  1. スマートフォンのChromeまたはSafariでデモを開きます。
  2. カメラへのアクセスを許可します。
  3. 登録済みの画像マーカーをカメラに映します。
  4. 画像の上に表示される3Dモデルを体験します。

画面左上のメニューから、メインメニュー、展示モデル紹介、制作メンバー紹介、AR画面を移動できます。

Project Structure

WebAR/
├── 3D/                 # glTF / GLB形式の3Dモデル
├── css/                # 画面ごとのスタイル
├── img/                # 展示・紹介用画像
├── mind/targets.mind   # MindARの画像認識ターゲット
├── index.html          # AR画面
├── index1.html         # メインメニュー
├── heya.html           # 展示モデル紹介
└── zikosyoukai.html    # 制作メンバー紹介

Background

文化祭で来場者にARと3Dモデルを体験してもらうことを目的に制作しました。企画、画面制作、3Dアセットの組み込み、画像認識ARの実装、GitHub Pagesでの公開まで個人で担当しています。

Limitations

  • カメラを利用できる端末とブラウザが必要です。
  • 認識精度や3D表示の速度は、照明、画像マーカー、端末性能に影響されます。
  • ライブラリをCDNから読み込むため、体験時にはインターネット接続が必要です。
  • ビルド工程や自動テストを持たない静的Webサイトです。

About

MindAR.js / A-Frameで制作した、文化祭向け画像認識Web ARミュージアム

Topics

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages