-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
71 lines (65 loc) · 3.41 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>aframe-atoll-terrain primitive example</title>
<meta name="description" content="An example A-Frame WebVR scene with an aframe-atoll-terrain (and an aframe-simple-sun-sky)">
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-simple-sun-sky@^1.2.3/simple-sun-sky.js"></script>
<script src="dist/aframe-atoll-terrain.js"></script>
<!--<script src="https://unpkg.com/aframe-atoll-terrain@^1.0.0/dist/aframe-atoll-terrain.js"></script>-->
<script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-extras.controls.min.js"></script>
<script>
AFRAME.registerComponent('place-ball', {
init: function () {
const terrainGeometry = this.el.querySelector('a-atoll-terrain').getAttribute('geometry');
const armatureEl = document.getElementById('armature');
const armaturePosition = armatureEl.getAttribute('position');
armaturePosition.y = terrainGeometry.getElevation(armaturePosition.x, armaturePosition.z) + 1.6;
const sphereEl = document.querySelector('a-sphere');
const spherePosition = sphereEl.getAttribute('position');
spherePosition.y = terrainGeometry.getElevation(spherePosition.x, spherePosition.z) + 1.6;
}
});
AFRAME.registerComponent('moving-sun', {
init: function () {
this.positionSph = new THREE.Spherical(1, Math.PI/2, 0);
this.position = new THREE.Vector3();
this.atollTerrain = document.querySelector('a-atoll-terrain');
this.sss = document.querySelector('a-simple-sun-sky');
this.directional = document.getElementById('directional');
},
tick: function (time) {
this.positionSph.phi = Math.PI * (0.3 - 0.15 * Math.sin(time / 32000 * 2 * Math.PI));
this.positionSph.theta = 2 * Math.PI * ( 0.25 + time / 48000);
this.position.setFromSpherical(this.positionSph);
let positionStr = this.position.x + ' ' + this.position.y + ' ' + this.position.z;
// console.log(positionStr);
this.atollTerrain.setAttribute('sun-position', positionStr);
this.sss.setAttribute('sun-position', positionStr);
this.directional.setAttribute('position', positionStr);
}
});
</script>
</head>
<body>
<a-scene moving-sun place-ball background="color:#87cefa">
<a-simple-sun-sky sun-position="0.8 0.6 0" radius="2000"></a-simple-sun-sky>
<a-entity light="type: ambient; color: #888"></a-entity>
<a-entity id="directional" light="type: directional; color: #FFF; intensity: 0.6" position="0.7 0.4 -1"></a-entity>
<a-sphere position="0 11.6 -2" radius="0.6" color="#EF2D5E" shadow></a-sphere>
<!-- terrain which is likely to have a good vista from the plateau, and runs ok on mobile -->
<a-atoll-terrain plateau-radius="15" plateau-elevation="5"
elevation-bias="0"
middle-radius="300" unit-size="2" far="1900"
sun-position="0.8 0.6 0"
log="true" flat-shading="false">
</a-atoll-terrain>
<a-entity id="armature" position="0 10 2" movement-controls="fly:true; speed:0.5">
<a-entity camera="far:2500; near:0.05" position="0 1.6 0" look-controls="pointerLockEnabled: false"></a-entity>
<a-entity hand-controls="hand:left"></a-entity>
<a-entity hand-controls="hand:right"></a-entity>
</a-entity>
</a-scene>
</body>
</html>