将 WebGL 文本几何图形添加到查看器的场景后，如何使其可选择？答案

【问题标题】：How can you make WebGL text geometry selectable after you add it to the scene of the viewer?将 WebGL 文本几何图形添加到查看器的场景后，如何使其可选择？
【发布时间】：2018-07-04 02:40:19
【问题描述】：

将文本几何对象添加到查看器后，我注意到我无法像使用查看器中的其他对象那样使用鼠标选择它。我怎样才能使它可选？我没有尝试任何东西，因为我没有在文档中看到任何想法。我希望能够监听我已经关闭的选择事件，我只是不知道如何使这个新的 TextGeometry 对象可选择。这是我的代码，抱歉我之前没有包含它。

    createText (params) {

    const geometry = new TextGeometry(params.text,
      Object.assign({}, {
        font: new Font(FontJson),
        params
      }))

    const material = this.createColorMaterial(
      params.color)

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

    text.position.set(
      params.position.x,
      params.position.y,
      params.position.z)

    this.viewer.impl.scene.add(text)

    this.viewer.impl.sceneUpdated(true)
  }

谢谢！

【问题讨论】：

如果没有看到任何代码，我们真的无法帮助您。但是您可能会像选择任何几何图形一样选择 textgeometry。
我添加了我的代码，对此感到抱歉。

标签： javascript three.js autodesk-forge

【解决方案1】：

根据我的经验，Forge Viewer 只会与来自 Forge Model Derivative 服务的已翻译模型（SVF、F2D）以及内置 API 进行交互。文本几何看起来像是通过THREE.TextGeometry 创建的自定义几何，不是吗？你没有说太多。

如果您想在 Forge Viewer 中与自定义几何图形交互，您必须实现 Viewer Tool 并添加一些自逻辑，例如在鼠标单击时突出显示文本几何图形。更多详情可以参考这里：https://forge.autodesk.com/cloud_and_mobile/2015/03/creating-tools-for-the-view-data-api.html

由于我在这里没有看到你的任何代码，我假设你的文本被放入_viewer.sceneAfter，这里是鼠标左键单击的示例：

// change color of custom geometries while mouse clicking
handleSingleClick( event, button ) {
  const _viewer = this.viewer;
  const intersectObjects = (function () {
    const pointerVector = new THREE.Vector3();
    const pointerDir = new THREE.Vector3();
    const ray = new THREE.Raycaster();
    const camera = _viewer.impl.camera;

    return function(pointer, objects, recursive) {
        const rect = _viewer.impl.canvas.getBoundingClientRect();
        const x = (( pointer.clientX - rect.left) / rect.width ) * 2 - 1;
        const y = - (( pointer.clientY - rect.top) / rect.height ) * 2 + 1;

        if (camera.isPerspective) {
            pointerVector.set( x, y, 0.5 );
            pointerVector.unproject( camera );
            ray.set( camera.position, pointerVector.sub( camera.position ).normalize() );
        } else {
            pointerVector.set( x, y, -1 );
            pointerVector.unproject( camera );
            pointerDir.set( 0, 0, -1 );
            ray.set( pointerVector, pointerDir.transformDirection( camera.matrixWorld ) );
        }

        const intersections = ray.intersectObjects( objects, recursive );
        return intersections[0] ? intersections[0] : null;
    };
  })();

  const pointer = event.pointers ? event.pointers[ 0 ] : event;
  // Get interseted custom geometries
  const result = intersectObjects( pointer, _viewer.sceneAfter.children );

  if( result && result.object ) {
    const mesh = result.object;
    // Change object color
    let curColor = mesh.material.color;
    curColor = ( curColor.getHex() == 0xff0000 ? 0x00ff00 : 0xff0000 );
    mesh.material.color.setHex( curColor );

    // Rerender
    this.viewer.impl.invalidate( true, true, false );
  }

  return false;
}

希望对你有帮助。

【讨论】：

【解决方案2】：

我写了一篇专门讨论这个话题的文章：Handling custom meshes selection along model components in the Forge Viewer

【讨论】：

您的帖子似乎不适合我。出于某种原因，它会拾取立方体，而不是我创建的 TextGeometry。