-
-
Save kanlanc/917237bdfbcbf00c95982d25846e0516 to your computer and use it in GitHub Desktop.
Three.js Promise Loading
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const material = new THREE.MeshStandardMaterial({ | |
map: new THREE.TextureLoader().load('map.jpg'), | |
normalMap: new THREE.TextureLoader().load('normalMap.jpg') | |
}); | |
const loader = new THREE.JSONLoader(); | |
loader.load('geometry.json', geometry => { | |
const mesh = new THREE.Mesh(geometry, material); | |
scene.add(mesh); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function loadJSON(url) { | |
return new Promise(resolve => { | |
new THREE.JSONLoader.load(url, resolve); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function loadTexture(url) { | |
return new Promise(resolve => { | |
new THREE.TextureLoader().load(url, resolve); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function loadMaterial() { | |
const textures = { | |
map: 'map.jpg', | |
normalMap: 'normalMap.jpg' | |
}; | |
const params = {}; | |
const promises = Object.keys(textures).map(key => { | |
return loadTexture(textures[key]).then(texture => { | |
params[key] = texture; | |
}); | |
}); | |
return Promise.all(promises).then(() => { | |
return new THREE.MeshStandardMaterial(params); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function loadMesh() { | |
const promises = [ | |
loadGeometry(), | |
loadMaterial() | |
]; | |
return Promise.all(promises).then(result => { | |
return new THREE.Mesh(result[0], result[1]); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const model = { | |
geometry: { | |
url: 'geometry.json' | |
}, | |
material: { | |
map: 'map.jpg', | |
normalMap: 'normalMap.jpg', | |
metalness: 0.0, | |
roughness: 1.0 | |
} | |
}; | |
function loadMesh(model) { | |
const promises = [ | |
loadGeometry(model.geometry), | |
loadMaterial(model.material) | |
]; | |
return Promise.all(promises).then(result => { | |
return new THREE.Mesh(result[0], result[1]); | |
}); | |
} | |
function loadGeometry(model) { | |
return new Promise(resolve => { | |
new THREE.JSONLoader().load(model.url, resolve); | |
}); | |
} | |
const textureKeys = ['map', 'normalMap']; // etc... | |
function loadMaterial(model) { | |
const params = {}; | |
const promises = Object.keys(model).map(key => { | |
// load textures for supported keys | |
if (textureKeys.indexOf(key) !== -1) { | |
return loadTexture(model[key]).then(texture => { | |
params[key] = texture; | |
}); | |
// just copy the value otherwise | |
} else { | |
params[key] = model[key]; | |
} | |
}); | |
return Promise.all(promises).then(() => { | |
return new THREE.MeshStandardMaterial(params); | |
}); | |
} | |
function loadTexture(url) { | |
return new Promise(resolve => { | |
new THREE.TextureLoader().load(url, resolve); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const model = { | |
geometry: { | |
geometry: new THREE.SphereGeometry() | |
} | |
}; | |
... | |
function loadGeometry(model) { | |
if (model.geometry) { | |
return Promise.resolve(model.geometry); | |
} | |
if (model.url) { | |
return new Promise(resolve => { | |
new JSONLoader().load(model.url, resolve); | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment