-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
53 lines (49 loc) · 2.67 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NFT Home</title>
<meta name="description" content="NFT Home">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script>
<link rel="stylesheet" href="/style.css">
</head>
<body class="app">
<a-scene cursor="rayOrigin: mouse" raycaster="far: 20; objects: .collidable" keyboard-shortcuts="enterVR: false" fixed>
<a-assets id="assets">
<a-asset-item id="house" src="room.glb"></a-asset-item>
</a-assets>
<a-entity
camera="fov:60"
look-controls="pointerLockEnabled:true"
wasd-controls="acceleration:30"
position="2.5 1.6 1.5"
></a-entity>
<a-entity environment="
preset: forest;
seed: 3;
ground: hills;
groundYScale: 20;
dressingAmount: 1000;
lighting: none;
"></a-entity>
<a-light type="ambient" color="#FFFFFF" intensity="0.2"></a-light>
<a-light type="hemisphere" color="#CEE4F0" ground-color="#937a24" intensity="0.3"></a-light>
<a-light type="directional" color="#FFFFFF" intensity="0.6" position="-1.2 0.88 -0.55"></a-light>
<a-light type="directional" color="#FFFFFF" intensity="0.5" position="-0.3 0.1 0" target="#model"></a-light>
<a-light type="directional" color="#FFFFFF" intensity="0.5" position="0.3 0.1 0" target="#model"></a-light>
<a-light type="directional" color="#FFFFFF" intensity="0.5" position="0 0.1 -0.4" target="#model"></a-light>
<a-light type="directional" color="#FFFFFF" intensity="0.5" position="0 0.1 0.4" target="#model"></a-light>
<a-gltf-model id="model" src="#house" position="0 0 -0.6" rotation="0 90 0" scale="0.1 0.1 0.1"></a-gltf-model>
<a-plane class="onboarding" width="4" height="2" color="#000" position="2.5 1.5 -2.5" material="side: double;">
<a-text color="#CCC" position="0 0.8 0" width="4" align="center" value="Welcome to your Solana NFT Gallery!"></a-text>
<a-text color="#CCC" position="-1.8 0 0" width="3.8" value="Sign In with your Solana wallet using Phantom to see your NFTs."></a-text>
<a-plane class="signInPhantom collidable" color="#FFF" width="1" height="0.2" position="0 -0.8 0.01" text="color: #000; align: center; value: Sign In With Phantom;"></a-plane>
</a-plane>
</a-scene>
<script>window.global = {}</script>
<script type="module" src="/main.js"></script>
</body>
</html>