Skip to content

Commit bb410d5

Browse files
kylebakeriokylebakerio
authored
Merge pull request #2 from DougReeder/promisified
Loading equirect waits on promise
2 parents 9841eb0 + b1da0ef commit bb410d5

File tree

2 files changed

+66
-75
lines changed

2 files changed

+66
-75
lines changed

‎building.html‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,34 @@
1010
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
1111
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
1212
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
13-
<a-plane id="window"
13+
<a-plane id="window"
1414
interior-parallax="
1515
path: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/;
16-
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
17-
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
16+
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
17+
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
1818
pz:ao1z9-sve70-005.png?v=1677364885826; nz:ao1z9-sve70-006.png?v=1677364888191;"
1919
side="double"
2020
position="0 0 -4" rotation="-90 0 0" width="4" height="4"
2121
></a-plane>
2222
23-
<a-plane id="window2"
23+
<a-plane id="window2"
2424
interior-parallax="
2525
equirectangular: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/tu09tpc-a-large-bed-in-a-room.jpeg?v=1677370054339;"
2626
side="double"
2727
position="4 0 -4" rotation="-90 0 0" width="4" height="4"
2828
></a-plane>
2929
30-
<a-plane id="window3"
30+
<a-plane id="window3"
3131
interior-parallax="
3232
equirectangular: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/pixexid-6308af11-7cac-4a02-8565-658f51e634a4.jpeg?v=1677381243964;"
3333
side="double"
3434
position="-4 0 -4" rotation="-90 0 0" width="4" height="4"
3535
></a-plane>
36-
36+
3737
</a-entity>
38-
39-
40-
38+
39+
40+
4141
<a-sky color="#ECECEC"></a-sky>
4242
</a-scene>
4343
</body>
@@ -66,56 +66,52 @@
6666
<a-shader-buildings sun-position="-0.3 1.0 0.7" wall-src="#brick" wall-color="#675342" buildings=
6767
'[{"x":-5,"z":-25,"xCoreSections":3,"xWingSections":5,"zCoreSections":2,"zWingSections":3,"ySections":2}]'
6868
>
69-
<a-plane id="window1"
69+
<a-plane id="window1"
7070
interior-parallax="
7171
path: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/;
72-
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
73-
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
72+
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
73+
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
7474
pz:ao1z9-sve70-005.png?v=1677364885826; nz:ao1z9-sve70-006.png?v=1677364888191;"
7575
side="double"
7676
position="-7.5 2.1 -9.9" rotation="0 0 0" width="3" height="3"
7777
></a-plane>
78-
<a-plane id="window2"
79-
interior-parallax="
80-
path: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/;
81-
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
82-
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
83-
pz:ao1z9-sve70-005.png?v=1677364885826; nz:ao1z9-sve70-006.png?v=1677364888191;"
78+
<a-plane id="window2"
79+
interior-parallax="equirectangular: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/tu09tpc-a-large-bed-in-a-room.jpeg?v=1677370054339"
8480
side="double"
8581
position="-12.5 2.1 -9.9" rotation="0 0 0" width="3" height="3"
8682
></a-plane>
87-
<a-plane id="window3"
83+
<a-plane id="window3"
8884
interior-parallax="
8985
path: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/;
90-
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
91-
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
86+
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
87+
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
9288
pz:ao1z9-sve70-005.png?v=1677364885826; nz:ao1z9-sve70-006.png?v=1677364888191;"
9389
side="double"
9490
position="-17.5 2.1 -9.9" rotation="0 0 0" width="3" height="3"
9591
></a-plane>
96-
<a-plane id="window3"
92+
<a-plane id="window3"
9793
interior-parallax="
9894
path: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/;
99-
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
100-
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
95+
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
96+
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
10197
pz:ao1z9-sve70-005.png?v=1677364885826; nz:ao1z9-sve70-006.png?v=1677364888191;"
10298
side="double"
10399
position="-7.5 6.1 -9.9" rotation="0 0 0" width="3" height="3"
104100
></a-plane>
105-
<a-plane id="window4"
101+
<a-plane id="window4"
106102
interior-parallax="
107103
path: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/;
108-
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
109-
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
104+
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
105+
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
110106
pz:ao1z9-sve70-005.png?v=1677364885826; nz:ao1z9-sve70-006.png?v=1677364888191;"
111107
side="double"
112108
position="-12.5 6.1 -9.9" rotation="0 0 0" width="3" height="3"
113109
></a-plane>
114-
<a-plane id="window5"
110+
<a-plane id="window5"
115111
interior-parallax="
116112
path: https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/;
117-
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
118-
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
113+
px:ao1z9-sve70-001.png?v=1677364876129; nx:ao1z9-sve70-002.png?v=1677364877590;
114+
py:ao1z9-sve70-003.png?v=1677364880161; ny:ao1z9-sve70-004.png?v=1677364883136;
119115
pz:ao1z9-sve70-005.png?v=1677364885826; nz:ao1z9-sve70-006.png?v=1677364888191;"
120116
side="double"
121117
position="-17.5 6.1 -9.9" rotation="0 0 0" width="3" height="3"
@@ -133,4 +129,4 @@
133129
<a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.3 1.0 0.7"></a-entity>
134130
</a-scene>
135131
</body>
136-
</html>
132+
</html>

