I've been tinkering with the vertex shader for 3D models, but I'm running into an issue where I can't seem to change all other models' materials to match the selected model's material. Each viewport contains 4 models, and when I select one (v1 in the bottom left), I want the rest of the models to update their materials accordingly. I've implemented the logic in the Model Selection code, but it doesn't seem to apply to all other models. Below, there are assumptions made about having 4 vertex shaders and model creations. Any advice on how to solve this would be greatly appreciated! =)
https://i.sstatic.net/h747n.png
Main
function init() {
container = document.getElementById('container');
// scene
scene = new THREE.Scene();
defineViewports();
initCameras();
// shader properties and object loaders
var shaderMaterial1 = createShaderMaterial(vertexShader(), fragmentShader());
loadModelWithShader("male_model_object.json", shaderMaterial1, 0, 0);
var shaderMaterial2 = createShaderMaterial(vertexShader2(), fragmentShader());
loadModelWithShader("male_model_object.json", shaderMaterial2, 500, 14);
var shaderMaterial3 = createShaderMaterial(vertexShader3(), fragmentShader());
loadModelWithShader("male_model_object.json", shaderMaterial3, 0, 514);
var shaderMaterial4 = createShaderMaterial(vertexShader4(), fragmentShader());
loadModelWithShader("male_model_object.json", shaderMaterial4, 500, 514);
// fps stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
// renderer
renderer = initializeRenderer();
container.appendChild(renderer.domElement);
// event listeners
window.addEventListener('updateSize', updateSize, false);
window.addEventListener('click', onClick, false);
window.addEventListener('keypress', onDocumentKeyPress, false);
}
Model Selection
function onDocumentKeyPress(event) {
switch(event.keyCode) {
case 13: // enter key
if(selectedIndex >= 0) {
var selectedVertexShader = 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 = selectedVertexShader;
materials[i].needsUpdate = true;
}
}
}
}}
Renderer
function render() {
updateSize();
for (var i = 0; i < views.length; ++i ) {
view = views[i];
camera = view.camera;
// set up rendering parameters
adjustViewportAndScissor(view);
setupCameraAspect(camera, view.width, view.height);
renderer.render(scene, camera);
}}