-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (77 loc) · 5.36 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grass Field VR TechDemo</title>
<!-- <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>-->
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-simple-sun-sky@^1.2.2/simple-sun-sky.js"></script>
<!--<script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script>-->
</head>
<body>
<!-- attach debug to see threejs stats on doom -->
<a-scene stats look-controls sound="on: model-loaded; src: #wind-sound" loading-screen="dotsColor: white; backgroundColor: #254ba0">
<!--
Interessante
<a-entity id="rain" particle-system="preset: default; color: #24CAFF; particleCount: 5000"></a-entity>
-->
<!-- Asset Management System -->
<a-assets>
<img id="clear-sunny-sky" src="assets/clear-sunny-sky.jpg">
<img id="floor" src="assets/floor.jpg">
<a-asset-item id="white-flower-model" src="assets/Flower.gltf"></a-asset-item>
<a-asset-item id="single-rose-model" src="assets/single-rose/model.gltf"></a-asset-item>
<!-- Esse modelo é meio 'pesado' -->
<a-asset-item id="ivy-model" src="assets/ivy/Ivy.gltf"></a-asset-item>
<a-asset-item id="log-cabin-model" src="assets/log-cabin/model.gltf"></a-asset-item>
<a-asset-item id="dor-model" src="assets/door/Door 2.gltf"></a-asset-item>
<a-asset-item id="another-tree-model" src="assets/another-tree/tree01.gltf"></a-asset-item>
<a-asset-item id="apple-tree-model" src="assets/apple-tree/AppleTree.gltf"></a-asset-item>
<a-asset-item id="fall-tree-model" src="assets/fall-tree/model.gltf"></a-asset-item>
<audio id="wind-sound" src="assets/sounds/birds-wind-synth.ogg" preload="auto"></audio>
</a-assets>
<a-entity id="flowers-container"></a-entity>
<a-entity id="log-cabin-entity" gltf-model="#log-cabin-model" scale="12 12 12" position="200 -10 -100" rotation="0 0 0">
</a-entity>
<!-- Árvores -->
<a-entity id="apple-tree-entity" gltf-model="#apple-tree-model" shadow="receive: false; castShadow:true" scale="0.7 0.7 0.7" position="0 0 0" rotation="0 0 0" animation="property: scale; to: 0.71 0.71 0.71; dir: alternate; dur: 3000; easing: easeInOutQuad; loop: true"></a-entity>
<a-entity id="apple-tree-entity02" gltf-model="#apple-tree-model" shadow="receive: false; castShadow:true" scale="0.8 0.8 0.8" position="-10 0 -15" rotation="0 10 0" animation="property: scale; to: 0.82 0.82 0.82; dir: alternate; dur: 2500; easing: easeInOutQuad; loop: true"></a-entity>
<a-entity id="fall-tree-entity" gltf-model="#fall-tree-model" shadow="receive: false; castShadow:true" scale="1.3 1.3 1.3" position="-15 4.5 -5" rotation="0 0 0"></a-entity>
<a-entity id="another-tree-entity" gltf-model="#another-tree-model" shadow="receive: false; castShadow:true" scale="0.02 0.02 0.02" position="-15 0 5" rotation="0 0 0"></a-entity>
<!-- porta -->
<a-entity id="dor-model-entity" gltf-model="#dor-model" scale="0.01 0.01 0.01" position="-30 0 10" rotation="0 -90 0">
</a-entity>
<!-- Chão cinza -->
<a-plane src="#floor" material="color: #6caa2f; shader: flat"
rotation="-90 0 0"
scale="700 700 1"
repeat="100 100"
shadow="receive: true">
</a-plane>
<!-- 360° Panorama -->
<!-- <a-sky src="#clear-sunny-sky"></a-sky>-->
<a-simple-sun-sky sun-position="-1 1 -1" light-color="#254ba0" dark-color="#142a5a" fog-color="#6a8ad2"></a-simple-sun-sky>
<a-entity light="type:hemisphere; castShadow:true; color: #FFF; intensity: 0.8" position="0 0 0"></a-entity>
<!-- Camera object -->
<!-- camera average height -->
<!-- VR experiences depends on the view eye level of the person who is seeing -->
<a-entity movement-controls="speed: 0.2" position="-13 0 10">
<!--
the position must not be placed on the camera object
instead put it on a 'entity object'
-->
<!--
The user height attribute is used to controll the height of the point of view that the user will
assume in your VR experience
-->
<a-entity camera position="0 1.75 0" look-controls="pointerLockEnabled: true" wasd-controls="acceleration: 50;
easing: 40">
<a-cursor></a-cursor>
</a-entity>
</a-entity>
</a-scene>
<!-- Script da cena -->
<script src="js/main.js"></script>
</body>
</html>