‎interior-parallax.js‎

Lines changed: 39 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ AFRAME.registerComponent('interior-parallax', {
1111
// px = positive x, nx = negative x, etc.
1212
equirectangular: {type:"string", default:""},
1313
path: {type:"string", default:""},
14-
px: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-001.png?v=1677364876129"},
15-
nx: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-002.png?v=1677364877590"},
16-
py: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-003.png?v=1677364880161"},
17-
ny: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-004.png?v=1677364883136"},
18-
pz: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-005.png?v=1677364885826"},
14+
px: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-001.png?v=1677364876129"},
15+
nx: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-002.png?v=1677364877590"},
16+
py: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-003.png?v=1677364880161"},
17+
ny: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-004.png?v=1677364883136"},
18+
pz: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-005.png?v=1677364885826"},
1919
nz: {type:"string", default:"https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/ao1z9-sve70-006.png?v=1677364888191"},
2020
},
2121
async init() {
@@ -32,26 +32,21 @@ AFRAME.registerComponent('interior-parallax', {
3232
console.log(this.el.id)
3333
if (this.data.equirectangular) {
3434
console.warn("experimental/untested use of equirectangular instead of cube")
35-
const textureLoader = new THREE.TextureLoader();
3635

37-
textureEquirec = textureLoader.load(
38-
this.data.equirectangular
39-
// 'textures/2294472375_24a3b8ef46_o.jpg'
40-
);
41-
textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
42-
textureEquirec.encoding = THREE.sRGBEncoding;
43-
console.log('loaded equirec texture:', textureEquirec)
44-
45-
let waited;
46-
console.log("waiting")
47-
let waitPromise = new Promise((resolve, reject) => {
48-
waited = resolve;
49-
})
50-
setTimeout(() => {
51-
waited();
52-
}, 2000)
53-
await waitPromise;
54-
console.log("finished waiting")
36+
await new Promise(resolve => {
37+
const textureLoader = new THREE.TextureLoader();
38+
textureEquirec = textureLoader.load(
39+
this.data.equirectangular,
40+
// 'textures/2294472375_24a3b8ef46_o.jpg'
41+
texture => {
42+
console.log("loaded equirect:", texture);
43+
resolve();
44+
}
45+
);
46+
textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
47+
textureEquirec.encoding = THREE.sRGBEncoding;
48+
});
49+
5550
const formatted = new THREE.WebGLCubeRenderTarget(
5651
textureEquirec.source.data.height // try setTimeout, source is undefined immediately but defined shortly after for some reason
5752
// 3437 // hardcoding for now....
@@ -62,7 +57,7 @@ AFRAME.registerComponent('interior-parallax', {
6257
// this part is a guess, no idea if shader will allow this
6358
windowMat = new THREE.ShaderMaterial(
6459
{
65-
uniforms: {
60+
uniforms: {
6661
cubeMap: {value: formatted.texture }
6762
},
6863
vertexShader: vertexShader,
@@ -73,13 +68,13 @@ AFRAME.registerComponent('interior-parallax', {
7368

7469
else if (this.data.px) {
7570
console.log("using cube not equirect")
76-
71+
7772
const loader = new THREE.CubeTextureLoader();
78-
73+
7974
if (this.data.path) {
80-
loader.setPath(
75+
loader.setPath(
8176
this.data.path
82-
// 'https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/'
77+
// 'https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/'
8378
);
8479
}
8580

@@ -97,13 +92,13 @@ AFRAME.registerComponent('interior-parallax', {
9792

9893
// end attempt to replicate without dds added by kyle
9994

100-
cubeMap.encoding = THREE.sRGBEncoding
95+
cubeMap.encoding = THREE.sRGBEncoding
10196

10297
console.log("using cubemap:", cubeMap)
10398

10499
windowMat = new THREE.ShaderMaterial(
105100
{
106-
uniforms: {
101+
uniforms: {
107102
cubeMap: {value: cubeMap }
108103
},
109104
vertexShader: vertexShader,
@@ -123,14 +118,14 @@ AFRAME.registerComponent('interior-parallax', {
123118
}
124119
windowGeometry.computeTangents()
125120
this.el.components.material.material = windowMat; // give it the old college try?
126-
121+
127122
// assuming the 'model-loaded' event already fired
128123
let mesh = this.el.getObject3D('mesh')
129-
// assuming you want all nodes to have the same material
124+
// assuming you want all nodes to have the same material
130125
// var material = new THREE.MeshLambertMaterial({
131126
// color: this.data.color,
132127
// });
133-
128+
134129
mesh.traverse(function(node) {
135130
// change only the mesh nodes
136131
if(node.type != "Mesh") return;
@@ -139,7 +134,7 @@ AFRAME.registerComponent('interior-parallax', {
139134
node.material = windowMat
140135
tmp.dispose();
141136
})
142-
137+
143138
// Mesh
144139
// windowMesh = new THREE.Mesh(windowGeometry, windowMat)
145140
// scene.add(windowMesh)
@@ -157,10 +152,10 @@ function loadFile(filename) {
157152
else{
158153
loader = new THREE.FileLoader()
159154
}
160-
161-
loader.load(filename,
162-
data => { resolve(data); },
163-
null,
155+
156+
loader.load(filename,
157+
data => { resolve(data); },
158+
null,
164159
error => {reject(error);}
165160
);
166161
});
@@ -176,7 +171,7 @@ function loadFile(filename) {
176171
// surfaceColor: '#fcfcfc'
177172
// }
178173

179-
// let scene, renderer, camera,
174+
// let scene, renderer, camera,
180175
// controls, windowMesh, windowMat
181176

182177
// function initialize(){
@@ -220,7 +215,7 @@ function loadFile(filename) {
220215
// // trying to do this without .dds
221216
// // see: https://threejs.org/docs/#api/en/textures/CubeTexture
222217
// // const cubeMap = await loadFile('./textures/cube.dds')
223-
218+
224219
// const loader = new THREE.CubeTextureLoader();
225220
// loader.setPath( 'https://cdn.glitch.global/42044d7c-847c-4275-8e47-bc5ebbeb3640/' );
226221

@@ -232,14 +227,14 @@ function loadFile(filename) {
232227

233228
// // from original example, they do this:
234229
// // const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: cubeMap } );
235-
230+
236231
// // end attempt to replicate without dds added by kyle
237-
232+
238233
// cubeMap.encoding = THREE.sRGBEncoding
239234

240235
// windowMat = new THREE.ShaderMaterial(
241236
// {
242-
// uniforms: {
237+
// uniforms: {
243238
// cubeMap: {value: cubeMap }
244239
// },
245240
// vertexShader: vertexShader,

0 commit comments

Comments
 (0)