Move Sprite along the surface of 3D model and also snapping

HOOPS Communicator
1 
const nodeid = await this._spriteManager.createSprite(
            url 
            , pos
            , 50,
            false,
            worldHeight,
            null, true
        );
 const scaleMatrix = new Communicator.Matrix()
       scaleMatrix.setScaleComponent(10, 10, 1.0)
 const moveMatrix = new Communicator.Matrix()
        moveMatrix.setTranslationComponent(
            pos.x,
            pos.y,
            pos.z
        )
        const finalMatrix = Communicator.Matrix.multiply(
            scaleMatrix,
            moveMatrix
        )
        await this._viewer.model.setNodeMatrix(nodeid, finalMatrix);


 async pickAndMoveTextBox(targetPosition) {
        // Compute the adjusted position for the pick operation using the mouse event position and an offset
        const newScreenPosition = {
            x: targetPosition.x, //+ this._offset.x,
            y: targetPosition.y //+ this._offset.y
        };
        try {
            // Perform the pick operation at the computed position with the specified configuration
            viewer.selectionManager.clear();
            viewer.selectionManager.setPickTolerance(tolerance);
            let config = new Communicator.PickConfig(Communicator.SelectionMask.Face | Communicator.SelectionMask.Line);
            let selectionItem = await viewer.view.pickFromPoint(newScreenPosition, config) 
            if (this._snapToModel && !selectionItem.nodeId) return;
            // Move the selected text box to the new 3D position
            await this._moveTextBoxTo(this._selectTextBox, selectionItem.world);
        } catch (error) {
            console.error('Error picking point and moving text box:', error);
        }
        return false;
    }
async _moveTextBoxTo(textBox, newPosition) {
        const moveMatrix = new Communicator.Matrix()
        moveMatrix.setTranslationComponent(
            newPosition.x,
            newPosition.y,
            newPosition.z
        )
        const finalMatrix = Communicator.Matrix.multiply(
            textBox.getCurrentMarkupItem().boxMatrix,
            moveMatrix
        )
        await this._viewer.model.setNodeMatrix(textBox.boxId, finalMatrix)
        textBox.getCurrentMarkupItem().boxPosition = newPosition
        // textBox._updateLeaderLine()
        // this.refreshMarkup()
    }

I need the markup should be billboard and also not able to move along the surface like in x, y ,z axis it is always moving one direct like 2d

2

Hello @raja.r,

There is a forum post on a Sprite Manager class:

Is your implementation based on this?

Thanks,
Tino

3

yes my implementation is based on this only.

4

@raja.r,

After taking a closer look at your code snippet, it has more similarities to one of the examples included in the Communicator package - that being the 3D Text Insertion example - than to the Sprite Manager class. To view the 3D Text Insertion example, please do the following:

As the example demonstrates, the textbox can be selected and moved in 3D space. The code is provided in text_insertion.js found in HOOPS_Communicator_2024.5.0\web_viewer\examples\scripts\examples

Thanks,
Tino