Как я могу перетащить объект и поместить его внутрь трех. js Me sh? - PullRequest
Новая
       133

Как я могу перетащить объект и поместить его внутрь трех. js Me sh?

0 голосов
/ 09 июля 2020

Это то, что я еще пробовал: 

    $( ".box" ).draggable({
      helper:'clone',
      start: function( event, ui ) {
        back.material.map = new THREE.Color(0xeeeeee);
        back.material.needsUpdate = true;
      },
      stop: function( event, ui ) {
        back.material.map = texture;
        back.material.needsUpdate = true;
      }
    });
    $("canvas").droppable({ // here I've selected canvas for dropping element
        accept:".box",
        drop: function( event, ui ) {
          var item = $(ui.draggable).clone();
          $(this).addClass("ui-state-highlight").append(item);
          hanger1();  
       }
   });

В основном я хочу перетащить элемент за пределы сцены three.js и поместить его внутри холста поверх three.js mesh. Я использую jQuery UI Draggable и Droppable, в которых я могу отбросить элемент только внутри html DOM, но я хочу отбросить его над three.js mesh.

как я могу сделать это возможным?

Если сможешь. так что я буду очень признателен за ваши старания.

1 Ответ

0 голосов
/ 09 июля 2020

как я могу сделать это возможным?

Один из возможных подходов, который вы можете попробовать, - это использование CSS2DRenderer, как показано в этом официальном примере: https://threejs.org/examples/css2d_label

При проверке кода вы увидите, что метки отображаются через HTML / CSS. Поэтому, когда элемент DOM перетаскивается на холст и опускается, вы оборачиваете его в экземпляр CSS2DObject и добавляете его в граф сцены как дочерний элемент вашего целевого меня sh.

Если вам нужно чтобы определить, какой из sh был наведен курсором мыши, вы можете использовать basi c raycasting. Это означает, что вы можете вычислить координаты мыши в слушателе событий mouse следующим образом: 

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

, а затем использовать эти координаты для настройки Raycaster следующим образом: 

raycaster.setFromCamera( mouse, camera );

Затем готов к испытаниям на пересечение с вашими сценами.

...