Question

这是我尝试过的：

<v-autocomplete
  v-model="model"
  :items="items"
  :loading="loading"
  :search-input.sync="search"
  color="dark"
  hide-no-data
  cache-items
  item-text="name"
  label="Autocomplete"
  placeholder="Search items"
  prepend-icon="mdi-database-search"
  return-object
  :filter="filter"
></v-autocomplete>

基本上，我想将元素从$( ".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，其中我只能将元素放在html DOM中，但是我想将其放在Droppable上。

我怎样才能做到这一点？

如果可以的话。因此，我将非常感谢您的努力。

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 );

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

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

1 个答案: