Question

我使用A-Frame创建了VR Photo Galley。您可以通过凝视单击按钮并更改背景照片可见性。它工作正常，但代码非常令人毛骨悚然，尤其是JS。我重用了可以通过功能优化的代码，但我无法理解。 https://codepen.io/atKo/pen/ggZgXJ

感谢您的帮助！

<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是一个围绕组件构建的框架，它是可组合的，可重用的代码模块，可以以声明方式使用。

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

该文档包含一个指南，用于完成您正在做的事情（图片库），显示构建代码的正确，干净的方式：

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

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

1 个答案: