CODEWITHSUNDEEP
autodesk-forgeautodesk-viewerautodesk
hamdi
hamdi

Reputation: 85

How can I add inputs (textbox, slider etc.) into autodesk forge viewer

We can move objects using the transform tool. I want to display the current x, y, z coordinates of the selected object in an input and change it from there. But I couldn't add any input. I found examples but could not find source code.

Upvotes: 0

Views: 277

Answers (2)

hamdi
hamdi

Reputation: 85

I placed the inputs I want in html. And inside the motion function, I updated them dynamically over the value received by them.

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

Upvotes: 0

Chengxi Li
Chengxi Li

Reputation: 454

You can find the source code here.

It's a part of my colleague's blog about creating component transformations in forge viewer.

Upvotes: 1

Related Questions