Chrome移動上的three.js霧無法正常工作

Question

好吧，我有一個場景，並向其中添加了一些霧氣，結果是霧氣使整個屏幕充滿了該顏色，就像純黑色背景一樣。

Chrome版本：39.0.2171.93移動設備：nexus 5 Android：lolipop

這是我的代碼：

 Demo.prototype.initializeScene = function( settings ) {

    var defaults = {

        fogColor: 0x000000,
        fogIntensity: 0.0005,
        near:50000,
        far:120000

    };

    this.options.scene = $.extend(true, defaults, settings);

    this.scene = new THREE.Scene();
    this.scene.fog = new THREE.FogExp2( this.options.scene.fogColor, this.options.scene.fogIntensity );


}

該代碼在台式機和其他移動設備上運行良好。 如果我除霧，一切似乎都很好。

此外，一切都發生在使用Blender創建的圓頂（json）網格內部，然后進行加載，如果有重大問題，這里是代碼。

Demo.prototype.initializeEnvironment = function() {

    var that = this;

    loadMesh("geometry/dome.json", function(geometry, materials) {

        var materials = [
            new THREE.MeshLambertMaterial({ color: 0x3333ff, shading: THREE.FlatShading, overdraw: false}),
            new THREE.MeshLambertMaterial({ color: 0x2e2eff, wireframe: true})
        ];

        that.dome = new THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
        that.dome.position.set(0,0,0);
        that.dome.scale.set(500,500,500);
        that.scene.add(that.dome);

    });

}

最后是渲染器代碼：

Demo.prototype.initializeRenderer = function( settings ) {

    var defaults = {

        init :{
            antialias: true, 
            alpha: true,
            autoClear: false
        },

        clearColor: 0x000000,
        clearColorIntensity: 1

    };

    this.options.renderer = $.extend(true, defaults, settings);

    this.renderer = new THREE.WebGLRenderer( this.options.renderer.init );
    this.renderer.setClearColor( this.options.renderer.clearColor, this.options.renderer.clearColorIntensity );
    this.renderer.setSize( this.options.generic.container.clientWidth, this.options.generic.container.clientHeight );

    this.options.generic.container.appendChild( this.renderer.domElement );

}

Answer 1

我正在使用Three.js r73，並在使用Android 5的Nexus 4上遇到相同的問題。禁用抗鋸齒后，霧似乎可以再次工作。

通過設置渲染器的pixelRatio，可以實現相同的抗鋸齒效果。 這是我的工作：

renderer.setPixelRatio((window.devicePixelRatio || 1) * 2);