Search code examples
autodesk-forgeautodesk-viewer

Why can't I hover and click the Threejs transformation tools?


I'm trying to make a tool to be able to move the custom model that I created. The first step I did was to display the transform tool and perform the change action. But I can't hover or click the transform tool. Am I missing something in my code?

  activateTheTransformTool() {    
    let bbox = this.viewer.model.getBoundingBox();    
    this.viewer.impl.createOverlayScene("Dotty.Viewing.Tool.TransformTool");

    this.transformControlTx = new THREE.TransformControls(
      this.viewer.impl.camera,
      this.viewer.impl.canvas,
      "translate"
    );

    this.transformControlTx.setSize(bbox.getBoundingSphere().radius * 5);

    this.transformControlTx.visible = false;

    this.viewer.impl.addOverlay(
      "Dotty.Viewing.Tool.TransformTool",
      this.transformControlTx
    );

    this.transformMesh = this.createTransformMesh();

    this.transformControlTx.attach(this.transformMesh);

    this.onItemSelected();
  }

  handleMouseMove(event) {
    if (this.transformControlTx) {
      if (this.isDragging) {
        console.log(this.transformControlTx);
        if (this.transformControlTx.onPointerMove(event)) {
          return true;
        }

        return false;
      }

      if (this.transformControlTx.onPointerHover(event)) return true;
    }

    //return _transRotControl.onPointerHover(event);
  }

onTxChange() {
   console.log("onTx change");
   this.viewer.impl.sceneUpdated(true);
}

onItemSelected() {
if (this.hitPoint) {
  this.transformControlTx.visible = true;

  this.transformControlTx.setPosition(this.hitPoint);

  this.transformControlTx.addEventListener("change", this.onTxChange);

      this.hitPoint = null;
    } else {
       this.transformControlTx.visible = false;
    }
  }

Solution

  • The code you shared seems to be ok (probably taken from this TransformationExtension, right?) but since it's only a part of the implementation, it's hard to tell what's wrong there. Do you perhaps see any errors or warnings in the console?

    Btw. I've recently implemented a similar transformation tool/extension in one of my code samples: https://github.com/petrbroz/forge-simple-viewer-nodejs/tree/experiment/xform-tool. You should be able to drop the TransformToolExtension.js into your Forge app, include the extension's ID when initializing the viewer (like I do here), and be good to go.