How to display the contents of the link (link to the 3D model)?

Question

At the moment, everything looks like this jsfiddle.net/x6uqtLab/6/, but when certain radiobutton is triggered, you need to display an image not corresponding to the jpg button pressed (as in my code), but a 3D model. Link to one of them https://sketchfab.com/models/176738e6a3cf4bf486bce3abe284c0d4/embed I'm not strong in javascript, so please your help.

HTML -----------

<div id="rows" class="rows"> <div class="row"> <img src="" width="80"> <label><input type="radio" name="1" class="radio"></label> <img src="" width="80"> <label><input type="radio" name="1" class="radio"></label> <img src="" width="80"> <label><input type="radio" name="1" class="radio"></label> </div> <div class="row"> <img src="" width="80"> <label><input type="radio" name="2" class="radio"></label> <img src="" width="80"> <label><input type="radio" name="2" class="radio"></label> <img src="" width="80"> <label><input type="radio" name="2" class="radio"></label> </div> <div class="row"> <img src="" width="80"> <label><input type="radio" name="3" class="radio"></label> <img src="" width="80"> <label><input type="radio" name="3" class="radio"></label> <img src="" width="80"> <label><input type="radio" name="3" class="radio"></label> </div>

JS ----------------------------

 var imageToggle = (function(doc){ var box = doc.querySelector('#rows'), rows = box.querySelectorAll('.row'), rowCount = rows.length, toggleAll = [], cartes = [], data = {}, /** * @type Function * @return {[]} */ getCheckeds = function() { var checkeds = toggleAll.filter(function(toggle){ return toggle.checked; }); return checkeds.map(function(toggle, i){ return toggle.value; }); }, /** * @type Function * @param {[]} arr * @return {[]} */ cartesianProduct = function (arr) { return arr.reduce(function(a,b){ return a.map(function(x){ return b.map(function(y){ return x.concat(y); }) }).reduce(function(a,b){ return a.concat(b) },[]) }, [[]]) }; [].forEach.call(rows, function(row, i){ var toggles = row.querySelectorAll('[type="radio"]'); cartes[i] = []; [].forEach.call(toggles, function(toggle, j){ cartes[i][j] = toggle.value = j; toggleAll.push(toggle); }); }); cartes = cartesianProduct(cartes); return function(images, callBack) { callBack = callBack || function(){}; if(images.length != cartes.length) { throw new Error('Должно быть ' + cartes.length + ' изображений'); } images.forEach(function(image, i){ data[cartes[i].join('-')] = image; }); toggleAll.forEach(function(toggle){ toggle.addEventListener('change', function(){ var checkeds = getCheckeds(); if(checkeds.length == rowCount) { callBack(data[checkeds.join('-')]); } }); }); }; })(document); var result = document.querySelector('#result'), len = Math.pow(3, 3), images = [], i = 0; for(; i < len; i++) { images.push('image-' + (i + 1) + '.jpeg'); } imageToggle(images, function(imageUrl){ result.innerText = imageUrl; });

That is, do you need a 3D model to open when you click on the radiobutton next to the button?
The bottom line is that there are 3 groups each with 3 radiobats.
Depending on the radio bands selected in each group, a certain 3D model should be displayed.
Simply put, under the radio buttons there are materials of which the chair is made: 1 group of 3 radio bats.
Here I need, depending on the chosen configuration, to display a certain 3D image pre-recorded in the base as a
Approximately should be done as here sitdown.sk/detail/raya_23/129/category/135/type/3 there are a few options below with the choice of components of the chair

Answer 1 · 2016-11-25T18:37:59

Something like this. Here's a third-party editor: https://jsfiddle.net/zp56szoe/3/

 $(function() { // Начало самого кода var categories = {human: '0x0', technics: '1x0'}; // Список категорий. Установить надо начальные значения var view = function(c) { // Список всех возможных комбинаций var models = { human_0x0_technics_1x0: "b4d09f17df1043b2b8baeae51347a4b2", human_0x1_technics_1x0: "eb320ba995e040789c1192bcf860af5e", human_0x2_technics_1x0: "24b736f75b29464f8b2a62eb6d421533", human_0x3_technics_1x0: "057893ec02134e4b86c495ff505fd004", human_0x0_technics_1x1: "9432459670914c4eb007fbe525966b6d", human_0x1_technics_1x1: "aefc4f2a29914e779e97be7cf5e7675b", human_0x2_technics_1x1: "7355bbb7edf14fed9273eedadf513f5c", human_0x3_technics_1x1: "7a8eb56b3eeb49f793b5a1dfbb7cac35", human_0x0_technics_1x2: "b6fee17b9cd14255ace12ff2a8205754", human_0x1_technics_1x2: "bb4a3847ec8d4c908736a29805560799", human_0x2_technics_1x2: "2d6212aec95243809eed0971fb96dd7b", human_0x3_technics_1x2: "8199bfdac59b44e9a7a0daae8436750e", human_0x0_technics_1x3: "692a107c048f41079f22455a3c28dc1b", human_0x1_technics_1x3: "c07b2847faf7459190163a8b999b4b4e", human_0x2_technics_1x3: "9b56b004a8494ad69e754dd780108a3c", human_0x3_technics_1x3: "4d8ddf708a714e6898c7147b3ca3e0c5" }; // Создание "ключа" var key = ''; for(var i in c){ if(key == ''){ key += i+'_'+c[i]; }else{ key += '_'+i+'_'+c[i]; }; }; $('#model_view').attr('src', 'https://sketchfab.com/models/'+models[key]+'/embed'); // Загрузка нужной модели }; view(categories); // Отправляем начальную модель $('.rows .row input[type="radio"]').click(function() { // Клик на radiobutton var e = this; categories[$(e).attr('name')] = $(e).attr('value'); // Запись данных в список view(categories); // Отправление модели }); });

 body {margin: 0; font-family: arial} .view {width:100%;height:300px;border: 0;background-color:black} .rows {margin: 10px 10px 0 10px} .rows .row {margin-bottom: 10px} .rows .row .title {font-size: 18pt;margin-bottom: 5px}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- HTML --> <iframe src="" class="view" id="model_view"></iframe> <div class="rows"> <div class="row"> <div class="title">Категория 1</div> <label><input type="radio" name="human" value="0x0" checked=""><span>0</span></label> <label><input type="radio" name="human" value="0x1"><span>1</span></label> <label><input type="radio" name="human" value="0x2"><span>2</span></label> <label><input type="radio" name="human" value="0x3"><span>3</span></label> </div> <div class="row"> <div class="title">Категория 2</div> <label><input type="radio" name="technics" value="1x0" checked=""><span>0</span></label> <label><input type="radio" name="technics" value="1x1"><span>1</span></label> <label><input type="radio" name="technics" value="1x2"><span>2</span></label> <label><input type="radio" name="technics" value="1x3"><span>3</span></label> </div> </div>

I have one more example to make it clearer how jsfiddle.net/LLe2zL2h should look and work.
Only when selecting all 3 radio batteries, display the chair model that corresponds to the selected components.
The pictures in the code are curves, but I think the essence will be clear)
@shadiq, unfortunately you need to specify all possible combinations of categories to display the desired model
But it outputs jpg and you need these links, I just don’t know how to write them into an array and output them later.
and you do not know how to create an array with these links?
the only thing I need to change in the code is to write these values somewhere, and then output them.

How to display the contents of the link (link to the 3D model)?

1 answer 1

More articles: