Skip to content

Commit c6c5453

Browse files
bryikbryik
authored
Merge pull request #43 from bryik/no-build-tool
Remove Browserify, update to A-Frame v1.3.0
2 parents 27276be + 567e1ff commit c6c5453

File tree

19 files changed

+81
-6233
lines changed

19 files changed

+81
-6233
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ gh-pages
55
node_modules/
66
npm-debug.log
77
.vscode/
8+
.DS_Store

‎README.md‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ By default, the height, width, and depth of the skybox are set to 5000. In other
2929
Attach the component to an entity using the path to the folder holding your cubemap as the attribute.
3030

3131
```html
32-
<a-entity cubemap="folder: /assets/Yokohama3/"></a-entity>
32+
<a-entity cubemap="folder: /examples/assets/Yokohama3/"></a-entity>
3333
```
3434

3535
Inside the folder, the component assumes the following naming scheme:
@@ -60,13 +60,13 @@ Install and use by directly including the [browser files](dist):
6060
```html
6161
<head>
6262
<title>My A-Frame Scene</title>
63-
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
64-
<script src="https://unpkg.com/[email protected]/dist/aframe-cubemap-component.min.js"></script>
63+
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
64+
<script src="https://unpkg.com/[email protected]/index.js"></script>
6565
</head>
6666

6767
<body>
6868
<a-scene>
69-
<a-entity cubemap="folder: /assets/Yokohama3/"></a-entity>
69+
<a-entity cubemap="folder: /examples/assets/Yokohama3/"></a-entity>
7070
</a-scene>
7171
</body>
7272
```
@@ -95,12 +95,20 @@ npm i
9595
To run the examples locally:
9696

9797
```bash
98-
npm run dev
98+
npm start
9999
```
100100

101-
This should start a live reloading local dev server. To stop the server, hit `CONTROL-C`.
101+
This should start a local dev server, go to [http://localhost:3000/examples/](http://localhost:3000/examples/) to inspect the examples. To stop the server, hit `CONTROL-C`.
102102

103-
To generate a minified bundle: `npm run dist`.
103+
### Distribution
104+
105+
Prior to version 3.0.0, this component used a Browserify workflow. This was fine until it prevented upgrading to A-Frame v 1.3.0 which was needed to [resolve a rendering issue](https://github.com/bryik/aframe-cubemap-component/issues/39#issuecomment-1312806990). Since this component has no external dependencies and webpack is annoying to setup, I decided to go for a low-tech solution.
106+
107+
Users can pin specific versions by altering the unpkg URL:
108+
109+
```
110+
https://unpkg.com/[email protected]/index.js
111+
```
104112

105113
### Contributing
106114

‎dist/.gitkeep‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/aframe-cubemap-component.js‎

Lines changed: 0 additions & 100 deletions
This file was deleted.

‎dist/aframe-cubemap-component.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/main.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎examples/tests/a-assets/index.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - a-assets</title>
4-
<script src="../../build.js"></script>
4+
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
5+
<script src="/index.js"></script>
56
</head>
67
<body>
78
<a-scene stats>
@@ -26,12 +27,12 @@
2627
</a-cubemap>
2728
<a-cubemap id="goldenGate">
2829
<!--The order of these images is important!-->
29-
<img src="../../assets/GoldenGateBridge2/posx.jpg" />
30-
<img src="../../assets/GoldenGateBridge2/negx.jpg" />
31-
<img src="../../assets/GoldenGateBridge2/posy.jpg" />
32-
<img src="../../assets/GoldenGateBridge2/negy.jpg" />
33-
<img src="../../assets/GoldenGateBridge2/posz.jpg" />
34-
<img src="../../assets/GoldenGateBridge2/negz.jpg" />
30+
<img src="/examples/assets/GoldenGateBridge2/posx.jpg" />
31+
<img src="/examples/assets/GoldenGateBridge2/negx.jpg" />
32+
<img src="/examples/assets/GoldenGateBridge2/posy.jpg" />
33+
<img src="/examples/assets/GoldenGateBridge2/negy.jpg" />
34+
<img src="/examples/assets/GoldenGateBridge2/posz.jpg" />
35+
<img src="/examples/assets/GoldenGateBridge2/negz.jpg" />
3536
</a-cubemap>
3637
</a-assets>
3738
<a-entity id="skybox" cubemap="folder:#yokohama"></a-entity>

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - Change Cubemap Test</title>
4-
<script src="../../build.js"></script>
4+
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
5+
<script src="/index.js"></script>
56
</head>
67
<body>
78
<a-scene stats>
8-
<a-entity id="skybox" cubemap="folder: /assets/Yokohama3/"></a-entity>
9+
<a-entity id="skybox" cubemap="folder: /examples/assets/Yokohama3/"></a-entity>
910
</a-scene>
1011
<script type="text/javascript">
1112
setTimeout(changeBackground, 5000);
1213

1314
function changeBackground() {
1415
const skybox = document.querySelector("#skybox");
15-
skybox.setAttribute("cubemap", "folder: /assets/GoldenGateBridge2/");
16+
skybox.setAttribute("cubemap", "folder: /examples/assets/GoldenGateBridge2/");
1617
}
1718
</script>
1819
</body>

‎examples/tests/edgeLength/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - edgeLength Test</title>
4-
<script src="../../build.js"></script>
4+
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
5+
<script src="/index.js"></script>
56
</head>
67
<body>
78
<a-scene>
89
<!-- At this size, the skybox is no longer seamless. -->
9-
<a-entity cubemap="folder: /assets/Yokohama3/; edgeLength: 50"></a-entity>
10+
<a-entity cubemap="folder: /examples/assets/Yokohama3/; edgeLength: 50"></a-entity>
1011
</a-scene>
1112
</body>
1213
</html>

‎examples/tests/encoding/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
<html>
22
<head>
33
<title>A-Frame Cubemap Component - Yokohama Encoding</title>
4-
<script src="../../build.js"></script>
4+
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
5+
<script src="/index.js"></script>
56
</head>
67
<body>
78
<!--
89
With colorManagement: true, this example looks identical to the Yokohama
910
example. With colorManagement: false, Yokohama appears too dark.
1011
-->
1112
<a-scene renderer="colorManagement: true">
12-
<a-entity cubemap="folder: /assets/Yokohama3/;"></a-entity>
13+
<a-entity cubemap="folder: /examples/assets/Yokohama3/;"></a-entity>
1314
</a-scene>
1415
</body>
1516
</html>

0 commit comments

Comments
 (0)