Only the first animation(attribute "animation__1_0_f1" in code) work.
And without the event 'onclick' doesn't initialize alone.
The size and position doesn't same in the unity project
Tutorial utilized:
https://github.com/taylordigital13/ARjs_Unity
https://www.youtube.com/watch?v=PYs_Y1U2_DI&feature=youtu.be
<!-- BEGIN: Top HTML -->
<!DOCTYPE html>
<!-- include aframe -->
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<!-- include ar.js -->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.js"></script>
<!-- to load .ply model -->
<script src="https://rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.loaders.min.js"></script>
<!-- END: Top HTML -->
<!-- BEGIN: Unity Compiled Events -->
<script>
var markerFound = 0;
AFRAME.registerComponent('button', {
init: function () {
var elem = document.documentElement;
var marker = document.querySelector("#marker");
var fullbutton = document.querySelector("#fullscreen");
marker.addEventListener("markerFound", function (evt) {
markerFound = 1;
});
marker.addEventListener("markerLost", function (evt) {
markerFound = 0;
});
fullbutton.addEventListener("click", function (evt) {
if (fullscreen == 0) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen();
}
fullbutton.setAttribute("src", "../exit_fullscreen.png");
fullscreen = 1;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
fullbutton.setAttribute("src", "../fullscreen.png");
fullscreen = 0;
}
});
},
tick: function (totalTime, deltaTime) {
var dTime = deltaTime / 1000;
if (markerFound == 1) {
}
function bezierEvaluate(p0, p1, p2, p3, t) {
var u = (1 - t);
var uu = u * u;
var uuu = u * u * u;
var tt = t * t;
var ttt = t * t * t;
//B(t) = (1-t)^3*P0 3*(1-t)^2*t*P1 3*(1-t)*t^2*P2 t^3*P3 , 0 < t < 1
return (uuu * p0 3 * uu * t * p1 3 * u * tt * p2 ttt * p3);
}
function bezierPath(p0, p1, p2, p3, t) {
return new THREE.Vector3(
bezierEvaluate(p0.x, p1.x, p2.x, p3.x, t),
bezierEvaluate(p0.y, p1.y, p2.y, p3.y, t),
bezierEvaluate(p0.z, p1.z, p2.z, p3.z, t)
);
}
}
});
</script>
<!-- END: Unity Compiled Events -->
<!-- BEGIN: Middle HTML -->
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<div style='position: absolute; bottom: 5px; left: 30px; width:100%; text-align: right; z-index: 1;'>
<input type="image" id="fullscreen" src="../fullscreen.png"
style='position: absolute; bottom: 0px; right: 35px;'>
</input>
</div>
<!-- <a-scene embedded arjs='debugUIEnabled: false; sourceType: video; sourceUrl:../../data/videos/headtracking.mp4;'> -->
<a-scene embedded arjs='debugUIEnabled: false; sourceType: webcam' vr-mode-ui='enabled: false'>
<a-entity id="mouseCursor" cursor="rayOrigin: mouse"
raycaster="objects: .intersectable; useWorldCoordinates: true;"></a-entity>
<!-- END: Middle HTML -->
<!-- BEGIN: Unity Compiled Assets -->
<a-assets>
</a-assets>
<!-- END: Unity Compiled Assets -->
<!-- BEGIN: Add Image Target (marker) -->
<a-marker id="marker" preset="hiro" emitevents="true" button>
<!-- END: Add Image Target (marker) -->
<!-- BEGIN: Unity Compiled Objects -->
<a-plane src="textures/1.png" id="1_0" class="intersectable" width="1" height="1" position="0 -0,125 0,065"
rotation="285 0 0" color="#FFFFFF" transparent=True
animation__1_0_f0=" property: position; to: 0 -0,125 0,065; dur: 0; easing: linear; startEvents: mousedown;"
animation__1_0_f0=" property: rotation; to: 285 0 0; dur: 0; easing: linear; startEvents: mousedown;"
animation__1_0_f0=" property: width; to: 1; dur: 0; easing: linear; startEvents: mousedown;"
animation__1_0_f0=" property: height; to: 1; dur: 0; easing: linear; startEvents: mousedown;"
animation__1_0_f1=" property: position; from: 0 -0,125 0,065; to: 0 0,19 -1,112; dur: 300; easing: linear; startEvents: animationcomplete__1_0_f0, animationcomplete__1_0_f5;"
animation__1_0_f2=" property: position; from: 0 0,19 -1,112; to: 0 0,19 -0,049; dur: 300; easing: linear; startEvents: animationcomplete__1_0_f1;"
animation__1_0_f2=" property: rotation; from: 285 0 0; to: 270 0 0; dur: 300; easing: linear; startEvents: animationcomplete__1_0_f1;"
animation__1_0_f4=" property: position; from: 0 0,19 -0,049; to: 0 0,19 1,76; dur: 600; easing: linear; startEvents: animationcomplete__1_0_f3;"
animation__1_0_f5=" property: position; from: 0 0,19 1,76; to: 0 -0,125 0,065; dur: 3400; easing: linear; startEvents: animationcomplete__1_0_f4;"
animation__1_0_f5=" property: rotation; from: 270 0 0; to: 285 0 0; dur: 3400; easing: linear; startEvents: animationcomplete__1_0_f4;">
</a-plane>
<!-- END: Unity Compiled Objects -->
<!-- BEGIN: Bottom HTML -->
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html><!-- END: Bottom HTML -->CodePudding user response：
The animation id needs to be unique - you have four animations animation__1_0_f0
Here only the first animation works (same ids)
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 0.5 -3" rotation="0 45 0" color="#4CC3D9"
animation__id="property: position; to: 1 1 -3; dur: 500; easing: linear; loop: true"
animation__id="property: rotation; to: 0 360 0; dur: 500; easing: linear; loop: true"></a-box>
</a-scene>Here both of them work (unique ids)
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 0.5 -3" rotation="0 45 0" color="#4CC3D9"
animation__id="property: position; to: 1 1 -3; dur: 500; easing: linear; loop: true"
animation__anotherid="property: rotation; to: 0 360 0; dur: 500; easing: linear; loop: true"></a-box>
</a-scene>