-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
148 lines (134 loc) · 6.88 KB
/
index.html
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<html>
<head>
<meta charset="utf-8" />
<title>Basic Example — AFrame HTML</title>
<script>
// WebXR requires https: to work so ensure redirected if needed.
if (location.hostname !== 'localhost' && window.location.protocol === 'http:') window.location.protocol = 'https:';
</script>
<meta name="description" content="Basic Example — AFrame HTML" />
<style>
body {
font-size: 16px;
}
* {
box-sizing: border-box;
}
#dom-overlay {
font-family: Sans-Serif;
color: white;
}
#dom-overlay .overlay-footer {
background: #00000066;
padding: 1em;
margin: 0;
position:absolute;
inset:auto 0 0 0;
}
</style>
<script src="aframe-master.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/handy-controls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/magnet-helpers.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-environment-component.min.js"></script>
<script src="build/aframe-html.js"></script>
</head>
<body>
<a-scene
webxr="overlayElement:#dom-overlay;"
reflection="directionalLight:#dirlight;"
renderer="alpha:true;physicallyCorrectLights:true;colorManagement:true;exposure:1;toneMapping:ACESFilmic;"
gltf-model="dracoDecoderPath: https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/draco/gltf/;"
shadow="type: pcfsoft"
cursor="rayOrigin: mouse" raycaster="objects: [html]; interval:100;"
>
<a-assets>
<a-mixin id="blink" blink-controls="cameraRig: #cameraRig; teleportOrigin: #head; collisionEntities:.navmesh;"></a-mixin>
</a-assets>
<a-sphere color="black" radius="0.01" id="cursor" material="shader:flat"></a-sphere>
<a-entity id="cameraRig" spawn-in-circle="radius:3">
<!-- camera -->
<a-entity class="avatar-head" camera="near:0.01;" look-controls="pointerLockEnabled: false"
wasd-controls="acceleration:20;" simple-navmesh-constraint="navmesh:.navmesh;fall:0.5;height:1.65;"
position="0 1.65 0"></a-entity>
<!-- Hand tracking -->
<a-entity handy-controls="materialOverride:both;" material="color:gold;metalness:1;roughness:0;">
<!-- These also do teleportaion for Blink controls in VR -->
<!-- These are present for hand tracking but hands don't have joysticks so do nothing -->
<a-entity data-right="ray" mixin="blink" cursor raycaster="showLine: true; far: 100; lineColor: red; objects: [html]; interval:100;"></a-entity>
<a-entity data-left="ray" mixin="blink" cursor raycaster="showLine: true; far: 100; lineColor: red; objects: [html]; interval:100;"></a-entity>
<!-- Use the finger tips for teleporting when the user points in VR with hand tracking -->
<a-entity data-right="index-finger-tip" mixin="blink"
blink-controls="startEvents:pose_point;cancelEvents:pose_cancel_point;endEvents:pose_point_fuseLong;">
</a-entity>
<a-entity data-left="index-finger-tip" mixin="blink"
blink-controls="startEvents:pose_point;cancelEvents:pose_cancel_point;endEvents:pose_point_fuseLong;">
</a-entity>
<!-- These get drawn towards grabable objects, moving the whole hand and the attached elements-->
<a-entity id="left-magnet" position="0 0.6 0" class="avatar-hand-left" data-left="grip"
data-magnet="magnet-left"
grab-magnet-target="startEvents:squeezestart,pose_fist;stopEvents:pose_flat_fuseShort,squeezeend;noMagnetEl:#left-no-magnet;">
</a-entity>
<a-entity id="right-magnet" position="0 0.6 0" class="avatar-hand-right" data-right="grip"
data-magnet="magnet-right"
grab-magnet-target="startEvents:squeezestart,pose_fist;stopEvents:pose_flat_fuseShort,squeezeend;noMagnetEl:#right-no-magnet;">
</a-entity>
<!-- markers to let us know the real location of the hands, you probably want to make them visible="false" or just make them empty <a-entities> -->
<a-entity id="left-no-magnet" data-left="grip" data-no-magnet radius="0.01">
<a-entity html="cursor:#cursor;html:#my-interface" position="-0.142 -0.0166 -0.02928" rotation="-80 90 0" scale="0.5 0.5 0.5"></a-entity>
</a-entity>
<a-entity id="right-no-magnet" data-right="grip" data-no-magnet radius="0.01"></a-entity>
</a-entity>
</a-entity>
<a-light id="dirlight" shadow-camera-automatic=".navmesh" intensity="0.7"
light="castShadow:true;type:directional" position="40 80 0"></a-light>
<a-light type="hemisphere" ground-color="orange" color="blue" intensity="0.3"></a-light>
<a-circle hide-on-enter-ar shadow="cast:false" class="navmesh" rotation="-90 0 0" radius="6"
material="shader:phong;color:paleblue;"></a-circle>
<a-entity hide-on-enter-ar position="0 -0.2 0" environment="lighting:none;preset:yavapai;skyType:atmosphere;">
</a-entity>
<a-torus-knot position="0 1.5 -1" radius="0.1" radius-tubular="0.02" material="shader:phong;reflectivity:0.3;" id="knot"></a-torus-knot>
<a-entity html="cursor:#cursor;html:#my-interface" shadow position="0.25 1.5 -0.5"></a-entity>
</a-scene>
<div id="dom-overlay">
<header style="pointer-events: none; user-select: none;">
<h1>
My Metaverse Site
</h1>
</header>
<section style="display: inline-block; background: lavenderblush; color: #333333; border-radius: 1em; padding: 1em; margin:0; accent-color: hotpink;" id="my-interface">
<h2>Change Color</h2>
<fieldset style="border:0 none;border-top: 1px solid grey;">
<legend>Colour</legend>
<input onclick="handleRadio(this)" type="radio" id="color-red" name="color" value="red" checked><label for="color-red"> Red</label>
<input onclick="handleRadio(this)" type="radio" id="color-blue" name="color" value="blue"><label for="color-blue"> Blue</label>
</fieldset>
<fieldset style="border-width: 0 1px; border-style: solid;border-radius: 0.5em;">
<legend>Material:</legend>
<input onclick="handleCheckbox(this)" id="material-wireframe" type="checkbox" name="wireframe"><label for="material-wireframe"> Wireframe</label>
<input onclick="handleCheckbox(this)" id="material-shiny" type="checkbox" name="shiny" checked><label for="material-shiny"> Shiny</label>
</fieldset>
<fieldset style="border-radius: 1em;">
<legend>Size:</legend>
<input oninput="handleRange(this)" type="range" min="0.1" max="2" value="1" step="0.01" id="myRange" style="background-color: transparent;">
</fieldset>
<button onclick="AFRAME.scenes[0].exitVR()" style="display: block;">Exit Immersive</button>
</section>
</div>
<script>
function handleRadio(detail) {
const color = detail.value;
knot.setAttribute('material', 'color', color);
}
function handleRange(detail) {
const size = detail.value;
knot.object3D.scale.setScalar(size);
}
function handleCheckbox(detail) {
const name = detail.name;
if (name === 'wireframe') knot.setAttribute('material', 'wireframe', detail.checked);
if (name === 'shiny') knot.setAttribute('material', 'reflectivity', detail.checked ? '0.3' : 0);
}
</script>
</body>
</html>