A-Frame事件交互

特性

👓 简化VR制作: 只需要引入 script 标签 和 a-scene.
A-Frame 将自动生成3D渲染的样板代码，VR相关设置和缺省的交互控制。不需要安装任何东西也无需编译构建。
❤️ 声明式HTML: HTML很容易阅读，理解和
复制粘贴。基于HTML，A-Frame使得每个人都可以轻松访问：
网站开发者，虚拟现实爱好者，艺术家，设计师，教育家，制造商以及孩子们.
🌐 跨平台VR: 构建能兼容主流头显设备的VR应用程序，如HTC Vive,
Rift, Daydream, GearVR, 和 谷歌Cardboard，乃至在普通电脑和手机上运行。
🔌 实体-组件架构: A-Frame 基于强大的
three.js 框架, 同时提供声明式、组件化、可复用的
实体组件（entity-component）结构。HTML只是冰山的一角，
开发者可以自由的使用JavaScript、DOM API，Three.js，WebVR，和
WebGL。
⚡️ 高性能: A-Frame 从底层对WebVR做了优化，尽管A-Frame使用DOM，但其元素并不接触浏览器的布局引擎。3D
对象的更新全部在低开销内存中通过单个 requestAnimationFrame 来调用，甚至能够像本地应用一样来运行 (90+ FPS)。
🔨 工具无关性: 由于是构建在HTML之上，所以 A-Frame 和大多数开发库、框架和工具如
React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery 兼容。
🔍 可视化检测工具: A-Frame 提供一个便捷的内置3D可视化检测工具。打开任意的A-Frame场景，敲击 + + i 组合键，将切换到3D元素检测模式。

handle-events事件

<a-box id="box2" src="#sky-bg" position="2 5 -5" rotation="0 45 45" scale="1 1 1"
animation__position="property: object3D.position.y; to: 2.2; dir: alternate; dur: 1500; loop: true" handle-events></a-box>

log事件

<a-entity log="Hello A-Frame">
            <a-entity position="2 2 -10" geometry="primitive: sphere" material="color: red"></a-entity>
            <a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 0" repeat="indefinite">
            </a-animation>
        </a-entity>

hide-on-click事件

 <a-box id="box" hide-on-click="target:#box2" src="#sky-bg" position="0 2 -5" rotation="0 45 45" scale="1 1 1"
            animation__position="property: object3D.position.y; to: 2.2; dir: alternate; dur: 1500; loop: true">
        </a-box>

    <script>
        //注册隐藏事件
        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 () {
                    //     window.location.reload();
                    // }, 5000);
                });
            }
        });
        //注册log事件
        AFRAME.registerComponent('log', {
            schema: { type: 'string' },
            init: function () {
                var stringLog = this.data;
                console.log(stringLog);
            }
        })
        AFRAME.registerComponent('handle-events', {
            init: function () {
                var el = this.el;
                el.addEventListener('mouseenter', function () {
                    el.setAttribute('color', '#24CAFF');
                });
                el.addEventListener('mouseleave', function () {
                    el.setAttribute('color', '#EF2D5E');
                });
                el.addEventListener('click', function () {
                    el.setAttribute('scale', {
                        x: 2,
                        y: 1,
                        z: 2
                    });
                });
            }
        });
    </script>