aframe cursor not triggering when merging imagegallery and basic scene tutorial
Question
I am new to a-frame, been going through the tutorials of basic scene and image gallery, when I tried to merge two codes together, I could not trigger the Basic Scene's a-box's animation. the box is not picking up the mouseenter mouseleave and click from my cursor. However, my image gallery works fine. Please advice. Appreciate your help.
<!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.7.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/set-image.js"></script>
<meta name="apple-mobile-web-app-capable"/>
</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="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
<img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
<img id="sechelt-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<img id="cubes" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
<img id="sechelt" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<img id="test" crossorigin="anonymous" src="img/1beachdemo.jpg">
<!--basic scene asset -->
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"/>
<!--basic scene -->
<script id="box" type="text/html">
<a-entity class="box"
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"
sound="on: click; src: #click-sound"></a-entity>
</script>
<!-- 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};side:double"
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. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="-1.5 -1 -4">
<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
<a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
<a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
</a-entity>
<a-entity id="links" layout="type: line; margin: 1.5" position="-1 -2.5 4" rotation="-85 180 0">
<a-entity template="src: #link" data-src="#test" data-thumb="#cubes-thumb"></a-entity>
</a-entity>
<!--basic scene insert need help here. mouse event here could not be trigger-->
<a-entity id="box">
<a-box src="#boxTexture" position="0 2 -5" scale="2 2 2" rotation="0 45 45">
<a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000" repeat="indefinite"></a-animation>
<a-animation attribute="scale" begin="mouseenter" dur="200" to="2.3 2.3 2.3"></a-animation>
<a-animation attribute="scale" begin="mouseleave" dur="200" to="2 2 2"></a-animation>
<a-animation attribute="rotation" begin="click" dur="2000" to=" 360 405 45"></a-animation>
</a-box>
</a-entity>
<!-- Camera + cursor. -->
<a-entity camera look-controls wasd-controls position="0 0 1" rotation="0 0 0">
<a-cursor id="cursor"
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: springgreen"
event-set__2="_event: mouseleave; color: black"
fuse="true"
raycaster="objects: .link"></a-cursor>
</a-entity>
<!--basic scene
<a-camera>
<a-cursor color="lime"></a-cursor>
</a-camera>
-->
</a-scene>
</body>
</html>
1 answers
solution1
0 ACCPTED 2017-10-31 09:30:04
For starters, You have two "box" id's, and two "links" id's.
The id attribute is supposed to be a unique signature. If You want to have a more 'common' handle, use the class attribute .
Second of all, Your raycaster has a whitelist. It's supposed to work on any entity with the .link class attribute. The box is not having the .link class, so its not triggered.
Either add the 'link' class to the box (which could be misleading in a long run), or add the box to the whitelist.
<a-box class="link">
or
<a-box class="clickable">
(.....)
raycaster="objects: .link .clickable"></a-cursor>
Try to analize what you are copy pasting, its rarely a good idea to merge two pieces of code by simply copying it one onto another.
I've changed it, and it seems to be working.
live here .
code here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.