他のすべてのモデルの材質を選択したモデルの材質に変更する

Question

3Dモデルの頂点シェーダを試しています。私の問題は、他のすべてのモデルの素材を選択したモデルの素材に変更することが難しいことです。ここでは、各ビューポートに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; 
       } 
      } 
     } 
}} 

レンダラ）=ありがとう

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参照として設定し、この参照先に到達することができます。この材料を使用するすべてのモデルに材料の変更が適用されます。

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; 
      } 
    } 
... 

}