问题描述:

I have created VR Photo Galley using A-Frame. You can click the buttons by gaze and change the background photo visibility. It works fine, but the code is pretty creepy, especially JS. I have reused code that can be optimized with function, but I can't get how. 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/[email protected]/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>

网友答案:

A-Frame is a framework built around the premise of Components, which are composable, reusable modules of code that can be used declaratively.

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

相关阅读:
Top