我需要创建一个VR网站(图库(，在按下拇指时显示360图像。当我按下它时，我希望它显示一些文本，当我单击下一个时，我希望它消失并显示下一个。我已经用jquery和aframe lib尝试过，但它不起作用。
<a-entity class="hideMeNow" text="color:orange; value: I just can't stop it;" opacity="0" position="0 -4 -6.101" rotation="-40 0 0"></a-entity>
<a-entity class="myButtton" id="link" layout="type: line; margin: 1.5" position="0 -4 -6.101" rotation="-40 0 0"><!-- ← -->
<a-entity template="src: #link" data-src="#a1" data-thumb="#antraks"></a-entity>
</a-entity>
就我而言，myButton是一个拇指，应该能够隐藏/显示文本class="hideMeNow"
到目前为止我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image Gallery</title>
<meta name="description" content="360° Image Gallery - A-Frame">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://npmcdn.com/aframe-animation-component@3.0.1"></script>
<script src="https://npmcdn.com/aframe-event-set-component@3.0.1"></script>
<script src="https://npmcdn.com/aframe-layout-component@3.0.1"></script>
<script src="https://npmcdn.com/aframe-template-component@3.1.1"></script>
<script src="components.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".myButton").click(function(){
$(".hideMeNow").hide();
});
//$("#show").click(function(){
// $(".hideMeNow").show();
//});
});
</script>
</head>
<body>
<a-scene>
<a-assets>
<img id="city" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
<img id="city-thumb" crossorigin="anonymous" src="/images/thumbs/thumb-city.jpg">
<!-- my thumbs -->
<img id="antraks" crossorigin="anonymous" src="/images/thumbs/thumb-city_antraks.png">
<img id="botulizem" crossorigin="anonymous" src="/images/thumbs/thumb-city_botulizem.png">
<img id="kampilobakter" crossorigin="anonymous" src="/images/thumbs/thumb-city_kampilobakter.png">
<img id="ešerihija" crossorigin="anonymous" src="/images/thumbs/thumb-city_ešerihija.png">
<img id="fuzobakterija" crossorigin="anonymous" src="/images/thumbs/thumb-city_fuzobakterija.png">
<img id="hemofilus" crossorigin="anonymous" src="/images/thumbs/thumb-city_hemofilus.png">
<img id="klebsiella_pneumoniae" crossorigin="anonymous" src="/images/thumbs/thumb-city_klebsiella_pneumoniae.png">
<img id="kochov_bacil" crossorigin="anonymous" src="/images/thumbs/thumb-city_kochov_bacil.png">
<img id="korinebakterija" crossorigin="anonymous" src="/images/thumbs/thumb-city_korinebakterija.png">
<img id="tetanus" crossorigin="anonymous" src="/images/thumbs/thumb-city_tetanus.png">
<img id="tubercolosis" crossorigin="anonymous" src="/images/thumbs/thumb-city_tubercolosis.png">
<img id="vibrijo" crossorigin="anonymous" src="/images/thumbs/thumb-city_vibrijo.png">
<img id="treonema" crossorigin="anonymous" src="/images/thumbs/thumb-city_treonema.png">
<img id="CLOSTRIDUMPER-FIRINGENS" crossorigin="anonymous" src="/images/thumbs/thumb-city_CLOSTRIDUMPER-FIRINGENS.png">
<img id="gonokok" crossorigin="anonymous" src="/images/thumbs/thumb-city_gonokok.png">
<img id="meningokok" crossorigin="anonymous" src="/images/thumbs/thumb-city_meningokok.png">
<img id="pneimoniae" crossorigin="anonymous" src="/images/thumbs/thumb-city_pneimoniae.png">
<img id="stafilokoki_spp" crossorigin="anonymous" src="/images/thumbs/thumb-city_stafilokoki_spp.png">
<img id="streptokok" crossorigin="anonymous" src="/images/thumbs/thumb-city_streptokok.png">
<img id="tafilokoki" crossorigin="anonymous" src="/images/thumbs/thumb-city_tafilokoki.png">
<!-- #my thumbs -->
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="a1" crossorigin="anonymous" src="/images/vr/bacillus_anthracis.jpg">
<img id="b2" crossorigin="anonymous" src="/images/vr/campylobacter.jpg">
<img id="c3" crossorigin="anonymous" src="/images/vr/clostridium_botulinum.jpg">
<img id="d4" crossorigin="anonymous" src="/images/vr/clostridium_perfringens.jpg">
<img id="e5" crossorigin="anonymous" src="/images/vr/clostridium_tetani.jpg">
<img id="f6" crossorigin="anonymous" src="/images/vr/cobacterium_tuberculosis.jpg">
<img id="g7" crossorigin="anonymous" src="/images/vr/corynebacterium.jpg">
<img id="h8" crossorigin="anonymous" src="/images/vr/escherichia.jpg">
<img id="i9" crossorigin="anonymous" src="/images/vr/fusobacterium.jpg">
<img id="j10" crossorigin="anonymous" src="/images/vr/klebsiella.jpg">
<img id="k11" crossorigin="anonymous" src="/images/vr/mycobacterium_tuberculosis.jpg">
<img id="l12" crossorigin="anonymous" src="/images/vr/neisseria_gonorrhoeae.jpg">
<img id="m13" crossorigin="anonymous" src="/images/vr/neisseria_meningitidis.jpg">
<img id="n14" crossorigin="anonymous" src="/images/vr/staphylococcus.jpg">
<img id="o15" crossorigin="anonymous" src="/images/vr/staphylococcus_spp.jpg">
<img id="p16" crossorigin="anonymous" src="/images/vr/streptococcus.jpg">
<img id="r17" crossorigin="anonymous" src="/images/vr/streptococcus_pneimoniae.jpg">
<img id="s18" crossorigin="anonymous" src="/images/vr/streptococcus_pneumoniae.jpg">
<img id="t19" crossorigin="anonymous" src="/images/vr/treponema_pallidum.jpg">
<img id="u20" crossorigin="anonymous" src="/images/vr/vibrio.jpg">
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1"
set-image="on: click; target: #image-360; src: ${src}"
sound="on: click; src: #click-sound"></a-entity>
</script>
</a-assets>
<!-- 360-degree image. -->
<a-sky id="image-360" radius="10" src="#city"></a-sky>
<!-- Image links. -->
<!-- all thumbs and wallpapers -->
<a-entity class="hideMeNow" text="color:orange; value: I just can't stop it;" opacity="0" position="0 -4 -6.101" rotation="-40 0 0"></a-entity>
<a-entity class="myButtton" id="link" layout="type: line; margin: 1.5" position="0 -4 -6.101" rotation="-40 0 0"><!-- ← -->
<a-entity template="src: #link" data-src="#a1" data-thumb="#antraks"></a-entity>
</a-entity>
<!-- -->
<a-entity id="link" layout="type: line; margin: 1.5" position="0.113 -4 6.203" rotation="-40 -180 0"><!-- ← -->
<a-entity template="src: #link" data-src="#b2" data-thumb="#botulizem"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="-6.101 -4 0" rotation="-40 90 0"><!-- ↑ -->
<a-entity template="src: #link" data-src="#c3" data-thumb="#kampilobakter"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="6.11 -4 0.1" rotation="-40 -87.06 0"><!-- ↓ --> <!-- tale zdle -->
<a-entity template="src: #link" data-src="#d4" data-thumb="#ešerihija"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="-4.984 -4 -3.656" rotation="-40 55.22 0"><!-- 5 45°-->
<a-entity template="src: #link" data-src="#e5" data-thumb="#fuzobakterija"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="1.885 -4 -5.82" rotation="-40 -17.74 0"><!-- <a-entity id="link" layout="type: line; margin: 1.5" position="5 -4 -5" rotation="-40 -45 0"> -->
<a-entity template="src: #link" data-src="#f6" data-thumb="#hemofilus"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="-3.585 -4 5.024" rotation="-40 143.44 0"> <!-- ta -->
<a-entity template="src: #link" data-src="#g7" data-thumb="#klebsiella_pneumoniae"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="3.828 -4 5.012" rotation="-40 -143.1 0"> <!-- <a-entity id="link" layout="type: line; margin: 1.5" position="5 -4 5" rotation="-40 -135 0"> -->
<a-entity template="src: #link" data-src="#h8" data-thumb="#kochov_bacil"></a-entity>
</a-entity>
<!-- base -->
<a-entity id="link" layout="type: line; margin: 1.5" position="-3.579 -4 -5.027" rotation="-40 36.44 0">
<a-entity template="src: #link" data-src="#i9" data-thumb="#korinebakterija"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="-5.804 -4 -1.935" rotation="-40 70.22 0">
<a-entity template="src: #link" data-src="#j10" data-thumb="#tetanus"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="-1.842 -4 -5.864" rotation="-40 16.16 0">
<a-entity template="src: #link" data-src="#k11" data-thumb="#tubercolosis"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="3.559 -4 -4.924" rotation="-40 -34.78 0">
<a-entity template="src: #link" data-src="#l12" data-thumb="#vibrijo"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="4.9 -4 -3.567" rotation="-40 -55.02 0">
<a-entity template="src: #link" data-src="#m13" data-thumb="#treonema"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="5.723 -4 -1.84" rotation="-40 -72.72 0">
<a-entity template="src: #link" data-src="#n14" data-thumb="#CLOSTRIDUMPER-FIRINGENS"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="-5.727 -4 1.879" rotation="-40 107.91 0">
<a-entity template="src: #link" data-src="#o15" data-thumb="#gonokok"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="-4.935 -4 3.616" rotation="-40 124.94 0"><!-- <a-entity id="link" layout="type: line; margin: 1.5" position="-4.975 -4 3.520" rotation="-40 124.94 0"> -->
<a-entity template="src: #link" data-src="#p16" data-thumb="#meningokok"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="-1.796 -4 5.894" rotation="-40 163.1 0"><!-- <a-entity id="link" layout="type: line; margin: 1.5" position="-4.975 -4 3.520" rotation="-40 124.94 0"> -->
<a-entity template="src: #link" data-src="#r17" data-thumb="#pneimoniae"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="2.052 -4 5.942" rotation="-40 197.74 0"><!-- <a-entity id="link" layout="type: line; margin: 1.5" position="-4.975 -4 3.520" rotation="-40 124.94 0"> -->
<a-entity template="src: #link" data-src="#s18" data-thumb="#stafilokoki_spp"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="5.152 -4 3.533" rotation="-40 236.58 0"><!-- <a-entity id="link" layout="type: line; margin: 1.5" position="-4.975 -4 3.520" rotation="-40 124.94 0"> -->
<a-entity template="src: #link" data-src="#t19" data-thumb="#streptokok"></a-entity>
</a-entity>
<a-entity id="link" layout="type: line; margin: 1.5" position="5.945 -4 1.858" rotation="-40 253.96 0"><!-- <a-entity id="link" layout="type: line; margin: 1.5" position="-4.975 -4 3.520" rotation="-40 124.94 0"> -->
<a-entity template="src: #link" data-src="#u20" data-thumb="#tafilokoki"></a-entity>
</a-entity>
<!-- text in vr -->
<!-- n new line material="color: grey"
<a-entity
position="0 0 -6"
text=" text.align:center; color:#33ccff; width: 4; value: 1-widendefault."></a-entity>
-->
<!-- Camera + cursor. -->
<a-entity camera look-controls position="0 0 0">
<a-cursor id="cursor"
position="0 0 -1"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: #E41E9B"
event-set__2="_event: mouseleave; color: #00CCCC"
fuse="true"
raycaster="objects: .link">
</a-cursor>
</a-entity>
</a-scene>
</body>
</html>
我认为在这种情况下你不能使用 jQuery 的隐藏方法，因为你试图访问一个 a 帧实体而不是 dom 元素。
您可以尝试这样的事情：
<script>
$(document).ready(function(){
var button = document.querySelector('.myButtton');
var hide = document.querySelector('.hideMeNow');
button.addEventListener('click', function(e) {
hide.setAttribute('visible', false)
})
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".myButtton").click(function(){
$('#hideMeNow').attr('visible', 'false');
});
});
</script>
您可以为您的 id 添加属性，例如类。