如何点击一个threejs 3dcanvas来选择和修改一个fabricjs对象

Question

我有一个带有 TextureCanvas 对象的 threejs 场景。
这个 TextureCanvas 有一个包含矩形对象的 FabricJs 画布。
我想单击对象并修改它（例如缩放、移动、修改它）（类似于在没有 threejs 的 FabricJs 画布中与它交互）。

我发现 (this and this) 与 3dcanvas 和 2dcanvas 并排。用户可以在 2dcanvas 中修改对象。
在第二个例子中，用户可以点击由THREE.WebGLRenderer管理的3dcanvas
这添加了一个 fabricjs.Circle 对象，它也出现在 2dcanvas 中。
在 2dcanvas 中可以通过拖动圆角来修改（缩放）它。

在我的例子中，我没有 2dcanvas 的视图。
我创建了另一个例子，如果我点击 3dcanvas 中的正方形，它被选中（显示角）并且正方形被缩放。 （仍然显示 2dcanvas，但仅供参考）。
这表明我可以通过 3dcanvas 与 fabricjs 对象交互。

接下来，我想像在 2dcanvas 中单击一样移动或修改对象。
我有鼠标的 2dcanvas 坐标。
是否有触发最近角点选择和拖动动作的功能，就像我在 2dcanvas 中单击并拖动一样？

谢谢，
阿维

function onMouseClick( evt ) {
  console.log('BEG renderer onMouseClick');
  evt.preventDefault();

  var array = getMousePosition( container, evt.clientX, evt.clientY );
  onClickPosition.fromArray( array );

  var intersects = getIntersects( onClickPosition, scene.children );

  if ( intersects.length > 0 && intersects[ 0 ].uv ) {
    var uv = intersects[ 0 ].uv;
    intersects[ 0 ].object.material.map.transformUv( uv );

    var x2 = getRealPosition( "x", uv.x );
    var y2 = getRealPosition( "x", uv.y );
    const pointer = {x: x2, y: y2}
    const target = canvas._searchPossibleTargets(canvas.getObjects(), pointer)
    let foundFabricjsObject = false;
    counter +=1;
    console.log('counter: ', counter);
    if (target) {
      console.log('Clicked on a fabricjs object');
      foundFabricjsObject = true;
      target.set('fill', 'red');
      if(counter%2 == 0) {
        console.log('scale the selected fabricjs object by 0.5');
        target.scale(0.5);
      }
      else {
        console.log('scale the selected fabricjs object by 2');
        target.scale(2.0);
      }
        
      canvas.setActiveObject(target).requestRenderAll()
    } else {
      console.log('Clicked NOT on a fabricjs object');
      canvas.discardActiveObject().requestRenderAll()
    }
    
    if(!foundFabricjsObject) {
      var circle = new fabric.Circle({
        radius: 3,
        left: getRealPosition( "x", uv.x ),
        top: getRealPosition( "y", uv.y ),
        fill: 'red'
      });
  
      canvas.add( circle );
    }
  }
}

Answer 1

好的，我找到了解决方案。见在这里