Измените все материалы других моделей на материал выбранной модели

Question

Я экспериментирую вокруг вершинного шейдера трехмерных моделей. Моя проблема в том, что у меня возникла трудность смены материала других моделей на материал выбранной модели. Здесь у меня есть 4 модели в каждом окне просмотра. Если бы я выбрал нижнюю левую часть модели (v1), остальная часть материала модели изменилась бы соответственно на выбранную модель. В коде выбора модели я реализовал логику, но не обновил все остальные модели. Ниже предполагается, что это 4 вершинных шейдера и 4 создания модели. Пожалуйста, порекомендуйте. Спасибо =)

Главная

function init() { 
container = document.getElementById('container'); 

// scene 
scene = new THREE.Scene(); 

defineViewports(); 
initCameras(); 

// shader property 
var shaderProp = { 
    uniforms: { 
     displacement: { 
      type: "f", 
      value: 0.0 
     } 
    }, 
    vertexShader: vertexShader(), 
    fragmentShader: fragmentShader() 
}; 

var shaderMaterial1 = new THREE.ShaderMaterial(shaderProp); 

//object loaders with shader properties 
var objectLoader = new THREE.ObjectLoader(); 
objectLoader.load("male_model_object.json", function(object) { 
    //if you want to add your custom material 
    object.traverse(function (child) { 
     if (child instanceof THREE.Mesh) { 
      child.material = shaderMaterial1; 
     } 
    }); 

    object.position.set(0, 0, 0); 
    scene.add(object); 
    objects.push(object); 
    materials.push(shaderMaterial1); 
}); 

// shader property 
var shaderProp = { 
    uniforms: {   
     displacement: { 
      type: "f", 
      value: 0.0 
     } 
    }, 
    vertexShader: vertexShader2(), 
    fragmentShader: fragmentShader() 
}; 

var shaderMaterial2 = new THREE.ShaderMaterial(shaderProp); 

//object loaders with shader properties 
var objectLoader2 = new THREE.ObjectLoader(); 
objectLoader2.load("male_model_object.json", function(object) { 
    //if you want to add your custom material 
    object.traverse(function (child) { 
     if (child instanceof THREE.Mesh) { 
      child.material = shaderMaterial2; 
     } 
    }); 

    object.position.set(500, 14, 0); 
    scene.add(object); 
    objects.push(object); 
    materials.push(shaderMaterial2); 
}); 

// shader property 
var shaderProp = { 
    uniforms: {   
     displacement: { 
      type: "f", 
      value: 0.0 
     } 
    }, 
    vertexShader: vertexShader3(), 
    fragmentShader: fragmentShader() 
}; 

var shaderMaterial3 = new THREE.ShaderMaterial(shaderProp); 

//object loaders with shader properties 
var objectLoader3 = new THREE.ObjectLoader(); 
objectLoader3.load("male_model_object.json", function(object) { 
    //if you want to add your custom material 
    object.traverse(function (child) { 
     if (child instanceof THREE.Mesh) { 
      child.material = shaderMaterial3; 
     } 
    }); 

    object.position.set(0, 514, 0); 
    scene.add(object); 
    objects.push(object); 
    materials.push(shaderMaterial3); 
}); 

// shader property 
var shaderProp = { 
    uniforms: {   
     displacement: { 
      type: "f", 
      value: randomDisplacementValue() 
     } 
    }, 
    vertexShader: vertexShader4(), 
    fragmentShader: fragmentShader() 
}; 

var shaderMaterial4 = new THREE.ShaderMaterial(shaderProp); 

//object loaders with shader properties 
var objectLoader4 = new THREE.ObjectLoader(); 
objectLoader4.load("male_model_object.json", function(object) { 
    //if you want to add your custom material 
    object.traverse(function (child) { 
     if (child instanceof THREE.Mesh) { 
      child.material = shaderMaterial4; 
     } 
    }); 

    object.position.set(500, 514, 0); 
    scene.add(object); 
    objects.push(object); 
    materials.push(shaderMaterial4); 
}); 

//fps 
stats = new Stats(); 
stats.domElement.style.position = 'absolute'; 
stats.domElement.style.top = '0px'; 
container.appendChild(stats.domElement); 

//renderer 
renderer = new THREE.WebGLRenderer({antialias: true}); 
renderer.setSize(window.innerWidth, window.innerHeight); 
container.appendChild(renderer.domElement); 

window.addEventListener('updateSize', updateSize, false); 
window.addEventListener('click', onClick, false); 
window.addEventListener('keypress', onDocumentKeyPress, false);} 

Выбор модели

function onDocumentKeyPress(event) { 
switch(event.keyCode) { 
    // enter 
    case 13: 
     if(selectedIndex >= 0) { 
      // TODO: LOGIC BEHIND GETTING THE EQUATION OF SELECTED MODEL 
      var shader = objects[selectedIndex].children[0].material.vertexShader; 

      for(var j = 0; j < objects.length; ++j) { 
       for(var i = 0; i < materials.length; ++i) { 
        materials[i].vertexShader = shader; 
        materials[i].needsUpdate = true; 
       } 
      } 
     } 
}} 

Renderer

function render() { 
updateSize(); 
for (var i = 0; i < views.length; ++i) { 
    view = views[i]; 
    camera = view.camera; 

    //view.updateCamera(camera); 
    var left = Math.floor(windowWidth * view.left); 
    var bottom = Math.floor(windowHeight * view.bottom); 
    var width = Math.floor(windowWidth * view.width); 
    var height = Math.floor(windowHeight * view.height); 
    renderer.setViewport(left, bottom, width, height); 
    renderer.setScissor(left, bottom, width, height); 
    renderer.setScissorTest(true); 
    renderer.setClearColor(view.background); 

    camera.aspect = width/height; 
    camera.updateProjectionMatrix(); 

    renderer.render(scene, camera); 
}} 

Answer 1

Вы можете установить материалы как ссылку на переменную вне модели и достичь этой ссылки, когда вам необходимо принудительно изменить. Изменение материала будет применяться ко всем моделям с использованием этого материала.

var shaderMaterial1 = new THREE.ShaderMaterial(shaderProp); 
var shaderMaterial2 = new THREE.ShaderMaterial(shaderProp); 

var objectLoader = new THREE.ObjectLoader(); 
    objectLoader.load("male_model_object.json", function(object) { 
     object.traverse(function (child) { 
      if (child instanceof THREE.Mesh) { 
       child.material = shaderMaterial; 
      } 
     } 
    }); 
    scene.add(object); 

function onDocumentKeyPress(event) { 
... 
    for(var j = 0; j < objects.length; ++j) { 
      for(var i = 0; i < materials.length; ++i) { 
       materials[i] = shaderMaterial2; 
       materials[i].needsUpdate = true; 
      } 
    } 
... 

}