diff --git a/img/visualize/cloudy/back.png b/img/visualize/cloudy/back.png new file mode 100644 index 0000000..7a2c872 Binary files /dev/null and b/img/visualize/cloudy/back.png differ diff --git a/img/visualize/cloudy/down.png b/img/visualize/cloudy/down.png new file mode 100644 index 0000000..3eeac68 Binary files /dev/null and b/img/visualize/cloudy/down.png differ diff --git a/img/visualize/cloudy/front.png b/img/visualize/cloudy/front.png new file mode 100644 index 0000000..64aa4f7 Binary files /dev/null and b/img/visualize/cloudy/front.png differ diff --git a/img/visualize/cloudy/left.png b/img/visualize/cloudy/left.png new file mode 100644 index 0000000..c4a0a3d Binary files /dev/null and b/img/visualize/cloudy/left.png differ diff --git a/img/visualize/cloudy/right.png b/img/visualize/cloudy/right.png new file mode 100644 index 0000000..ce16e66 Binary files /dev/null and b/img/visualize/cloudy/right.png differ diff --git a/img/visualize/cloudy/up.png b/img/visualize/cloudy/up.png new file mode 100644 index 0000000..a8e2f14 Binary files /dev/null and b/img/visualize/cloudy/up.png differ diff --git a/js/component/card/three_d.js b/js/component/card/three_d.js index b280e8f..2e208d7 100644 --- a/js/component/card/three_d.js +++ b/js/component/card/three_d.js @@ -83,6 +83,7 @@ beestat.component.card.three_d.prototype.decorate_ = function(parent) { */ beestat.component.card.three_d.prototype.decorate_contents_ = function(parent) { const drawing_pane_container = document.createElement('div'); + drawing_pane_container.style.overflowX = 'hidden'; parent.appendChild(drawing_pane_container); this.decorate_drawing_pane_(drawing_pane_container); @@ -91,7 +92,6 @@ beestat.component.card.three_d.prototype.decorate_contents_ = function(parent) { const controls_container = document.createElement('div'); Object.assign(controls_container.style, { 'position': 'absolute', - // 'margin': 'auto', 'top': `${beestat.style.size.gutter}px`, 'left': '50%', 'width': '300px', diff --git a/js/component/scene.js b/js/component/scene.js index 5215c6b..89f45fb 100644 --- a/js/component/scene.js +++ b/js/component/scene.js @@ -92,6 +92,7 @@ beestat.component.scene.prototype.decorate_ = function(parent) { this.add_renderer_(parent); this.add_camera_(); this.add_controls_(parent); + this.add_skybox_(parent); // this.add_sky_(); // this.add_moon_(); // this.add_directional_light_moon_(); @@ -226,6 +227,36 @@ beestat.component.scene.prototype.add_controls_ = function(parent) { this.controls_.maxPolarAngle = Math.PI / 2.5; }; +/** + * Add a skybox background. Generated using Spacescape with the Unity export + * settings. After export: bottom is rotated CW 90°; top is roted 90°CCW. + * + * nx -> bk + * ny -> dn + * nz -> lf + * px -> ft + * py -> up + * pz -> rt + * + * @link https://www.mapcore.org/topic/24535-online-tools-to-convert-cubemaps-to-panoramas-and-vice-versa/ + * @link https://jaxry.github.io/panorama-to-cubemap/ + * @link http://alexcpeterson.com/spacescape/ + */ +beestat.component.scene.prototype.add_skybox_ = function() { + const skybox_name = 'cloudy'; + const loader = new THREE.CubeTextureLoader(); + loader.setPath('img/visualize/' + skybox_name + '/'); + const texture = loader.load([ + 'front.png', + 'back.png', + 'up.png', + 'down.png', + 'right.png', + 'left.png' + ]); + this.scene_.background = texture; +}; + /** * Add the sky to the scene. This is a shader that draws on the inside of a * box really far away. The size of the sun can be tweaked with the