aframe实现增强现实AR找鸡蛋互动小游戏代码-html代码-BFW代码库

aframe实现增强现实AR找鸡蛋互动小游戏代码

代码语言：html

所属分类：其他

代码描述：aframe实现增强现实AR找鸡蛋互动小游戏代码，将中心圆点对准鸡蛋点击就能打开鸡蛋了。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-0.5.0.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-animation-component.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-event-set-component.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-layout-component.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-html-shader.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-gif-shader.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aframe-look-at-component.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/adapter.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.1.2.0.js"></script>

    <script>
        //请在bfwstudio中运行预览
            /* global AFRAME */
            AFRAME.registerComponent('hide-on-click', {
                dependencies: ['raycaster'],
                schema: {
                    target: {type: 'selector'}
                },
                init: function () {
                    var data = this.data;
                    var el = this.el;
                    el.addEventListener('click', function () {
                        el.setAttribute('visible', false);
                        data.target.setAttribute('visible', true);
                        setTimeout(function(){
                            alert('恭喜您获得一只鸡！');
                            //window.location.reload();
                        },3000);
                    });
                }
            });
    </script>
    <style>
        #textToDisplay {
            width: 300px;
            height: 300px;
            top: 20px;
            position: absolute;
            z-index: -1;
            background: transparent;
        }
        #videoBg{
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            z-index: -1;
        }
    </style>
</head>

<body>
    <div id="textToDisplay"><img src="/asset/egg.png" alt=""></div>
    <a-scene>
        <!--<a-sky src="https://c1.staticflickr.com/8/7376/16218590470_468084c950_h.jpg"></a-sky>-->
        <a-sky id="sky" color="#85b1f7" opacity="0.2"></a-sky>

        <a-entity hide-on-click="target:#chickenAnimate">
            <a-entity id="default_egg" geometry="primitive:plane;width:2;height:2;" look-at="[camera]" position="-3 2 -10" material="shader:html;target:#textToDisplay;transparent:true;fps:0;">
            </a-entity>
        </a-entity>
        <a-entity id="chickenAnimate" visible="false">
            <a-entity id="animate_egg" geometry="primitive:plane;width:2;height:2;" look-at=&qu.........完整代码请登录后点击上方下载按钮下载查看