aframe-speech-command-component
Version:
Speech Command component for A-Frame.
93 lines (90 loc) • 5.35 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>360° Image Gallery</title>
<meta name="description" content="360° Image Gallery - A-Frame">
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.5.0/annyang.min.js"></script>
<script src="https://rawgit.com/aframevr/aframe/917c06889ee1f3f79b7b1bbd9eab9815f9512503/dist/aframe.min.js"></script>
<script src="build.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.0.1"></script>
<script src="components/set-image.js"></script>
<script src="components/update-raycaster.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="city" crossorigin="anonymous" src="images/city.jpg">
<img id="city-thumb" crossorigin="anonymous" src="images/thumb-city.jpg">
<img id="cubes-thumb" crossorigin="anonymous" src="images/thumb-cubes.jpg">
<img id="sechelt-thumb" crossorigin="anonymous" src="images/thumb-sechelt.jpg">
<img id="cubes" crossorigin="anonymous" src="images/cubes.jpg">
<img id="sechelt" crossorigin="anonymous" src="images/sechelt.jpg">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
<!-- Image link template to be reused. -->
<!-- TODO: find out why templates aren't working -->
<script id="link" type="text/nunjucks">
<a-plane class="link" 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"
update-raycaster="#cursor"></a-plane>
</script>
</a-assets>
<a-entity id="annyang" annyang-speech-recognition></a-entity>
<!-- 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="0 -1 -4" visible="false"
speech-command__show="command: show menu; type: attribute; attribute: visible; value: true;"
speech-command__hide="command: hide menu; type: attribute; attribute: visible; value: false;">
<a-plane class="link" height="1" width="1"
material="shader: flat; src: #cubes-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: #cubes"
sound="on: click; src: #click-sound"
speech-command="command: go to cubes; type: attribute; targetElement: #image-360; attribute: src; value: #cubes;"
update-raycaster="#cursor"></a-plane>
<a-plane class="link" height="1" width="1"
material="shader: flat; src: #city-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: #city"
sound="on: click; src: #click-sound"
speech-command="command: go to city; type: attribute; targetElement: #image-360; attribute: src; value: #city;"
update-raycaster="#cursor"></a-plane>
<a-plane class="link" height="1" width="1"
material="shader: flat; src: #sechelt-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: #sechelt"
sound="on: click; src: #click-sound"
speech-command="command: go to lake; type: attribute; targetElement: #image-360; attribute: src; value: #sechelt;"
update-raycaster="#cursor"></a-plane>
</a-entity>
<!-- Camera + cursor. -->
<a-entity camera look-controls>
<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"
raycaster="objects: .link"></a-cursor>
</a-entity>
</a-scene>
</body>
</html>