[Threejs]2D与3D场景间的交互问题(2)

由于一直没能解决上篇文章提到的编译问题, 只好使用了另外一个js库interact来替代.具体用法如下:

• 通过npm安装interact

npm install interactjs@next --save
// + [email protected]
// added 13 packages in 13.036s

• 具体代码逻辑示例如下

import interact from 'interactjs';

somefunction() {
    const that = this;
    // 假设mainContent为根元素的id
    const mainZone = document.getElementById('mainContent');
    let nodeCopy: HTMLElement = null;
    // draggable 为可拖拽的class, 在html中定义某个元素的class为draggable则表示它支持拖拽
    interact('.draggable').draggable({
      onstart(event) {
        // 默认情况下没有副本跟随鼠标移动;在拖拽开始时,可以复制一个对象出来,并自定义样式
        // 当然也可以不这么做, just you like
        nodeCopy = (event.target as Node).cloneNode() as HTMLElement;
        mainZone.appendChild(nodeCopy);
        nodeCopy.style.zIndex = '1000';
        nodeCopy.style.opacity = '0.5';
        nodeCopy.style.width = '60px';
        nodeCopy.style.height = '60px';
      },
      onmove(event) {
        // 实时更新nodeCopy的位置
        nodeCopy.style.left = event.client.x + 'px';
        nodeCopy.style.top = event.client.y + 'px';
      },
      onend(event) {
        mainZone.removeChild(nodeCopy);
	    // 拖拽结束后,判断被拖拽元素的当前位置,如果在3D画布区域内,则可以触发自定义事件
	    // const threeCanvas = ....
	    const threeCanvas = document.getElementById('canvasName');
	    const rect = threeCanvas.getBoundingClientRect();
	    const evtX = event.client.x;
	    const evtY = event.client.y;
	    if (evtX < rect.left || evtX > rect.right || evtY < rect.top || evtY > rect.bottom) {
	      // 不在3D画布内
	      return;
	    } else {
	      // 落入3D画布内
	    }
    });
}

通过以下方式编译正常:

ng build --prod --release