javascript - 雾隐藏天空盒 (THREE.JS R76)

标签 javascript three.js skybox

我有一个相机所在的圆柱体。我设置了雾,所以 pipe 的末端不可见 - 但我希望天空盒通过圆柱体的 alpha 贴图侧面可见。雾挡住了 visibility ,我想知道需要采取什么措施来解决这个问题。

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

最佳答案

您只需添加fog: false即可忽略雾效果。

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

关于javascript - 雾隐藏天空盒 (THREE.JS R76),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37043418/

相关文章:

javascript - 从 ES6 到 HTML 的多行模板字符串(不包括换行符)

javascript - 使用 Javascript 在 session 中自动递增不起作用

javascript - three.js-围绕球体旋转矩形 Sprite ,以保持最小接近度

javascript - Three.js 太空游戏相机控制

c# - 以编程方式更改天空盒 Material (c#)

c# - Unity - 从阵列中获取随机天空盒

javascript - 限制发布请求的数量(Javascript + node.js + jQuery)

javascript - 获取当前选择的选项

javascript - Three.js 中 LookAt 和控件的冲突

html - Three.js:在带有天空盒的 Canvas 上显示 <div>