-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (142 loc) · 6.54 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
149
150
151
152
153
154
155
156
157
158
159
<html lang="en">
<head>
<title>XR Personaje Saludando Jose Luis</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="http://127.0.0.1:5500/index.html/css/main.css">
<script>
// WebXR requires HTTPS, so the site doesn't work if someone manually enters
// the URL and ends up using HTTP. To work around this, force redirect from
// http to https for non-localhost addresses.
if (window.location.protocol == "http:" &&
window.location.hostname != "localhost" &&
window.location.hostname != "127.0.0.1" &&
window.location.hostname != "[::1]") {
window.location = window.location.href.replace('http:', 'https:');
}
</script>
<!-- import the webpage's javascript files -->
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-extras@3.3.0/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
<script>
// Define a few custom components useful for AR mode. While these are somewhat reusable,
// I recommend checking if there are officially supported alternatives before copying
// these into new projects.
// See also https://github.com/aframevr/aframe/pull/4356
AFRAME.registerComponent('hide-in-ar-mode', {
// Set this object invisible while in AR mode.
init: function () {
this.el.sceneEl.addEventListener('enter-vr', (ev) => {
this.wasVisible = this.el.getAttribute('visible');
if (this.el.sceneEl.is('ar-mode')) {
this.el.setAttribute('visible', false);
}
});
this.el.sceneEl.addEventListener('exit-vr', (ev) => {
if (this.wasVisible) this.el.setAttribute('visible', true);
});
}
});
AFRAME.registerComponent('ar-shadows', {
// Swap an object's material to a transparent shadows-only material while
// in AR mode. Intended for use with a ground plane. The object is also
// set visible while in AR mode, this is useful if it's hidden in other
// modes due to them using a 3D environment.
schema: {
opacity: {default: 0.3}
},
init: function () {
this.el.sceneEl.addEventListener('enter-vr', (ev) => {
this.wasVisible = this.el.getAttribute('visible');
if (this.el.sceneEl.is('ar-mode')) {
this.savedMaterial = this.el.object3D.children[0].material;
this.el.object3D.children[0].material = new THREE.ShadowMaterial();
this.el.object3D.children[0].material.opacity = this.data.opacity;
this.el.setAttribute('visible', true);
}
});
this.el.sceneEl.addEventListener('exit-vr', (ev) => {
if (this.savedMaterial) {
this.el.object3D.children[0].material = this.savedMaterial;
this.savedMaterial = null;
}
if (!this.wasVisible) this.el.setAttribute('visible', false);
});
}
});
</script>
</head>
<body>
<a-scene>
<a-assets timeout="30000">
<!-- Model source: https://sketchfab.com/3d-models/spinosaurus-2135501583704537907645bf723685e7
Model author: https://sketchfab.com/VapTor
Model license: CC Attribution -->
<a-asset-item id="yo_saludando" src="Yo_Saludando_002.glb" response-type="arraybuffer"></a-asset-item>
</a-assets>
<a-camera position="0 1.2 -1.6"></a-camera>
<!-- <a-camera rotation="0 1 0"></a-camera> -->
<!-- Environment for 2D and VR viewing. It's auto-hidden in AR mode. -->
<a-entity environment="preset: forest; lighting: none; shadow: none; lightPosition: 0 2.15 0"
hide-in-ar-mode></a-entity>
<a-entity id="personaje" position="-1 0 -3" scale="0.5 0.5 0.5">
<a-entity position="0 0.5 0" rotation="0 55 0"
gltf-model="#yo_saludando"
animation-mixer
shadow="cast: true; receive: false"></a-entity>
</a-entity>
<a-entity light="type: ambient; intensity: 0.5;"></a-entity>
<a-light type="directional"
light="castShadow: true;
shadowMapHeight: 1024;
shadowMapWidth: 1024;
shadowCameraLeft: -7;
shadowCameraRight: 5;
shadowCameraBottom: -5;
shadowCameraTop: 5;"
id="light"
target="dino"
position="-5 3 1.5"></a-light>
<!-- This shadow-receiving plane is only visible in AR mode. -->
<a-plane height="15" width="15" position="0 0 -3" rotation="-90 0 0"
shadow="receive: true"
ar-shadows="opacity: 0.3"
visible="false"></a-plane>
</a-scene>
<div id="text">
<h1>A-Frame Spinosaurus for VR/AR</h1>
<p>
Model: <a href="https://sketchfab.com/3d-models/spinosaurus-2135501583704537907645bf723685e7">Spinosaurus</a> by
<a href="https://sketchfab.com/VapTor">Vaptor-Studio</a>.
</p>
<p>
Size: <button id="btn_full">Full</button>
<button id="btn_half">1/2</button>
<button id="btn_quarter">1/4</button>
</p>
<p>
This requires browser support for WebXR's AR mode, for example an
<a href="https://developers.google.com/ar/discover/supported-devices">ARCore-compatible</a>
Android phone with Chrome version 81 or higher.
</p>
<p>
Powered by <a href="https://aframe.io/blog/aframe-v1.0.0/">A-Frame v1.0.0</a>.
</p>
</div>
<script>
function setSize(scale) {
document.getElementById('dino').setAttribute('scale', {x: scale, y: scale, z: scale});
}
document.getElementById('btn_full').onclick = setSize.bind(this, 1);
document.getElementById('btn_half').onclick = setSize.bind(this, 0.5);
document.getElementById('btn_quarter').onclick = setSize.bind(this, 0.25);
</script>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>