Create Custom avatar for walkmode

HOOPS Communicator
, ,
1

Screenshot 2024-02-06 at 12.10.01 PM
Screenshot 2024-02-06 at 12.10.01 PM1920×916 77 KB

i want to create 3d Avatar while walking on floor. is it possible in hoops communicator and if yes how do i do can you give me some sample code.

2

Hey @raja.r

I don’t think we have anything in our documentation about this. Maybe @beau.trifiro may have an idea?

If you have support portal access, I’d definitely recommend submitting a feature request which you can do here.

3

Hi @raja.r ,

Unfortunately, this is not part of Communicator’s functionality. However, you can submit a feature request for this as @gabriel.peragine mentioned!

4

I used sprintManager to add avatar image on walk. when i try to walk

2D left & top position is calculating very fast so image is moving out of bounding box even if i move mouse slowly.


 let ppoint = this._viewer.view.projectPoint(sprite.center, camera);
        let offsetx, offsety;
        if (sprite.offsetdata.x == undefined) {
            offsetx = -sprite.offsetdata.width / 2;
        }
        else {
            offsetx = sprite.offsetdata.x + sprite.offsetdata.width / 2 * (1 - sprite.scale);
        }

        if (sprite.offsetdata.y == undefined) {
            offsety = -sprite.offsetdata.height / 2;
        }
        else {
            offsety = sprite.offsetdata.y + sprite.offsetdata.height / 2 * (1 - sprite.scale);
        }
        
        console.log("camera position: left:", (ppoint.x + offsetx), "top:", ppoint.y + offsety)

        $("#" + sprite.nodeid).css({ left: (ppoint.x + offsetx) + "px", top: (ppoint.y + offsety) + "px", position: 'absolute' });

SprintManager:-

 /** @hidden */
    onMouseMove(event) {
        super.onMouseMove(event);
        if(this._isMouseDown && this._spriteManagerHandler === null)
        {
            // this._markupPosition.z=0
            const cam = this._viewer.view.getCamera().copy()
            const spriteManager = new SpriteManager(this._viewer, cam._position);
            $("#webviewer-container").prepend('<div id="hcCollabSpriteOverlay" style="width: 100%; height: 100%; background: none;z-index:10000;position: absolute;pointer-events:none"></div>');
            spriteManager.setNativeSpriteContainer("hcCollabSpriteOverlay");
            spriteManager.createDOMSprite(Walk, cam._position, 0.1,false,true);
            // const crossMarkup = new CrossMarkup(this._viewer, this._markupPosition);
            this._spriteManagerHandler = this._viewer.markupManager.registerMarkup(spriteManager);
        }
    }

    /** @hidden */
    onMouseUp(event) {
        super.onMouseUp(event);
        this._isMouseDown = false;
        if(this._spriteManagerHandler !== null)
        {
            const spriteManager = this._viewer.markupManager._getItemManager()._markupItems.get(this._spriteManagerHandler)
            spriteManager.flushAll()
            this._viewer.markupManager.unregisterMarkup(this._spriteManagerHandler);
            this._spriteManagerHandler = null;
        }
    }