Three.js - 闪烁的纹理答案

【问题标题】：Three.js - Flickering TextureThree.js - 闪烁的纹理
【发布时间】：2013-07-04 08:00:32
【问题描述】：

我正在尝试加载从搅拌机导出的 JSON 文件。文件中有两个网格和两种材质。这是我用来加载 JSON 的代码。

var self = this;
var mushroomLoader = new THREE.JSONLoader();
    mushroomLoader.load('/js/Mushroom.js', function(mushroomGeometry, mushroomMaterial) {
    var shrooms = new THREE.Object3D();
    var mushroomCount = 10;
    var radius = 30;
        for(var i = 0; i < mushroomCount; i++) {
        var m = new THREE.Object3D();
    m.add(new THREE.Mesh(mushroomGeometry, mushroomMaterial[0]));
    m.add(new THREE.Mesh(mushroomGeometry, mushroomMaterial[1]));
        m.position.x = radius * Math.cos(Math.PI * 2 * i / mushroomCount);
        m.position.z = radius * Math.sin(Math.PI * 2 * i / mushroomCount);
    shrooms.add(m);
    }
    self.scene.add(shrooms);
}, 'images/textures');

蘑菇被分成两个网格，顶部和树干。我正在使用 MeshPhongMaterial。闪烁/消失的纹理位于顶部。奇怪的是其中一些显示正确。

【问题讨论】：

您似乎正在向每个对象添加两个具有相同几何形状的子网格，并且子网格都位于同一位置。如果是这样，那将导致 z-fighting 和闪烁。

标签： javascript three.js webgl blender

【解决方案1】：

你是对的@WestLangley！我从这里更改了我的代码

var m = new THREE.Object3D();
m.add(new THREE.Mesh(mushroomGeometry, mushroomMaterial[0]));
m.add(new THREE.Mesh(mushroomGeometry, mushroomMaterial[1]));

到

var m = new THREE.Mesh(mushroomGeometry, new THREE.MeshFaceMaterial(mushroomMaterial));

而且我不再有问题了。回想起来似乎很简单。我觉得 THREE.SceneUtils.createMultiMaterialObject 对两个网格使用相同的几何图形很奇怪。

【讨论】：