aframe-samples/scene-2.html at master · MrCaro/aframe-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
	<title>Scene 2 - Demo Voice Commans</title>
	<meta name="description" content="A-Frame Examples">
	<script src="js/aframe-master-v1.3.0.min.js"></script>
	<script src="js/aframe-environment-component.min.js"></script>
    <script src="js/link-controls.js"></script>
    <!-- voice commands -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js" integrity="sha512-FRllqoDevM/yUYKzCe8K8qvyou3LAsBLSuKYvLSoAQLo70wWTSU6KSi110dXOpEIW8+ehByraYPC188htrPnjw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./aframe-speech-command-component.js"></script>
</head>

<body>

<!-- cursor activated from mouse position; only intersects objects with "link" component added (the <a-link> tag) -->
<!-- environments featured: default, forest, egypt, goldmine, arches, japan, volcano -->

<a-scene environment="preset: japan;" cursor="rayOrigin: mouse;" raycaster="far: 100; objects: [link];">
	<a-assets>
        <img id="previewForest"   src="images/spherical/forest.jpg">
        <img id="city" crossorigin="anonymous" src="images/border-rainbow-box.png">
        <img id="city-thumb" crossorigin="anonymous" src="images/border-rainbow-box.png">
        <audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
    </a-assets>

<!-- note: raycast issue (link still active) after walking through portal -->

<!-- <a-sphere id="origin" radius="0.25" position="0 0 0" color="white"></a-sphere> -->

<!-- <a-link	position="-4 1.6 -4" rotation="0 40 0"
	href="portal-volcano.html" title="Volcano" image="#previewVolcano"></a-link>

<a-link position="-2 1.6 -5" rotation="0 20 0"
	href="portal-egypt.html" title="Egypt" image="#previewEgypt"></a-link> -->

<a-link position="0 1.6 -6"
	href="scene-3.html" title="Scene 3" image="#previewForest"></a-link>

<!-- <a-link position="2 1.6 -5" rotation="0 -20 0"
	href="portal-arches.html" title="Arches" image="#previewArches"></a-link>

<a-link position="4 1.6 -4" rotation="0 -40 0"
    href="portal-default.html" title="Default" image="#previewDefault"></a-link> -->
    <a-entity id="annyang" annyang-speech-recognition></a-entity>
    <a-entity
        id="menu"
        visible="false"
        position="0 10 0"
        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: #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: next; type: attribute; targetElement: #scene-3; attribute: src; value: #city;"
            update-raycaster="#cursor"
        >
        </a-plane>
    </a-entity>
</a-scene>
</body>
</html>