如何在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在查看器中可視地移動組件