AR実習サンプルソース
fittingmind| You are currently viewing a revision titled "AR実習サンプルソース", saved on 2023年7月5日 7:14 PM by fittingmind | |
|---|---|
| タイトル | AR実習サンプルソース |
| コンテンツ | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame AR with 3D Model and Video Texture</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://rawcdn.githack.com/AR-js-org/AR.js/3.3.0/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene embedded arjs="sourceType: webcam; debugUIEnabled: false;">
<a-assets>
<a-asset-item id="fen-model" src="fen.glb"></a-asset-item>
<video id="fen-video" autoplay loop muted playsinline crossorigin="anonymous" webkit-playsinline></video>
</a-assets>
<a-marker-camera preset="pattern" type="pattern" url="pattern-movar.patt">
<a-entity
gltf-model="#fen-model"
scale="0.02 0.02 0.02"
animation-mixer
></a-entity>
<a-video
id="video-entity"
src="#fen-video"
width="9"
height="16"
position="0 0 0.1"
material="transparent: true"
rotation="-90 0 0" <!-- ビデオを縦向きにするために-90度回転 -->
></a-video>
</a-marker-camera>
<a-entity camera></a-entity>
</a-scene>
<script>
window.addEventListener('DOMContentLoaded', function () {
var video = document.getElementById('fen-video');
var videoEntity = document.getElementById('video-entity');
var scene = document.querySelector('a-scene');
var marker = document.querySelector('a-marker-camera');
scene.addEventListener('loaded', function () {
video.src = 'fen_13.mp4';
video.play();
// ビデオの読み込みが完了してからサイズを変更する
video.addEventListener('loadedmetadata', function () {
var videoWidth = video.videoWidth;
var videoHeight = video.videoHeight;
// アスペクト比を保ったまま、縦長の長方形に表示する
var aspectRatio = videoWidth / videoHeight;
var scale = 0.07;
if (aspectRatio > 1) {
scale = 0.07 / aspectRatio;
}
videoEntity.object3D.scale.set(scale, scale, scale);
});
});
// マーカーが検出されない場合にオブジェクトとビデオを非表示にする
marker.addEventListener('markerLost', function () {
video.pause();
videoEntity.setAttribute('visible', 'false');
});
// マーカーが再度検出された場合にオブジェクトとビデオを表示する
marker.addEventListener('markerFound', function () {
video.play();
videoEntity.setAttribute('visible', 'true');
});
});
</script>
</body>
</html>
movからmp4変換サイト https://convertio.co/ja/mov-mp4/ |
| 抜粋 | |
| 脚注 |
自分のサーバーにarというフォルダーを作り
その中に上記のindex.htmlと自分のムービー（mp4)をアップロードしてください
そのindex.htmlのアドレスでQRコードを作るためURLをコピーし
このサイトに行ってください
https://www.k-art-factory.com/2020/qrcordreader.html