Home > OS >  AR.js animation doesn'i initialize
AR.js animation doesn'i initialize

Time:10-20

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 -->
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related