如何将对象拖放到 three.js Mesh 中？

Question

这是我尝试过的：

    $( ".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 上。

我怎样才能使它成为可能？

如果你能做到这一点。所以我会非常感谢你的努力。

Answer 1

我怎样才能使它成为可能？

您可以尝试的一种可能方法是使用CSS2DRenderer，就像在这个官方示例中展示的那样：https://threejs.org/examples/css2d_label

检查代码时，您会看到标签是通过 HTML/CSS 呈现的。因此，当一个 DOM 元素被拖到画布上并放下时，您可以将其包装到 CSS2DObject 的实例中，并将其作为目标网格的子对象添加到场景图中。

如果您需要确定鼠标光标悬停在哪个网格上，您可以使用基本的光线投射。这意味着您可以像这样在mouse 事件侦听器中计算鼠标坐标：

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

然后使用这些坐标来设置光线投射器，如下所示：

raycaster.setFromCamera( mouse, camera );

然后，光线投射器已准备好与您的场景进行交叉测试。