如何使用A-Frame优化重用的JS代码？

Question

I have created VR Photo Galley using A-Frame. 我已经使用A-Frame创建了VR Photo Galley。 You can click the buttons by gaze and change the background photo visibility. 您可以通过凝视单击按钮并更改背景照片的可见性。 It works fine, but the code is pretty creepy, especially JS. 它工作正常，但代码非常令人毛骨悚然，尤其是JS。 I have reused code that can be optimized with function, but I can't get how. 我重用了可以通过功能优化的代码，但我不知道如何使用。 https://codepen.io/atKo/pen/ggZgXJ https://codepen.io/atKo/pen/ggZgXJ

Thanks for help! 感谢帮助！

<html>

<head>
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-layout-component@4.0.1/dist/aframe-layout-component.min.js"></script>
</head>

<body>
    <a-scene>
        <a-assets> 
            <img src="img/sea.jpg" id="sea"> 
            <img src="img/lake.jpg" id="lake">
            <img src="img/river.jpg" id="river">
            <img src="img/sea_prev.png" id="sea_prev">
            <img src="img/lake_prev.png" id="lake_prev">
            <img src="img/river_prev.png" id="river_prev">
            <a-mixin id="preview" scale="1.25 1 1" height="3.0" radius="2" opacity="0.9" scale-on-mouseenter="to: 1.5 1.2 1.2"></a-mixin>
            <a-mixin id="scale_up" attribute="scale" begin="mouseenter" dur="300" to="1.5 1.2 1.2"></a-mixin>
            <a-mixin id="scale_down" attribute="scale" begin="mouseleave" dur="300" to="1.25 1 1"></a-mixin>
        </a-assets>
        <a-entity position="0 1.78 0">
            <a-entity camera look-controls wasd-controls>
                <a-entity position="0 0 -1.25" rotation="0 0 0" geometry="primitive: ring; radiusOuter: 0.30;
                          radiusInner: 0.20;" material="color: black; shader: flat" cursor="maxDistance: 30; fuse: true">
                    <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="0.3 0.3 0.3" dur="150"></a-animation>
                    <a-animation begin="fusing" easing="ease-in" attribute="scale" fill="forwards" from="0.3 0.3 0.3" to="0.1 0.1 0.1" dur="1500"></a-animation>
                </a-entity>
            </a-entity>
        </a-entity> 
        <a-curvedimage mixin="preview" theta-length="35" id="sea_btn" material="src: #sea_prev" position="-0.5 2 -1.20" rotation="0 -160 0">
                <a-animation mixin="scale_up"></a-animation>
                <a-animation mixin="scale_down"></a-animation>         
        </a-curvedimage>
        <a-curvedimage mixin="preview" theta-length="35" id="lake_btn" material="src: #lake_prev" position="0.22 2 -1.25" rotation="0 166 0">
                <a-animation mixin="scale_up"></a-animation>
                <a-animation mixin="scale_down"></a-animation>         
        </a-curvedimage>
        <a-curvedimage mixin="preview" theta-length="35" id="river_btn" material="src: #river_prev" position="0.6 2 -0.90" rotation="0 126 0">
                <a-animation mixin="scale_up"></a-animation>
                <a-animation mixin="scale_down"></a-animation>        
        </a-curvedimage>
        <a-light type="ambient" color="white" position="-1 1 0"></a-light>
        <a-entity id="sea_back" visible="true">
            <a-sky src="#sea"></a-sky>
        </a-entity>
        <a-entity id="lake_back" visible="false">
            <a-sky src="#lake"></a-sky>
        </a-entity>
        <a-entity id="river_back" visible="false">
            <a-sky src="#river"></a-sky>
        </a-entity>
    </a-scene>
    <script type="text/javascript">
        document.querySelector('#sea_btn').addEventListener('click', function () {
            document.getElementById('sea_back').setAttribute('visible', 'true')
            document.getElementById('lake_back').setAttribute('visible', 'false')
            document.getElementById('river_back').setAttribute('visible', 'false')
        });
        document.querySelector('#lake_btn').addEventListener('click', function () {
            document.getElementById('sea_back').setAttribute('visible', 'false')
            document.getElementById('lake_back').setAttribute('visible', 'true')
            document.getElementById('river_back').setAttribute('visible', 'false')
        });
        document.querySelector('#river_btn').addEventListener('click', function () {
            document.getElementById('sea_back').setAttribute('visible', 'false')
            document.getElementById('lake_back').setAttribute('visible', 'false')
            document.getElementById('river_back').setAttribute('visible', 'true')
        });


          AFRAME.registerComponent('scale-on-mouseenter', {
    schema: {
      to: {default: '2.5 2.5 2.5'}
    },
    init: function () {
      var data = this.data;
      this.el.addEventListener('click', function () {
        this.setAttribute('scale', data.to);
      });
    }
  });
    </script>

    <body>

</html>

Answer 1

A-Frame is a framework built around the premise of Components, which are composable, reusable modules of code that can be used declaratively. A-Frame是围绕组件的前提构建的框架，这些组件是可声明的可组合，可重用的代码模块。

https://aframe.io/docs/0.5.0/guides/writing-a-component.html https://aframe.io/docs/0.5.0/guides/writing-a-component.html

The documentation contains a guide to do exactly what you are doing (image gallery) showing a proper, clean way to structure code: 该文档包含一个指南，可以准确地执行您正在做的事情（图片库），其中显示了一种正确，干净的结构化代码方式：

https://aframe.io/docs/0.5.0/guides/building-with-components.html https://aframe.io/docs/0.5.0/guides/building-with-components.html

如何使用A-Frame优化重用的JS代码？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-02-13 01:01:57

如何使用A-Frame优化重用的JS代码？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-02-13 01:01:57

解决方案1
0 已采纳 2017-02-13 01:01:57