Skip to content

Commit 007925f

Browse files
bryikbryik
authored
Merge pull request #48 from bryik/tidy-v1.6.0
Update examples to A-Frame v1.6.0
2 parents 44a0980 + 4b46cb0 commit 007925f

File tree

9 files changed

+59
-45
lines changed

9 files changed

+59
-45
lines changed

‎examples/tests/change-cubemap/index.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,25 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - Change Cubemap Test</title>
4-
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
4+
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
55
<script src="/index.js"></script>
66
</head>
77
<body>
88
<a-scene stats>
9-
<a-entity id="skybox" cubemap="folder: /examples/assets/Yokohama3/"></a-entity>
9+
<a-entity
10+
id="skybox"
11+
cubemap="folder: /examples/assets/Yokohama3/"
12+
></a-entity>
1013
</a-scene>
1114
<script type="text/javascript">
1215
setTimeout(changeBackground, 5000);
1316

1417
function changeBackground() {
1518
const skybox = document.querySelector("#skybox");
16-
skybox.setAttribute("cubemap", "folder: /examples/assets/GoldenGateBridge2/");
19+
skybox.setAttribute(
20+
"cubemap",
21+
"folder: /examples/assets/GoldenGateBridge2/"
22+
);
1723
}
1824
</script>
1925
</body>

‎examples/tests/edgeLength/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - edgeLength Test</title>
4-
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
4+
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
55
<script src="/index.js"></script>
66
</head>
77
<body>
88
<a-scene>
99
<!-- At this size, the skybox is no longer seamless. -->
10-
<a-entity cubemap="folder: /examples/assets/Yokohama3/; edgeLength: 50"></a-entity>
10+
<a-entity
11+
cubemap="folder: /examples/assets/Yokohama3/; edgeLength: 50"
12+
></a-entity>
1113
</a-scene>
1214
</body>
1315
</html>

‎examples/tests/encoding/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - Yokohama Encoding</title>
4-
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
4+
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
55
<script src="/index.js"></script>
66
</head>
77
<body>

‎examples/tests/ext/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - Extension test</title>
4-
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
4+
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
55
<script src="/index.js"></script>
66
</head>
77
<body>
88
<a-scene>
9-
<a-entity cubemap="folder:/examples/assets/MilkyWayPNG/; ext:png;"></a-entity>
9+
<a-entity
10+
cubemap="folder:/examples/assets/MilkyWayPNG/; ext:png;"
11+
></a-entity>
1012
<a-entity
1113
cubemap="folder:/examples/assets/TransparentPNG/;
1214
ext:png;

‎examples/tests/fade/index.html‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - Fade</title>
4-
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
4+
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
55
<script src="/index.js"></script>
66
</head>
77
<body>
88
<a-scene stats>
9+
<a-entity
10+
id="skybox"
11+
cubemap="folder: /examples/assets/Yokohama3/"
12+
></a-entity>
913
<a-sphere
1014
id="sphere"
1115
radius="4000"
@@ -14,7 +18,6 @@
1418
animation__fadeOut="property: material.opacity; from: 0.0; to: 1.0; startEvents: fadeOut"
1519
>
1620
</a-sphere>
17-
<a-entity id="skybox" cubemap="folder: /examples/assets/Yokohama3/"></a-entity>
1821
</a-scene>
1922

2023
<script>
@@ -23,39 +26,35 @@
2326
sphere = document.querySelector("#sphere"),
2427
cubemapPath = "folder: /examples/assets/Yokohama3/";
2528

