diff --git a/src/viewer.ts b/src/viewer.ts index 72a453b7..eb3af670 100644 --- a/src/viewer.ts +++ b/src/viewer.ts @@ -21,6 +21,7 @@ import { Scene, Texture, Vector2, + Vector3, WebGLRenderer, AmbientLight, type Mapping, @@ -328,6 +329,7 @@ export class SkinViewer { private onDevicePixelRatioChange: () => void; private _nameTag: NameTagObject | null = null; + private nameTagYOffset: number = 20; constructor(options: SkinViewerOptions = {}) { this.canvas = options.canvas === undefined ? document.createElement("canvas") : options.canvas; @@ -562,6 +564,10 @@ export class SkinViewer { this.recreateEarsTexture(); if (options.ears === true) { this.playerObject.ears.visible = true; + if (this._nameTag) { + this.nameTagYOffset = 25; + this._nameTag.position.y = this.nameTagYOffset; + } } } } else { @@ -628,6 +634,10 @@ export class SkinViewer { if (options.makeVisible !== false) { this.playerObject.ears.visible = true; + if (this._nameTag) { + this.nameTagYOffset = 25; + this._nameTag.position.y = this.nameTagYOffset; + } } } else { return loadImage(source).then(image => this.loadEars(image, options)); @@ -636,6 +646,10 @@ export class SkinViewer { resetEars(): void { this.playerObject.ears.visible = false; + if (this._nameTag) { + this.nameTagYOffset = 20; + this._nameTag.position.y = this.nameTagYOffset; + } this.playerObject.ears.map = null; if (this.earsTexture !== null) { this.earsTexture.dispose(); @@ -668,11 +682,14 @@ export class SkinViewer { return loadImage(source).then(image => this.loadBackground(image, mapping)); } } - private draw(): void { const dt = this.clock.getDelta(); if (this._animation !== null) { this._animation.update(this.playerObject, dt); + if (this._nameTag) { + this._nameTag.position.y = + this.playerObject.skin.head.getWorldPosition(new Vector3()).y + this.nameTagYOffset - 8; + } } if (this.autoRotate) { if (!(this.controls.enableRotate && this.isUserRotating)) { @@ -863,6 +880,9 @@ export class SkinViewer { this.playerObject.resetJoints(); this.playerObject.position.set(0, 0, 0); this.playerObject.rotation.set(0, 0, 0); + if (this._nameTag) { + this._nameTag.position.y = this.nameTagYOffset; + } this.clock.stop(); this.clock.autoStart = true; } @@ -903,7 +923,8 @@ export class SkinViewer { // Add the new name tag to the scene this.playerWrapper.add(newVal); // Set y position - newVal.position.y = 20; + this.nameTagYOffset = this.playerObject.ears.visible ? 25 : 20; + newVal.position.y = this.nameTagYOffset; } this._nameTag = newVal;