Search code examples
javascriptthree.jsskybox

Fog Hides Skybox (THREE.JS R76)


I have a cylinder the camera stays in. I have fog set so the end of the tube isn't visible - however I want the skybox to be visible through the alpha map sides of the cylinder. The fog blocks the visibility and am wondering what needs to be done to fix that.

var POS_X = 0,
    POS_Y = 0,
    POS_Z = 0,
    FOV = 60,
    WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    NEAR = 1,
    FAR = 120000, //Camera Far Distance
    renderer = new THREE.WebGLRenderer({antialias:true}),

............

function addFog(){
    scene.fog = new THREE.Fog(0x000000, 100, 40000);
}

............

function addSkybox(){
    var materialArray = [],
        imgArray = ["skybox_right.jpg", "skybox_left.jpg",
        "skybox_front.jpg", "skybox_back.jpg",
        "skybox_top.jpg", "skybox_bottom.jpg"];

    for (var i = 0; i < 6; i++){
        materialArray.push( new THREE.MeshBasicMaterial({
            map: loader.load( imgArray[i] ),
            side: THREE.BackSide
        }));
    }

    var skyMat = new THREE.MeshFaceMaterial( materialArray ),
        skyGeo = new THREE.BoxGeometry( 100000, 100000, 100000, 1, 1, 1),
        sky = new THREE.Mesh(skyGeo, skyMat);

    sky.name="skybox";
    scene.add(sky);
}

Solution

  • You can just add fog: false to ignore the fog effect.

    for (var i = 0; i < 6; i++){
        materialArray.push( new THREE.MeshBasicMaterial({
            map: loader.load( imgArray[i] ),
            side: THREE.BackSide,
            fog: false
        }));
    }