26-
function toggleBackground() {
27-
cubemapPath =
28-
cubemapPath === "folder: /examples/assets/Yokohama3/"
29-
? "folder: /examples/assets/GoldenGateBridge2/"
30-
: "folder: /examples/assets/Yokohama3/";
29+
// When the fadeout animation completes, swap the cubemap and fade in.
30+
sphere.addEventListener("animationcomplete", function (event) {
31+
if (event.detail.name === "animation__fadeout") {
32+
skybox.setAttribute("cubemap", cubemapPath);
33+
sphere.emit("fadeIn");
34+
}
35+
});
3136

32-
sphere.emit("fadeOut");
33-
sphere.addEventListener("animationcomplete", function (event) {
34-
if (event.detail.name === "animation__fadeout") {
35-
skybox.setAttribute("cubemap", cubemapPath);
36-
sphere.emit("fadeIn");
37-
}
38-
});
37+
function run() {
38+
// fade in first cubemap
39+
sphere.emit("fadeIn");
40+
41+
// swap cubemap every 5 seconds
42+
setInterval(() => {
43+
sphere.emit("fadeOut");
44+
45+
// Swap
46+
cubemapPath =
47+
cubemapPath === "folder: /examples/assets/Yokohama3/"
48+
? "folder: /examples/assets/GoldenGateBridge2/"
49+
: "folder: /examples/assets/Yokohama3/";
50+
}, 5000);
3951
}
4052

4153
if (scene.hasLoaded) {
4254
run();
4355
} else {
4456
scene.addEventListener("loaded", run);
4557
}
46-
47-
function run() {
48-
// Cubemap has loaded, so fade in.
49-
sphere.emit("fadeIn");
50-
51-
// Toggle the background.
52-
toggleBackground();
53-
54-
// Toggle the background back and forth every 5 seconds.
55-
skybox.addEventListener("cubemapLoaded", () => {
56-
setTimeout(toggleBackground, 5000);
57-
});
58-
}
5958
</script>
6059
</body>
6160
</html>

‎examples/tests/multi-cubemaps/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - Multiple Cubemap Test</title>
4-
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
4+
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
55
<script src="/index.js"></script>
66
</head>
77
<body>

‎examples/yokohama/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - Yokohama</title>
4-
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
4+
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
55
<script src="/index.js"></script>
66
</head>
77
<body>

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ <h3>Tests</h3>
3636
<a href="./examples/tests/ext/index.html">PNG extension</a>
3737
<a href="./examples/tests/fade/index.html">Fade</a>
3838
<a href="./examples/tests/encoding/index.html">Texture encoding</a>
39+
40+
<h3>Not currently working</h3>
3941
<a href="./examples/tests/a-assets/index.html">Use with a-assets</a>
4042

4143
<div class="github-fork-ribbon-wrapper right">

‎index.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,21 +51,24 @@ AFRAME.registerComponent("cubemap", {
5151
uniforms: shader.uniforms,
5252
depthWrite: false,
5353
side: THREE.BackSide,
54-
transparent: true
54+
transparent: true,
5555
}).clone();
56-
57-
// Starting in Three.js v146, `envMap` changed to `tCube`.
56+
57+
// Starting in Three.js v146, `envMap` changed to `tCube`.
5858
// This variable helps us keep track of the name across Three.js versions.
5959
// https://github.com/mrdoob/three.js/wiki/Migration-Guide#145--146
60-
this.envMapUniformName = this.material.uniforms["envMap"] ? "envMap" : "tCube";
61-
60+
this.envMapUniformName = this.material.uniforms["envMap"]
61+
? "envMap"
62+
: "tCube";
6263

6364
// Threejs seems to have removed the 'tCube' uniform.
6465
// Workaround from: https://stackoverflow.com/a/59454999/6591491
65-
66+
6667
Object.defineProperty(this.material, "envMap", {
6768
get: function () {
68-
return this.uniforms.envMap ? this.uniforms.envMap.value : this.uniforms.tCube.value;
69+
return this.uniforms.envMap
70+
? this.uniforms.envMap.value
71+
: this.uniforms.tCube.value;
6972
},
7073
});
7174

@@ -167,4 +170,4 @@ AFRAME.registerComponent("cubemap", {
167170
this.material.dispose();
168171
this.el.removeObject3D("cubemap");
169172
},
170-
});
173+
});

0 commit comments

Comments
 (0)