CODEWITHSUNDEEP
javascriptthree.jsskybox
Michael Paccione
Michael Paccione

Reputation: 2817

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);
}

Upvotes: 1

Views: 1465

Answers (1)

yomotsu
yomotsu

Reputation: 1462

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
    }));
}

Upvotes: 7

Related Questions