如何为模型制作放置工具？

Posted 2023-03-16

【中文标题】如何为模型制作放置工具？

【英文标题】：How to make a placementment tool for a model?

【发布时间】：2021-12-11 11:33:49

【问题描述】：

我按照blog 中的教程进行操作，并希望创建一个像 TransformationExtension 这样的工具。

我发现我选择的模型没有立即在光标上居中，拖动时有间隙。

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);
;

【问题讨论】：

也许您需要从event.clientX 和event.clientY 中减去画布偏移量，如下所示：function getMousePos(canvas, e) var rect = canvas.getBoundingClientRect(); return x: e.clientX - rect.left, y: e.clientY - rect.top ; ？

是的.. 它的作品。谢谢！

【参考方案1】：

正如@AlexAR 提到的，当使用clientX 和clientY 值查找相对于特定DOM 元素的光标位置时，您必须记住减去元素的客户端边界矩形：Find mouse position relative to element。

顺便说一句。我最近构建了另一个示例 Forge 应用程序，可用于将新模型拖放到您可能会发现有用的查看器中：https://github.com/petrbroz/forge-assembly-configurator。主要的拖放逻辑在setupDragDrop函数中实现。