Javascript 即使在three.js中发生了重大变化，仍能保持虚假

我尝试加载我的

.obj

和

.mtl

文件，现在我尝试在按键上更改对象的材质，我可以使用纹理图像按预期进行更改。但是，当我想使用phong效果更改材质时，无论是否使用纹理图像，都不会发生这种情况

//当我在按键上使用基本纹理图像时，这种方法工作得很好

var texture1 = THREE.ImageUtils.loadTexture("neavik/9.jpg");
var texture2 = THREE.ImageUtils.loadTexture("neavik/10.jpg");

if (child.material.name == "meta") {
child.material.map = texture1;
child.material.needsUpdate = true;
child.receiveShadow = true;


var index = 0;
var onKeyDown = function(event) {

    if (event.keyCode == 67) { // when 'c' is pressed
        object.traverse(function(child) {
                if (child instanceof THREE.Mesh) {
                    var colors = [texture2, texture1];
                    if (child.material.name == "meta") {

                        if (index == colors.length) index = 0;
                        child.material.map = colors[index++];
                        child.material.needsUpdate = true;
                        child.geometry.buffersNeedUpdate = true;
                        child.geometry.uvsNeedUpdate = true;
                    }
                }
            }
        };
        document.addEventListener('keyup', onKeyDown, true);

    });

//现在，如果我尝试改变材质，效果和PHONG一样，它不会反映按键上的任何变化。[也没有错误]

var texture1 = THREE.ImageUtils.loadTexture("neavik/9.jpg");
var texture2 = THREE.ImageUtils.loadTexture("neavik/10.jpg");

var cleana = new THREE.MeshPhongMaterial({
    map: texture1,
    color: 0xffffef,
    specular: 0x000000,
    combine: THREE.AddOperation,
    reflectivity: 0
})

var cleanb = new THREE.MeshPhongMaterial({
    map: texture2,
    color: 0xffffef,
    specular: 0x000000,
    combine: THREE.AddOperation,
    reflectivity: 0
})

if (child.material.name == "meta") {

    child.material = cleana;
    child.material.needsUpdate = true;

    child.receiveShadow = true;


    var index = 0;

    var onKeyDown = function(event) {
        if (event.keyCode == 67) { // when 'c' is pressed

            object.traverse(function(child) {
                    if (child instanceof THREE.Mesh) {
                        var colors = [cleana, cleanb];
                        if (child.material.name == "meta") {

                            if (index == colors.length) index = 0;
                            child.material = colors[index++];
                            child.material.needsUpdate = true;
                            child.geometry.buffersNeedUpdate = true;
                            child.geometry.uvsNeedUpdate = true;

                        }
                    }
                }
            };
            document.addEventListener('keyup', onKeyDown, true);

        });

---

如果有其他方法，请告诉我。

如果您想交换所需的全部材料，请执行以下操作：

child.material = cleana;

或

然后你很可能要做：

child.material.needsUpdate = true;

阅读更多有关如何更新材料的信息

更新 因此，如果要使用数组进行设置：

var materials = [cleana, cleanb];

child.material = materials[0]; // cleana

或

而且很可能：

child.material.needsUpdate = true;

---

---

它完全可以与一系列材料配合使用。您甚至不需要设置

material.needsUpdate=true

。演示。

正如你所说的，我已经试过了。但当我在数组中使用相同的cleana和cleanb时，它不会反映按键上的任何更改。@andyram我更新了我的答案。我看不出它在数组中不起作用的任何原因。感谢更新，我以前尝试过这种方法，对我来说，这种材料[0]只有在没有材料应用于对象时才起作用。当我将此数组调用到一个已经存在材质的对象，并且我想在按键上循环几个材质时，所做的更改不会反映出来。@andyram它工作得很好@安德拉姆，你有没有用小提琴检查我的更新？

child.material = materials[1]; // cleanb

child.material.needsUpdate = true;