/**
A **Skybox** is a textured box that does not translate with respect to the
{{#crossLink "Lookat"}}viewing transform{{/crossLink}}, to a provide the appearance of a background
for associated {{#crossLink "Meshes"}}Meshes{{/crossLink}}.
<a href="../../examples/#skyboxes_skybox"><img src="http://i.giphy.com/3o7TKIBOOCEC5gJ224.gif"></img></a>
## Examples
<ul>
<li>[Basic Skybox](../../examples/#skyboxes_skybox)</li>
<li>[Custom Skybox](../../examples/#skyboxes_skybox_custom)</li>
</ul>
## Usage
In the example below we're going to create twenty randomly-positioned and colored {{#crossLink "Mesh"}}Meshes{{/crossLink}}
and wrap them in a Skybox. The Skybox will use the texture image shown below, and the result will appear like the screen capture shown above.
<img src="../../assets/images/skyboxMiramarClouds.jpg">
````javascript
// A bunch of random cube Meshes
// Share this BoxGeometry among the Meshes
var boxGeometry = new BoxGeometry();
for (var i = 0; i < 20; i++) {
new xeogl.Mesh({
geometry: boxGeometry,
transform: new xeogl.Translate({
xyz: [
Math.random() * 15 - 7,
Math.random() * 15 - 7,
Math.random() * 15 - 7
]
}),
material: new xeogl.PhongMaterial({
diffuse: [
Math.random(),
Math.random(),
Math.random()
]
})
});
}
// A Skybox that wraps our Meshes in a cloudy background
var skybox = new xeogl.Skybox({
src: "textures/skybox/miramarClouds.jpg",
size: 1000 // Default
});
// Get the default Scene off the Skybox
var scene = skybox.scene;
// Move the camera back a bit
scene.camera.eye = [0, 0, -30];
// Slowly orbit the camera on each frame
scene.on("tick", function () {
scene.camera.orbitYaw(0.2);
});
````
@class Skybox
@module xeogl
@submodule skyboxes
@constructor
@param [scene] {Scene} Parent {{#crossLink "Scene"}}Scene{{/crossLink}}, creates this Skybox within the
default {{#crossLink "Scene"}}Scene{{/crossLink}} when omitted
@param [cfg] {*} Skybox configuration
@param [cfg.id] {String} Optional ID, unique among all components in the parent {{#crossLink "Scene"}}Scene{{/crossLink}}, generated automatically when omitted.
@param [cfg.meta] {String:Object} Optional map of user-defined metadata to attach to this Skybox.
@param [cfg.src=[null]] {String} Path to skybox texture
@param [cfg.encoding="linear"] {String} Texture encoding format. See the {{#crossLink "Texture/encoding:property"}}{{/crossLink}} property for more info.
@param [cfg.size=1000] {Number} Size of this Skybox, given as the distance from the center at [0,0,0] to each face.
@param [cfg.active=true] {Boolean} True when this Skybox is visible.
@extends Component
*/
xeogl.Skybox = class xeoglSkyBox extends xeogl.Component {
init(cfg) {
super.init(cfg);
this._skyboxMesh = new xeogl.Mesh(this, {
geometry: new xeogl.Geometry(this, { // Box-shaped geometry
primitive: "triangles",
positions: [
1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1, // v0-v1-v2-v3 front
1, 1, 1, 1, -1, 1, 1, -1, -1, 1, 1, -1, // v0-v3-v4-v5 right
1, 1, 1, 1, 1, -1, -1, 1, -1, -1, 1, 1, // v0-v5-v6-v1 top
-1, 1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, // v1-v6-v7-v2 left
-1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, // v7-v4-v3-v2 bottom
1, -1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1 // v4-v7-v6-v5 back
],
uv: [
0.5, 0.6666, 0.25, 0.6666, 0.25, 0.3333, 0.5, 0.3333, 0.5, 0.6666, 0.5, 0.3333, 0.75, 0.3333, 0.75, 0.6666,
0.5, 0.6666, 0.5, 1, 0.25, 1, 0.25, 0.6666, 0.25, 0.6666, 0.0, 0.6666, 0.0, 0.3333, 0.25, 0.3333,
0.25, 0, 0.50, 0, 0.50, 0.3333, 0.25, 0.3333, 0.75, 0.3333, 1.0, 0.3333, 1.0, 0.6666, 0.75, 0.6666
],
indices: [
0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11,
12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23
]
}),
scale: [2000, 2000, 2000], // Overridden when we initialize the 'size' property, below
rotation: [0, -90, 0],
material: new xeogl.PhongMaterial(this, {
ambient: [0, 0, 0],
diffuse: [0, 0, 0],
specular: [0, 0, 0],
emissive: [1, 1, 1],
emissiveMap: new xeogl.Texture(this, {
src: cfg.src,
flipY: true,
encoding: cfg.encoding || "sRGB"
}),
backfaces: true // Show interior faces of our skybox geometry
}),
stationary: true,
visible: false,
pickable: false,
collidable: false
});
this.size = cfg.size; // Sets 'xyz' property on the Mesh's Scale transform
this.active = cfg.active;
}
/**
* Size of this Skybox, given as the distance from the center at [0,0,0] to each face.
*
* Fires an {{#crossLink "Skybox/size:event"}}{{/crossLink}} event on change.
*
* @property size
* @default 1000
* @type {Number}
*/
set size(value) {
this._size = value || 1000;
this._skyboxMesh.scale = [this._size, this._size, this._size];
/**
Fired whenever this Skybox's {{#crossLink "Skybox/size:property"}}{{/crossLink}} property changes.
@event size
@param value {Array of Number} The property's new value
*/
this.fire("size", this._size);
}
get size() {
return this._size;
}
/**
Indicates whether this Skybox is visible or not.
Fires a {{#crossLink "Skybox/active:event"}}{{/crossLink}} event on change.
@property active
@default false
@type Boolean
*/
set active(value) {
this._skyboxMesh.visible = value;
/**
Fired whenever this Skybox's {{#crossLink "Skybox/active:property"}}{{/crossLink}} property changes.
@event active
@param value {Boolean} The property's new value
*/
this.fire("active", this._skyboxMesh.visible);
}
get active() {
return this._skyboxMesh.visible;
}
};