简体   繁体   English

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

[英]How do you implement drag controls in the AutoDesk forge viewer?

I am trying to implement drag controls on this text geometry that I am creating in the viewer. 我试图在我在查看器中创建的文本几何体上实现拖动控件。 I create the text like so: 我这样创建文本:

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;

} }

This works great, the meshes get added to the viewer, I can see them. 这很好用,网格已添加到查看器中,我可以看到它们。 Fantastic! 太棒了! Thus far, it is good. 到目前为止,这很好。 Now, I want to be able to drag them around with my mouse after I have added them. 现在,我希望能够在添加它们后用鼠标将它们拖动。 I noticed that Three.js already has drag controls built in, so I just implemented them like so: 我注意到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);
}

} }

After a big of debugging, I have seen where the problem occurs. 经过大量的调试之后,我已经知道问题出在哪里。 For some reason, when I click on one of the meshes, the raycaster doesn't find any intersections. 由于某种原因,当我单击其中一个网格时,光线投射器找不到任何相交。 IE the array I get back is empty. IE浏览器,我回来的数组是空的。 No matter where I click on these objects. 无论我在哪里单击这些对象。

Is my implementation wrong, or did I provision these meshes wrong to make them draggable? 我的实现是错误的,还是我错误地设置了这些网格以使其可拖动? I have gotten the drag controls to work outside of the viewer, just not within it. 我已经使拖动控件在查看器外部工作,只是不在其中运行。

This will not work, looking at the code of DragControls, the viewer implementation is too different in the way it implements the camera. 在查看DragControls的代码时,这是行不通的,查看器的实现与实现相机的方式有很大不同。 You would need to either implement a custom version of DragControls or take a look at my transform tool and adapt it for custom meshes: 您将需要实现定制版本的DragControls或查看我的变换工具并将其调整为适用于定制网格:

Moving visually your components in the viewer using the TransformTool 使用TransformTool在查看器中可视地移动组件

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM