Last active
March 23, 2022 04:49
-
-
Save jmschrack/946ae44bcdd4b6240f06b7998d4e451b to your computer and use it in GitHub Desktop.
AFRAME component: Sets an environment map for the scene.
This file contains hidden or 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
| /* ========================================== | |
| * Equirect Environment Map example: | |
| * | |
| * <a-scene environment="path: env.png;"> | |
| * | |
| * "path" - url to an image | |
| * ========================================== | |
| * Cubemap Environment Map example: | |
| * | |
| * <a-scene environment="path: images/cubemap/; isEquirect:false;" > | |
| * | |
| * This looks for 6 images named posx, posy, posz, negx, negy, negz | |
| * | |
| * "path" - this is prefixed to the beginning of the 6 images to create a url | |
| * "extension" - file extension appended to the filepath | |
| * "isEquirect" - Set to false for Cubemap | |
| * "format" - texture format | |
| * ========================================== */ | |
| AFRAME.registerComponent('environment', { | |
| multiple: false, | |
| schema: { | |
| isEquirect:{default:true}, | |
| path: {default: ''}, | |
| extension: {default: 'jpg', oneOf: ['jpg', 'png']}, | |
| format: {default: 'RGBFormat', oneOf: ['RGBFormat', 'RGBAFormat']}, | |
| }, | |
| init: function () { | |
| if (!this.el.isScene) { | |
| warn('environment component can only be applied to <a-scene>'); | |
| return; | |
| } | |
| const data = this.data; | |
| if(data.isEquirect){ | |
| this.texture = new THREE.TextureLoader().load(data.path); | |
| this.texture.mapping = THREE.EquirectangularReflectionMapping; | |
| }else{ | |
| this.texture = new THREE.CubeTextureLoader().load([ | |
| data.path + 'posx.' + data.extension, data.path + 'negx.' + data.extension, | |
| data.path + 'posy.' + data.extension, data.path + 'negy.' + data.extension, | |
| data.path + 'posz.' + data.extension, data.path + 'negz.' + data.extension | |
| ]); | |
| this.texture.format = THREE[data.format]; | |
| } | |
| this.object3dsetHandler = () => { | |
| this.el.object3D.environment=this.texture; | |
| }; | |
| this.el.addEventListener('object3dset', this.object3dsetHandler); | |
| }, | |
| remove: function () { | |
| this.el.removeEventListener('object3dset', this.object3dsetHandler); | |
| this.el.object3D.environment=null; | |
| }, | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment