forked from bryik/aframe-cubemap-component
/
index.js
98 lines (83 loc) · 2.59 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/* global AFRAME, THREE */
if (typeof AFRAME === 'undefined') {
throw new Error('Component attempted to register before AFRAME was available.');
}
/**
* Cubemap component for A-Frame.
*/
AFRAME.registerComponent('cubemap', {
schema: {
folder: {
type: 'string'
},
urls: {
type: 'array'
},
edgeLength: {
type: 'int',
default: 5000
},
ext: {
type: 'string',
default: 'jpg'
},
transparent: {
type: 'boolean',
default: false
}
},
/**
* Called when component is attached and when component data changes.
* Generally modifies the entity based on the data.
*/
update: function (oldData) {
// entity data
var el = this.el;
var data = this.data;
// Path to the folder containing the 6 cubemap images
var srcPath = data.folder;
// Cubemap image files must follow this naming scheme
// from: http://threejs.org/docs/index.html#Reference/Textures/CubeTexture
var urls = [
'posx', 'negx',
'posy', 'negy',
'posz', 'negz'
];
if (data.urls) urls = data.urls
// Apply extension
urls = urls.map(function(val) {
return val + "." + data.ext;
});
// Code that follows is adapted from "Skybox and environment map in Three.js" by Roman Liutikov
// http://blog.romanliutikov.com/post/58705840698/skybox-and-environment-map-in-threejs
// Create loader, set folder path, and load cubemap textures
var loader = new THREE.CubeTextureLoader();
loader.setPath(srcPath);
var cubemap = loader.load(urls);
var shader = THREE.ShaderLib['cube']; // init cube shader from built-in lib
// Create shader material
var skyBoxShader = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide,
transparent: data.transparent
});
// Clone ShaderMaterial (necessary for multiple cubemaps)
var skyBoxMaterial = skyBoxShader.clone();
skyBoxMaterial.uniforms['tCube'].value = cubemap; // Apply cubemap textures to shader uniforms
// Set skybox dimensions
var edgeLength = data.edgeLength;
var skyBoxGeometry = new THREE.CubeGeometry(edgeLength, edgeLength, edgeLength);
// Set entity's object3D
el.setObject3D('cubemap', new THREE.Mesh(skyBoxGeometry, skyBoxMaterial));
},
/**
* Called when a component is removed (e.g., via removeAttribute).
* Generally undoes all modifications to the entity.
*/
remove: function () {
this.el.removeObject3D('cubemap');
}
});