应用场景: 从2D画布中拖拽一个元素进入3D画布区域, 触发一个事件,比如在3D场景中添加相应的模型对象.

可以通过@shopify/draggable库来实现改功能:

• 通过npm安装js库

npm install @shopify/draggable --save

• 具体实现代码示例如下:

import { Draggable } from '@shopify/draggable';

// ...
// 假设materialDiv是一个div父元素,包含了所有draggable的buttons
somefunction() {
    const parentDiv = document.getElementById('materialDiv');
    const dragEvt = new Draggable(parentDiv, {
      draggable: 'button',
      dropzone: 'div',
      mirror: {
        constrainDimensions: true,
      },
    });
    
    dragEvt.on('drag:start', (evt) => {
      // 在拖拽开始时,可以设置被拖拽的元素的样式,比如设置zIndex使得该元素处于画布最顶部
      (evt.data.source as HTMLButtonElement).style.zIndex = '1000';
      (evt.data.source as HTMLButtonElement).style.opacity = '0.5';
    });
    dragEvt.on('mirror:move', (evt) => {
	// do something
    });

    dragEvt.on('drag:stop', (evt) => {
      // 拖拽结束后,判断被拖拽元素的当前位置,如果在3D画布区域内,则可以触发自定义事件
      // const threeCanvas = ....
      const threeCanvas = document.getElementById('canvasName');
      const rect = threeCanvas.getBoundingClientRect();
      const evtX = evt.sensorEvent.clientX;
      const evtY = evt.sensorEvent.clientY;
    if (evtX < rect.left || evtX > rect.right || evtY < rect.top || evtY > rect.bottom) {
      // 不在3D画布内
      return;
    } else {
      // 落入3D画布内
    }
}

• 发现的问题

使用了该js库后,发现编译时失败了:

ng build --prod --release

会报如下错误:

[error] SyntaxError: Unexpected token: keyword (default)

如果去掉--prod参数则能正常编译, 暂时未找到具体原因.