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

**URL:** <https://forum.techsoft3d.com/t/move-sprite-along-the-surface-of-3d-model-and-also-snapping/3957>\
**Category:** HOOPS Visualize Web\
**Tags:** code\
**Created:** [August 13, 2024, 4:15pm UTC](https://forum.techsoft3d.com/t/move-sprite-along-the-surface-of-3d-model-and-also-snapping/3957 "2024-08-13T16:15:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![raja.r](https://avatars.discourse-cdn.com/v4/letter/r/a3d4f5/32.png) [@raja.r](https://forum.techsoft3d.com/u/raja.r)\
**Post date:** [August 13, 2024, 4:15pm UTC](https://forum.techsoft3d.com/t/move-sprite-along-the-surface-of-3d-model-and-also-snapping/3957/1 "2024-08-13T16:15:23Z")

</div>

```auto
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

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [August 13, 2024, 5:18pm UTC](https://forum.techsoft3d.com/t/move-sprite-along-the-surface-of-3d-model-and-also-snapping/3957/2 "2024-08-13T17:18:59Z")

</div>

Hello @raja.r,

There is a forum post on a Sprite Manager class:

> [@Sprite Manager Class](https://forum.techsoft3d.com/t/sprite-manager-class/447):
>
> HOOPS Communicator makes it easy to create any kind of complex 2D markup via the [MarkupManager](https://docs.techsoft3d.com/communicator/latest/build/api_ref/typedoc/classes/communicator.markupmanager.html) class which uses an SVG layer on top of the 3D model for most markup types. However, sometimes it can be desirable to create markup that is part of the 3D scene. This allows it to be occluded by other 3D objects and also makes the markup geometry selectable as part of the standard HOOPS Communicator selection mechanism. The SpriteManager class below is a fairly straightforward implementation…

Is your implementation based on this?

Thanks,  
Tino

---

<div class="post-metadata">

**Author:** ![raja.r](https://avatars.discourse-cdn.com/v4/letter/r/a3d4f5/32.png) [@raja.r](https://forum.techsoft3d.com/u/raja.r)\
**Post date:** [August 14, 2024, 1:04am UTC](https://forum.techsoft3d.com/t/move-sprite-along-the-surface-of-3d-model-and-also-snapping/3957/3 "2024-08-14T01:04:20Z")

</div>

yes my implementation is based on this only.

---

<div class="post-metadata">

**Author:** ![tino](https://avatars.discourse-cdn.com/v4/letter/t/9dc877/32.png) [@tino](https://forum.techsoft3d.com/u/tino)\
**Post date:** [August 14, 2024, 3:27pm UTC](https://forum.techsoft3d.com/t/move-sprite-along-the-surface-of-3d-model-and-also-snapping/3957/4 "2024-08-14T15:27:15Z")

</div>

@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:

- Launch the server by double-clicking _start\_server.bat_ found in the directory _HOOPS\_Communicator\_2024.5.0\quick\_start_
- Load the example in the Web Viewer by clicking the URL:  
[http://localhost:11180/text\_insertion.html?viewer=csr](http://localhost:11180/text_insertion.html?viewer=csr)

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