File size: 5,538 Bytes
e4dacd1 77152ab 69d561e e3edd0f b168dfd e4dacd1 e2d8e2d 83600b4 6a1dfcd e2d8e2d 83600b4 e2d8e2d e4dacd1 00e5bce e4dacd1 ee9d520 e4dacd1 121b917 20be1be 121b917 e4dacd1 02d5b93 e4dacd1 121b917 080d93f 121b917 e4dacd1 6a1dfcd 6bdb5c5 871ee40 6bdb5c5 6a1dfcd 52f12f0 def9b3f 52f12f0 6a1dfcd 11e42b8 dc41452 def9b3f 738f7b8 def9b3f 95c92bf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
const modelViewer1 = document.getElementById('modelViewer1');
const modelViewer2 = document.getElementById('modelViewer2');
const tabButtons = document.querySelectorAll('.tab-button');
const allSubOptions = document.querySelectorAll('.tab-content input[type="radio"]');
const initialCameraOrbit1 = "177.62deg 96.26deg 4.65m";
const initialCameraOrbit2 = "-90.53deg 92.82deg 4.69m";
const resetvalue = "0deg -90deg 0deg";
document.addEventListener('DOMContentLoaded', function() {
tabButtons.forEach(button => {
button.addEventListener('click', function() {
openTab(this.getAttribute('data-tab'));
});
});
// Event listeners for all sub-options
allSubOptions.forEach(option => option.addEventListener('change', function() {
uncheckAllSubOptions(this.value);
if(this.checked) {
updateModels(this) ;
}
}));
// Initialize the first tab open
openTab('tab1');
});
function updateModels(selectedSubOption) {
const modelPaths = getModelPaths(selectedSubOption.value);
// Set the camera orbit based on specific conditions
switch(selectedSubOption.value) {
case 'option1c':
cameraOrbit = initialCameraOrbit2;
break;
case 'option1d':
cameraOrbit = initialCameraOrbit2;
break;
default:
cameraOrbit = initialCameraOrbit1;
}
modelViewer1.setAttribute('src', modelPaths.model1Path);
modelViewer1.addEventListener('load', () => {
modelViewer1.setAttribute('orientation', resetvalue);
modelViewer1.setAttribute('camera-orbit', cameraOrbit);
modelViewer1.resetCamera();
});
modelViewer2.setAttribute('src', modelPaths.model2Path);
modelViewer2.addEventListener('load', () => {
modelViewer2.setAttribute('orientation', resetvalue);
modelViewer2.setAttribute('camera-orbit', cameraOrbit);
modelViewer2.resetCamera();
});
}
function getModelPaths(optionValue) {
switch (optionValue) {
case 'option1a':
return { model1Path: 'landscape/kodim08_50_ori.gltf', model2Path: 'landscape/kodim08_50_sh.gltf' };
case 'option1b':
return { model1Path: 'landscape/kodim08_30_ori.gltf', model2Path: 'landscape/kodim08_30_sh.gltf' };
case 'option1c':
return { model1Path: 'landscape/kodim08_50_ori_top.gltf', model2Path: 'landscape/kodim08_50_sh_top.gltf' };
case 'option1d':
return { model1Path: 'landscape/kodim08_30_ori_top.gltf', model2Path: 'landscape/kodim08_30_sh_top.gltf' };
case 'option2a':
return { model1Path: 'landscape/kodim01_50_ori.gltf', model2Path: 'landscape/kodim01_50_sh.gltf' };
case 'option2b':
return { model1Path: 'landscape/kodim01_30_ori.gltf', model2Path: 'landscape/kodim01_30_sh.gltf' };
case 'option3a':
return { model1Path: 'landscape/kodim02_50_ori.gltf', model2Path: 'landscape/kodim02_50_sh.gltf' };
case 'option3b':
return { model1Path: 'landscape/kodim02_30_ori.gltf', model2Path: 'landscape/kodim02_30_sh.gltf' };
case 'option4a':
return { model1Path: 'landscape/div2k801_50_ori.gltf', model2Path: 'landscape/div2k801_50_sh.gltf' };
case 'option4b':
return { model1Path: 'landscape/div2k801_30_ori.gltf', model2Path: 'landscape/div2k801_30_sh.gltf' };
case 'option5a':
return { model1Path: 'landscape/div2k802_50_ori.gltf', model2Path: 'landscape/div2k802_50_sh.gltf' };
case 'option5b':
return { model1Path: 'landscape/div2k802_30_ori.gltf', model2Path: 'landscape/div2k802_30_sh.gltf' };
case 'option6a':
return { model1Path: 'landscape/clic01_50_ori.gltf', model2Path: 'landscape/clic01_50_sh.gltf' };
case 'option6b':
return { model1Path: 'landscape/clic01_30_ori.gltf', model2Path: 'landscape/clic01_30_sh.gltf' };
case 'option7a':
return { model1Path: 'landscape/clic02_50_ori.gltf', model2Path: 'landscape/clic02_50_sh.gltf' };
case 'option7b':
return { model1Path: 'landscape/clic02_30_ori.gltf', model2Path: 'landscape/clic02_30_sh.gltf' };
}
}
function uncheckAllSubOptions(exceptValue) {
const allSubOptions = document.querySelectorAll('.tab-content input[type="radio"]');
allSubOptions.forEach(option => {
if (option.value !== exceptValue) {
option.checked = false;
}
});
}
function openTab(tabId) {
const tabButtons = document.querySelectorAll('.tab-button');
const allSubOptions = document.querySelectorAll('.tab-content input[type="radio"]');
var i, tabcontent;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
var selectedTabContent = document.getElementById(tabId);
if (selectedTabContent) {
selectedTabContent.style.display = "block";
}
tabButtons.forEach(button => button.classList.remove('active'));
document.querySelector(`.tab-button[data-tab='${tabId}']`).classList.add('active');
const firstSubOption = selectedTabContent.querySelector('input[type="radio"]');
if (firstSubOption) {
uncheckAllSubOptions(firstSubOption);
firstSubOption.checked = true; // Set the first sub-option as checked
updateModels(firstSubOption); // Update the models based on this sub-option
}
}
|