如何在AutoDesk Forge查看器中实现拖动控件？

Question

我试图在我在查看器中创建的文本几何体上实现拖动控件。 我这样创建文本：

createText(params) {
const textGeometry = new TextGeometry(params.text,
      Object.assign({}, {
        font: new Font(FontJson),
        params
      }));
const geometry = new THREE.BufferGeometry;

geometry.fromGeometry(textGeometry);

const material = this.createColorMaterial(
      params.color);

const text = new THREE.Mesh(
      geometry, material);

text.scale.set(params.scale, params.scale, params.scale);

text.position.set(
      params.position.x,
      params.position.y,
      10);


this.intersectMeshes.push(text);
this.viewer.impl.scene.add(text);

this.viewer.impl.sceneUpdated(true);

return text;

}

这很好用，网格已添加到查看器中，我可以看到它们。 太棒了！ 到目前为止，这很好。 现在，我希望能够在添加它们后用鼠标将它们拖动。 我注意到Three.js已经内置了拖动控件，所以我只是这样实现它们：

  enableDragging(){
let controls = new THREE.DragControls( this.viewer, this.viewer.impl.camera.perspectiveCamera, this.viewer.impl.canvas );
controls.addEventListener( 'dragstart', dragStartCallback );
let startColor;
controls.addEventListener( 'dragend', dragendCallback );
function dragStartCallback(event) {
  startColor = event.object.material.color.getHex();
  event.object.material.color.setHex(0x000000);
}

function dragendCallback(event) {
  event.object.material.color.setColor(startColor);
}

}

经过大量的调试之后，我已经知道问题出在哪里。 由于某种原因，当我单击其中一个网格时，光线投射器找不到任何相交。 IE浏览器，我回来的数组是空的。 无论我在哪里单击这些对象。

我的实现是错误的，还是我错误地设置了这些网格以使其可拖动？ 我已经使拖动控件在查看器外部工作，只是不在其中运行。

Answer 1

在查看DragControls的代码时，这是行不通的，查看器的实现与实现相机的方式有很大不同。 您将需要实现定制版本的DragControls或查看我的变换工具并将其调整为适用于定制网格：

使用TransformTool在查看器中可视地移动组件