Three.js-闪烁的纹理

Question

I am trying to load a JSON file that I exported from blender. There are two meshes and two materials in the file. This is the code that I use to load the 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');

The mushroom is separated into two meshes, the top and the trunk. I am using MeshPhongMaterial. The texture that is flashing/disappearing is on the top. The weird thing is that some of them display correctly.

Answer 1

You were right @WestLangley! I changed my code from this

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

to

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

and I am not having anymore issues. It seems so simple in retrospect. I thought it was weird that THREE.SceneUtils.createMultiMaterialObject uses the same geometry for both meshes.