ThreeJS Background Issue
A scene setup that shows an issue with backgrounds.
HTML
<script src="https://vanruesc.github.io/postprocessing/public/three.js"></script>
<script src="https://vanruesc.github.io/postprocessing/public/orbit-controls.js"></script>
JavaScript
(function() { "use strict";
/**
* Loads assets.
*
* @method loadAssets
*/
(function loadAssets() {
const loadingManager = new THREE.LoadingManager();
const cubeTextureLoader = new THREE.CubeTextureLoader(loadingManager);
const assets = {};
loadingManager.onProgress = function(item, loaded, total) {
if(loaded === total) { setupScene(assets); }
};
const path = "https://vanruesc.github.io/postprocessing/public/textures/skies/space3/";
const format = ".jpg";
const urls = [
path + "px" + format, path + "nx" + format,
path + "py" + format, path + "ny" + format,
path + "pz" + format, path + "nz" + format
];
cubeTextureLoader.setCrossOrigin("");
cubeTextureLoader.load(urls, function(textureCube) {
assets.sky = textureCube;
});
}());
/**
* Creates the scene and initiates the render loop.
*
* @method setupScene
* @param {Object} assets - Preloaded assets.
*/
function setupScene(assets) {
const viewport = document.body;
const width = window.innerWidth;
const height = 150;
const aspect = width / height;
// Renderer and Scene.
const renderer = new THREE.WebGLRenderer({
antialias: true,
logarithmicDepthBuffer: true // false
});
renderer.setClearColor(0x000000);
renderer.setSize(width, height);
viewport.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x2d200f, 0.0025);
// Sky.
scene.background = assets.sky;
// Camera.
const camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 2000);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enablePan = false;
controls.minDistance = 2.5;
camera.position.set(1, 1, 3);
camera.lookAt(controls.target);
scene.add(camera);
// Lights.
const ambientLight = new THREE.AmbientLight(0x888888);
const directionalLight = new THREE.DirectionalLight(0xffbbaa);
directionalLight.position.set(1, 1,...