Hello I Want To Augment Two Video With Two Different Marker With Different Pattern Ratio - One with 0.50 Ratio And Another With 0.75 Ratio . If I Augment With Hiro And Kanji Then Its Working But If I augment with different pattern ration then its not working. As per the research i did, got something like defining the patternRatio in a-scene -
Tag -
<a-scene arjs="patternRatio: 0.75">
.By Default PatternRation Will Be 0.50 .But as per my requirement I have 2 Different Pattern Ratio. So How To Define Two Different Values.
Pattern One (Hiro) - HIRO,
Pattern Two (Custom QR Code) With Ratio 0.75 - PATTERN,
Patt File For Custom QR Code - Pattern,
Please Edit The Code In GLITCH - AFRAME IMPLEMENTATION CODE,
Video 1 - VID 1 Video 2 - VID 2
My Implementation -
console.log("Hi Aframe");
// Vid Component
AFRAME.registerComponent("vidhandler", {
schema: {
target: { type: "string" }
},
init: function() {
this.videoAsset = document.querySelectorAll(this.data.target);
},
tick: function() {
if (this.el.object3D.visible == true) {
if (!this.toggle) {
this.toggle = true;
for (let i = 0; i < this.videoAsset.length; i++) {
this.videoAsset[i].play();
console.log(this.videoAsset[i]);
}
}
} else {
if (this.toggle) {
for (let i = 0; i < this.videoAsset.length; i++) {
this.videoAsset[i].pause();
}
this.toggle = false;
}
}
}
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Aframe Multi Pattern Ratio</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://aframe.io/releases/1.0.1/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.4/aframe/build/aframe-ar.js"></script>
<script
type="text/javascript"
src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"
></script>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js"></script>
</head>
<body>
<!-- Marker Border patternRatio:0.75 -->
<a-scene
vr-mode-ui="enabled: false"
artoolkit="sourceType: webcam; detectionMode: mono; maxDetectionRate: 90;"
arjs="debugUIEnabled: false;detectionMode: mono_and_matrix; matrixCodeType: 3x3;"
>
<a-assets>
<video
muted
id="vid1"
response-type="arraybuffer"
loop="true"
crossorigin
webkit-playsinline
playsinline
controls
>
<source
src="https://cdn.glitch.com/e85b316e-eed9-4e96-814e-d12630bc00df%2Fvid_pointing_green.mp4?v=1577421630965"
type="video/mp4"
/>
</video>
<video
muted
id="vid2"
response-type="arraybuffer"
loop="true"
crossorigin
webkit-playsinline
playsinline
controls
>
<source
src="https://cdn.glitch.com/e85b316e-eed9-4e96-814e-d12630bc00df%2Fvid_pointing_blue.mp4?v=1577421651559"
type="video/mp4"
/>
</video>
</a-assets>
<!-- Marker Border Pattern Hiro -->
<a-marker type="pattern" preset="hiro" vidhandler="target: #vid1">
<a-entity position="0 0 0">
<a-video
width="2"
height="2"
rotation="-90 0 0"
material="transparent:true;shader:flat;side:double;src:#vid1"
></a-video>
</a-entity>
</a-marker>
<!-- Pattern Ration 0.75 -->
<a-marker
type="pattern"
url="https://cdn.glitch.com/e85b316e-eed9-4e96-814e-d12630bc00df%2Fpattern-qr-code.patt?v=1577440081157"
vidhandler="target: #vid2"
>
<a-entity position="0 0 0">
<a-video
width="2"
height="2"
rotation="-90 0 0"
material="transparent:true;shader:flat;side:double;src:#vid2"
></a-video>
</a-entity>
</a-marker>
<a-entity camera>
<a-entity cursor="rayOrigin: mouse;fuse: false;"></a-entity>
</a-entity>
</a-scene>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire