How to make a placementment tool for a model?

Question

I followed tutorial from this blog and want to create a tool like TransformationExtension.

I found that the model I selected was not immediately centered on the cursor and there was a gap when dragging it.

document.onmousemove = (event) => {
    if (!event.ctrlKey) return;

    let res = this.viewer.impl.hitTest(
        event.clientX,
        event.clientY,
        true,
        null,
        [this.viewer.model.getModelId()]
    );
    let pt = null;

    if (res) {
        pt = res.intersectPoint;
    } else {
        pt = viewer.impl.intersectGround(event.clientX, event.clientY);
    }

    let tr = this.selectedModel.getPlacementTransform();
    tr.elements[12] = pt.x;
    tr.elements[13] = pt.y;
    tr.elements[14] = pt.z;
    this.selectedModel.setPlacementTransform(tr);
    this.viewer.impl.invalidate(true, true, true);
};

Maybe you need to subtract the canvas offset from `event.clientX` and `event.clientY` with something like this : `function getMousePos(canvas, e) { var rect = canvas.getBoundingClientRect(); return { x: e.clientX - rect.left, y: e.clientY - rect.top }; } ` ? — AlexAR, Oct 26 '21 at 09:08

score 0 · Answer 1 · answered Oct 29 '21 at 09:06

As @AlexAR mentioned, when finding the cursor position relative to a specific DOM element using the clientX and clientY values, you have to remember subtracting the element's client bounding rect: Find mouse position relative to element.

Btw. I've recently built another sample Forge app that can be used to drag&drop new models into the viewer that you might find helpful: https://github.com/petrbroz/forge-assembly-configurator. The main drag&drop logic is implemented in the setupDragDrop function.

How to make a placementment tool for a model?

1 Answers1