0

имеется функции загрузки модели

   var canvas = document.querySelectorAll(".cv").forEach(el => 
   el.addEventListener('click',loadModel(), false));

    var viewer = new JSC3D.Viewer(canvas);
    var logoTimerID = 0;


function loadModel() {
    if(logoTimerID > 0) {
        clearInterval(logoTimerID);
        logoTimerID = 0;
        viewer.enableDefaultInputHandler(true);
    }
    var models = document.getElementById('model_list');
    viewer.replaceSceneFromUrl('models/' + models[models.selectedIndex].innerHTML);
    viewer.update();
}

она выводит модель без проблем, но при дублировании html-кода по выводу модели,

            <div class=”Area”  id="main_frame">
              <div id="statistics"></div>
              <div style="text-align:center;">
                <div id="loading" style="position:absolute;top: 45%; margin-left: 40%; "></div>
              </div>
              <canvas  id="cv" width="1100";  height=550"></canvas>
              <div style="float:left; display:none;">
                <select id="model_list">
                  <option>dragon.stl</option>
                </select>
                <button id="load" onclick="loadModel();">Load</button>
              </div>   
                <div id="position">
                    <select  id="render_mode_list" id="change" onclick="setRenderMode();">
                      <option>сглаживание</option>
                      <option>каркас</option>
                      <option>плоская</option>
                      <option>вершины</option>
                      <option>освещение OFF</option>
                    </select>
                </div>
            </div>

выводится только одна модель, в дублированную часть кода она отказывается загружаться(в дублированом option находится другая модель)
введите сюда описание изображения

6
  • var models = document.getElementById('model_list'); указывает всегда на один и тот же элемент? Commented 19 мая 2019 в 20:07
  • А что у Вас за viewer? Он тоже дублируется? В смысле новый объект создаётся?
    – XelaNimed
    Commented 19 мая 2019 в 21:15
  • @XelaNimed var viewer = new JSC3D.Viewer(canvas); Нет, я дублирую только HTML-код
    – Stasia
    Commented 19 мая 2019 в 21:50
  • @StrangerintheQ Полагаю что нет, в отображаемый canvas загружается одна модель, в противоположный другая <canvas id="cv" width="1100"; height=550"></canvas> <div> <select id="model_list"> <option>detail.stl</option> </select> <button id="load" onclick="loadModel();">Load</button>
    – Stasia
    Commented 19 мая 2019 в 21:51
  • @Stasia Вы не в комментариях добавляйте поясняющую информацию, а вопрос редактируйте. В идеале сделайте рабочий пример кода (Ctrl + M в редакторе).
    – XelaNimed
    Commented 19 мая 2019 в 21:56

1 ответ 1

0

Не используйте на странице повторяющиеся id.

function loadModel(btn) {
  /* what is this timer? if(logoTimerID > 0) {
      clearInterval(logoTimerID);
      logoTimerID = 0;
      viewer.enableDefaultInputHandler(true);
  }*/
  var area = btn.closest(".Area");
  var models = area.querySelector('.model_list');
  var viewer = area.viewer;
  if (!viewer) {
    var canvas = area.querySelector('canvas');;
    viewer = new JSC3D.Viewer(canvas);
    area.viewer = viewer;
  }
  
  viewer.replaceSceneFromUrl('models/' + models[models.selectedIndex].innerHTML);
  viewer.update();
}
<div class=”Area”>
  <div class="statistics"></div>
  <div style="text-align:center;">
    <div class="loading" style="position:absolute;top: 45%; margin-left: 40%; "></div>
  </div>
  <canvas class="cv" width="1100" height="550"></canvas>
  <div style="float:left; display:none; ">
    <select class="model_list">
      <option>dragon.stl</option>
    </select>
    <button class="load" onclick="loadModel(this);">Load</button>
  </div>
  <div class="position">
    <select class="render_mode_list " id="change " onclick="setRenderMode(); ">
      <option>сглаживание</option>
      <option>каркас</option>
      <option>плоская</option>
      <option>вершины</option>
      <option>освещение OFF</option>
    </select>
  </div>
</div>


пришлось столкнуться с такой ошибкой:

var canvas = document.getElementsByClassName('cv');
this.canvas.addEventListener is not a function

Вот так:

document.querySelectorAll(".cv").forEach(el =>
  el.addEventListener('click', function() { loadModel(el); }, false)
);
14
  • спасибо, только вот столкнулась с еще одной проблемой, при замене var canvas = document.getElementById('cv'); на var canvas = document.getElementsByClassName('cv'); пришлось столкнуться с такой ошибкой: this.canvas.addEventListener is not a function
    – Stasia
    Commented 20 мая 2019 в 13:51
  • @Stasia добавил в ответ
    – user176262
    Commented 20 мая 2019 в 15:09
  • к сожалению и это не принесло никакого результата, возможно не те параметры использованы(изменения в ответе). Попыталась использовать метод cloneNode, но это ведь как и обычное копирование, которое не допускает использование Id, верно?
    – Stasia
    Commented 20 мая 2019 в 19:24
  • @Stasia Этого не может быть. Вы неаккуратно скопировали к себе мой код.
    – user176262
    Commented 20 мая 2019 в 20:52
  • разве это неправильно: var canvas = document.querySelectorAll(".cv").forEach(el => el.addEventListener('click',loadModel(), false));
    – Stasia
    Commented 20 мая 2019 в 21:33

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.