テンプレートを利用して動画を２画面表示できるようになった
これまでMinArを利用してイメージトラッキング後、テンプレートどおりの動画再生はできたが、自由に動画を配置することができなかった
テンプレートの構造がなんとなく理解でき、自由な位置に配置可能となった
https://mindar-2videos.glitch.me/
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/dist/mindar-image-aframe.prod.js"></script>
<script src="tow_video2.js"></script>
<link rel="stylesheet" href="https://jirochanf.github.io/card/assets/webar.css">
</head>
<body>
<div class="example-container">
<div id="example-scanning-overlay" class="hidden">
<div class="inner">
<img src="https://jirochanf.github.io/card/assets/overlay_mind3.jpg"/> <!-- オーバーレイ画像定義 -->
<div class="scanline"></div>
</div>
</div>
<a-scene mindar-image="imageTargetSrc: https://jirochanf.github.io/card/assets/targets3.mind; showStats: false; uiScanning: #example-scanning-overlay;" embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<img id="card" src="https://jirochanf.github.io/card//assets/card31.png" />
<img id="icon-web" src="https://jirochanf.github.io/card//assets/web.png" />
<img id="icon-location" src="https://jirochanf.github.io/card/assets/youtube.png" />
<img id="icon-profile" src="https://jirochanf.github.io/card/assets/kao2.png" />
<img id="icon-phone" src="https://jirochanf.github.io/card/assets/phone.png" />
<img id="icon-email" src="https://jirochanf.github.io/card/assets/email.png" />
<img id="icon-play" src="https://jirochanf.github.io/card/assets/play.png" />
<img id="icon-left" src="https://jirochanf.github.io/card/assets/left.png" />
<img id="icon-right" src="https://jirochanf.github.io/card/assets/right.png" />
<img id="preview" src="https://jirochanf.github.io/card/assets/mind3_prev01.jpg" />
<video id="video-mp4" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video31.mp4"></video>
<video id="video-webm" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video31.webm"></video>
<video id="video-mp41" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video3.mp4"></video>
<video id="video-webm1" autoplay="false" loop="false" src="https://jirochanf.github.io/card/assets/video3.webm"></video>
<img id="namecard" src="https://jirochanf.github.io/card/assets/alubum_mind3_1.jpg" />
<img id="preview2" src="https://jirochanf.github.io/card/assets/preview2.png" />
<img id="preview3" src="https://jirochanf.github.io/card/assets/alubum_mind3_2.jpg" />
<img id="ura" src="https://jirochanf.github.io/card/assets/ura_guide.png" />
<!--3Dmodel-->
<a-asset-item id="avatarModel" src="https://jirochanf.github.io/card/3dmodel/gopro10.gltf"></a-asset-item>
<a-asset-item id="bearModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/band-example/bear/scene.gltf"></a-asset-item>
<a-asset-item id="raccoonModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.5/examples/image-tracking/assets/band-example/raccoon/scene.gltf"></a-asset-item>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: 10000; objects: .clickable">
</a-camera>
<!-- target0 確認後-->
<a-entity id="mytarget" mytarget mindar-image-target="targetIndex: 0">
<a-entity visible="false" id="panel" position="0 0 0">
<!-- 動画表示 -->
<a-entity id="panel-item0">
<a-video id="video-link" webkit-playsinline playsinline width="1" height="0.552" position="0 0 0"></a-video>
<a-image id="preview-button" class="clickable" src="#preview" alpha-test="0.5" position="0 0 0" height="0.552" width="1">
</a-image>
</a-entity>
<!-- スライド -->
<a-entity id="panel-item1" visible="false">
<a-image class="clickable" src="#preview2" alpha-test="0.5" position="0 0 0" height="0.552" width="1"></a-image>
</a-entity>
<a-entity id="panel-item2" visible="false">
<a-image class="clickable" src="#preview3" alpha-test="0.5" position="0 0 0" height="0.552" width="1"></a-image>
</a-entity>
<a-image visible="false" id="left-button" class="clickable" src="#icon-left" position="-0.7 0 0" height="0.15" width="0.15"></a-image>
<a-image visible="false" id="right-button" class="clickable" src="#icon-right" position="0.7 0 0" height="0.15" width="0.15"></a-image>
<a-image visible="false" id="profile-button" class="clickable" src="#icon-profile" position="-0.42 -0.5 0" height="0.15" width="0.15"></a-image>
<a-image visible="false" id="web-button" class="clickable" src="#icon-web" alpha-test="0.5" position="-0.14 -0.5 0" height="0.15" width="0.15"
link="href: https://netken.info/; title: My Home Page;"></a-image>
<a-image visible="false" id="email-button" class="clickable" src="#icon-email" position="0.14 -0.5 0" height="0.15" width="0.15"
link="href: mailto:fujiwara@yomde.net;"></a-image>
<a-image visible="false" id="location-button" class="clickable" src="#icon-location" position="0.42 -0.5 0" height="0.15" width="0.15"
link="href: https://www.youtube.com/channel/UC262c4cdRkfrllw37mpUKOA/videos; title: Senior Travel;"></a-image>
<a-gltf-model id="avatar" rotation="0 0 0" position="-0.4 0.7 0" scale="0.04 0.04 0.04" src="#raccoonModel"
animation="property: position; to: -0.2 0.4 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate"
></a-gltf-model>
</a-entity>
<!-- panel2 表示 -->
<a-entity visible="false" id="panel2" position="0.3 0.3 0" rotation="10 0 0">
<!-- 動画表示 -->
<a-entity id="panel2-item0">
<a-video id="video-link2" webkit-playsinline playsinline width="0.8" height="0.45" position="0.3 0.3 0"></a-video>
<a-image id="preview-button2" class="clickable" src="#preview2" alpha-test="0.5"
position="0.3 0.3 0" height="0.45" width="0.8">
</a-image>
</a-entity>
</a-entity>
</a-entity>
</a-scene>
</div>
</body>
</html>const showInfo = () => {
let y = 0;
const profileButton = document.querySelector("#profile-button");
const webButton = document.querySelector("#web-button");
const emailButton = document.querySelector("#email-button");
const locationButton = document.querySelector("#location-button");
const namecard = document.querySelector("#namecard");
profileButton.setAttribute("visible", true);
setTimeout(() => {
webButton.setAttribute("visible", true);
}, 10);
setTimeout(() => {
emailButton.setAttribute("visible", true);
}, 10);
setTimeout(() => {
locationButton.setAttribute("visible", true);
}, 10);
setTimeout(() => {
namecard.setAttribute("visible", true);
}, 10);
}
const showPortfolio = (done) => {
const portfolio = document.querySelector("#panel");
const LeftButton = document.querySelector("#left-button");
const RightButton = document.querySelector("#right-button");
const PreviewButton = document.querySelector("#preview-button");
const PreviewButton2 = document.querySelector("#preview-button2");
const portfolio2 = document.querySelector("#panel2");
let y = 0;
let currentItem = 0;
portfolio.setAttribute("visible", true);
portfolio2.setAttribute("visible", true);
const showPortfolioItem = (item) => {
for (let i = 0; i <= 2; i++) {
document.querySelector("#panel-item" + i).setAttribute("visible", i === item);
}
}
const showPortfolioItem2 = (item) => {
for (let i = 0; i <= 2; i++) {
document.querySelector("#panel2-item" + i).setAttribute("visible", i === item);
}
}
const id = setInterval(() => {
y += 0.008;
if (y >= 0.6) {
clearInterval(id);
LeftButton.setAttribute("visible", true);
RightButton.setAttribute("visible", true);
LeftButton.addEventListener('click', () => {
currentItem = (currentItem + 1) % 3;
showPortfolioItem(currentItem);
});
RightButton.addEventListener('click', () => {
currentItem = (currentItem - 1 + 3) % 3;
showPortfolioItem(currentItem);
});
PreviewButton.addEventListener('click', () => {
PreviewButton.setAttribute("visible", false);
const testVideo = document.createElement( "video" );
const canplayWebm = testVideo.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
if (canplayWebm == "") {
document.querySelector("#video-link").setAttribute("src", "#video-mp4");
document.querySelector("#video-mp4").play();
} else {
document.querySelector("#video-link").setAttribute("src", "#video-webm");
document.querySelector("#video-webm").play();
}
});
PreviewButton2.addEventListener('click', () => {
PreviewButton2.setAttribute("visible", false);
const testVideo = document.createElement( "video" );
const canplayWebm = testVideo.canPlayType( 'video/webm; codecs="vp8, vorbis"' );
if (canplayWebm == "") {
document.querySelector("#video-link2").setAttribute("src", "#video-mp41");
document.querySelector("#video-mp4").play();
} else {
document.querySelector("#video-link2").setAttribute("src", "#video-webm1");
document.querySelector("#video-webm").play();
}
});
setTimeout(() => {
done();
}, 50);
}
portfolio.setAttribute("position", "0 " + 0 + " -0.01");
}, 10);
}
// Aframeでターゲット0を摘出
AFRAME.registerComponent('mytarget', {
init: function () {
this.el.addEventListener('targetFound', event => {
console.log("target found");
// showAvatar(() => {
setTimeout(() => {
showPortfolio(() => {
setTimeout(() => {
showInfo();
}, 600);
});
}, 600);
});
// });
this.el.addEventListener('targetLost', event => {
console.log("target found");
});
//this.el.emit('targetFound');
}
});