Skip to content

Commit b1da0ef

Browse files
DougReederDougReeder
committed
Loading equirect waits on promise
1 parent f17e6f0 commit b1da0ef

File tree

1 file changed

+39
-44
lines changed

1 file changed

+39
-44
lines changed

‎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)