Jquery ui 如何将对象拖放到three.js网格中？

这就是我已经尝试过的：

    $( ".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网格上。我使用的是
jqueryui-Draggable
和
Droppable
，其中我只能在html DOM中放置元素，但我想将它放置在
three.js mesh
上。



我怎样才能做到这一点


如果你能做到的话。因此，我将高度赞赏你的努力

我怎样才能做到这一点

您可以尝试的一种可能方法是使用
css2drender
，如本官方示例所示：

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

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

mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；

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

raycaster.setFromCamera（鼠标，相机）；

然后，光线投射器就可以与您的场景进行交叉测试。
我将如何实现CSS2Drender？请帮忙！对不起，没有人会为您提供完整的解决方案。您必须自己找出如何使用
css2drender
。上面提到的例子应该提供足够的代码来研究逻辑。