如何将输入文本框、滑块等添加到 Autodesk forge 查看器中

问题描述

我们可以使用 transform tool 移动对象。我想在输入中显示所选对象的当前 x、y、z 坐标并从那里更改它。但我无法添加任何输入。我找到了 examples，但找不到源代码。

解决方法

您可以找到源代码 here。

这是我同事关于 creating component transformations in forge viewer 的博客的一部分。

,

我将我想要的输入放在 html 中。在运动函数内部，我根据它们接收到的值动态更新它们。

<!--TRANSFORM DIV- index.html-->
<div id="MyControls" class="adsk control">
    <label>X</label>
    <input id="XAxis" type="text" />
    <label>Y</label>
    <input id="YAxis" type="text" />
    <label>Z</label>
    <input id="ZAxis" type="text" />
</div>


// transform.js
 var AxisArray = ["XAxis","YAxis","ZAxis"];

    AxisArray.forEach(function (axis) {
        document.getElementById(axis).addEventListener("change",function () {
            positionChangeInputs();
        });
    });


    function positionChangeInputs() {
        
        for (var fragId in _selectedFragProxyMap) {

            var fragProxy = _selectedFragProxyMap[fragId];

            var position = new THREE.Vector3(
                fragProxy.position.x = document.getElementById("XAxis").value,fragProxy.position.y = document.getElementById("YAxis").value,fragProxy.position.z = document.getElementById("ZAxis").value);

            fragProxy.position = position;

            fragProxy.updateAnimTransform();
        }

        viewer.impl.sceneUpdated(true);
       
        
    }