viral-viewer-2 6.4.5 → 6.4.7

package/dist/components/avatar-manager/viral-avatar-manager.d.ts

@@ -4,5 +4,6 @@ export declare class ViralAvatarManager {
     private viralViewerApi;
     avatars: ViralAvatar[];
     constructor(viralViewerApi: ViralViewerApi);
-    load(avatarGLBUrl: string, idleUrl: string, walkUrl: string, id?: string): ViralAvatar;
+    load(avatarGLBUrl: string, idleUrl: string, walkUrl: string, scaleRatio?: number, speed?: number, id?: string, name?: string): ViralAvatar;
+    remove(id: string): void;
 }

package/dist/components/custom-objects/viral-avatar.d.ts

@@ -2,16 +2,24 @@ import { Vector3 } from "three";
 import { ViralViewerApi } from "../..";
 export declare class ViralAvatar {
     private viralViewerApi;
+    scaleRatio: number;
     private mixer;
     private idleAnimation;
     private walkAnimation;
     private avatar;
     private destination;
     isReady: boolean;
+    name: string;
     id: string;
-    constructor(viralViewerApi: ViralViewerApi, avatarGLBUrl: string, idleUrl: string, walkUrl: string, id?: string);
+    private MOVEMENT_SPEED;
+    private nameDiv;
+    private chatDiv;
+    private talkContent;
+    constructor(viralViewerApi: ViralViewerApi, avatarGLBUrl: string, idleUrl: string, walkUrl: string, scaleRatio?: number, speed?: number, id?: string, name?: string);
     idle(): void;
     walk(): void;
+    talk(content: string): void;
     render(delta: number): void;
     updateDestination(point: Vector3): void;
+    dispose(): void;
 }

package/dist/index.mjs

@@ -42461,22 +42461,28 @@ class t3 {
     return i;
   }
 }
-const i3 = 0.064;
+const i3 = 0.032;
 class n3 {
-  constructor(e, t, i, s, r) {
-    this.viralViewerApi = e, this.mixer = null, this.idleAnimation = null, this.walkAnimation = null, this.avatar = null, this.destination = null, this.isReady = !1, this.id = t3.generateRandomString(10), r && (this.id = r), this.viralViewerApi.viralLoader.threeLoader.loadGLTF(
+  constructor(e, t, i, s, r = 2, a = 1, l, h) {
+    this.viralViewerApi = e, this.scaleRatio = r, this.mixer = null, this.idleAnimation = null, this.walkAnimation = null, this.avatar = null, this.destination = null, this.isReady = !1, this.name = "", this.id = t3.generateRandomString(10), this.MOVEMENT_SPEED = 0.032, this.talkContent = "", l && (this.id = l), h && (this.name = h, this.nameDiv = document.createElement("div"), this.nameDiv.setAttribute(
+      "style",
+      "position: absolute; top:0; left:0;transform: translateX(-50%); pointer-events: none; background-color:rgba(226, 230, 220,1); color:rgb(23, 49, 44); padding: 5px ; border-radius:5px; font-size:x-small"
+    ), this.nameDiv.id = this.id, this.nameDiv.append(this.name), this.viralViewerApi.targetElement.appendChild(this.nameDiv)), this.chatDiv = document.createElement("div"), this.chatDiv.setAttribute(
+      "style",
+      "position: absolute;display:none; top:0; left:0;transform: translate(-50%, -100%); pointer-events: none; background-color:rgba(226, 230, 220,1); color:rgb(23, 49, 44); padding: 5px ; border-radius:5px; font-size:x-small"
+    ), this.viralViewerApi.targetElement.appendChild(this.chatDiv), this.MOVEMENT_SPEED = i3 * a, this.viralViewerApi.viralLoader.threeLoader.loadGLTF(
       t,
-      (a) => {
-        this.avatar = a.scene;
-        let l = new G(2, 2, 2);
-        this.avatar.scale.copy(l), this.mixer = new R2(a.scene), this.viralViewerApi.viralScene.scene.add(a.scene), this.viralViewerApi.viralRenderer.render(), this.viralViewerApi.viralLoader.threeLoader.loadGLTF(
+      (u) => {
+        this.avatar = u.scene;
+        let f = new G(r, r, r);
+        this.avatar.scale.copy(f), console.log(this.avatar), this.mixer = new R2(u.scene), this.viralViewerApi.viralScene.scene.add(u.scene), this.viralViewerApi.viralRenderer.render(), this.viralViewerApi.viralLoader.threeLoader.loadGLTF(
           i,
-          (h) => {
-            this.idleAnimation = this.mixer.clipAction(h.animations[0]), this.viralViewerApi.viralLoader.threeLoader.loadGLTF(
+          (p) => {
+            this.idleAnimation = this.mixer.clipAction(p.animations[0]), this.viralViewerApi.viralLoader.threeLoader.loadGLTF(
               s,
-              (u) => {
+              (g) => {
                 this.walkAnimation = this.mixer.clipAction(
-                  u.animations[0]
+                  g.animations[0]
                 ), Sn.information("load avatar succeed!"), this.isReady = !0, this.idle();
               }
             );
@@ -42491,12 +42497,37 @@ class n3 {
   walk() {
     this.walkAnimation && this.walkAnimation.reset().fadeIn(0.34).play();
   }
+  talk(e) {
+    this.talkContent = e, this.chatDiv.append(this.talkContent), setTimeout(() => {
+      this.talkContent = "", this.chatDiv.firstChild && this.chatDiv.removeChild(this.chatDiv.firstChild);
+    }, 4e3);
+  }
   render(e) {
     if (this.avatar && this.mixer) {
       let t = this.avatar.getObjectByName("Hips");
-      if (this.mixer.update(e), t.position.set(0, t.position.y, 0), this.destination && this.avatar.position.distanceTo(this.destination) > 0.1) {
-        const i = this.avatar.position.clone().sub(this.destination).normalize().multiplyScalar(i3);
-        this.avatar.position.sub(i), this.avatar.lookAt(this.destination), this.idle();
+      this.mixer.update(e), t.position.set(0, t.position.y, 0);
+      let i = this.viralViewerApi.viralCamera.worldToClient(
+        new G(
+          this.avatar.position.x,
+          this.avatar.position.y - 1,
+          this.avatar.position.z
+        )
+      );
+      if (i && (this.nameDiv.style.left = `${i.x}px`, this.nameDiv.style.top = `${i.y}px`), this.talkContent.length > 0) {
+        this.chatDiv.style.display = "block";
+        let s = this.viralViewerApi.viralCamera.worldToClient(
+          new G(
+            this.avatar.position.x,
+            this.avatar.position.y + 2 * this.scaleRatio + 1,
+            this.avatar.position.z
+          )
+        );
+        s && (this.chatDiv.style.left = `${s.x}px`, this.chatDiv.style.top = `${s.y}px`);
+      } else
+        this.chatDiv.style.display = "none";
+      if (this.destination && this.avatar.position.distanceTo(this.destination) > 0.1) {
+        const s = this.avatar.position.clone().sub(this.destination).normalize().multiplyScalar(this.MOVEMENT_SPEED);
+        this.avatar.position.sub(s), this.avatar.lookAt(this.destination), this.idle();
       } else
         this.walk();
     }
@@ -42504,20 +42535,31 @@ class n3 {
   updateDestination(e) {
     this.destination = e;
   }
+  dispose() {
+    var e, t, i, s, r;
+    (e = this.avatar) == null || e.removeFromParent(), this.mixer = null, this.walkAnimation = null, this.avatar = null, (i = (t = this.nameDiv) == null ? void 0 : t.parentNode) == null || i.removeChild(this.nameDiv), (r = (s = this.chatDiv) == null ? void 0 : s.parentNode) == null || r.removeChild(this.chatDiv);
+  }
 }
 class s3 {
   constructor(e) {
     this.viralViewerApi = e, this.avatars = [];
   }
-  load(e, t, i, s) {
-    let r = new n3(
+  load(e, t, i, s = 2, r = 1, a, l) {
+    let h = new n3(
       this.viralViewerApi,
       e,
       t,
       i,
-      s
+      s,
+      r,
+      a,
+      l
     );
-    return this.avatars.push(r), r;
+    return this.avatars.push(h), h;
+  }
+  remove(e) {
+    let t = this.avatars.find((i) => i.id == e);
+    t && t.dispose(), this.avatars = this.avatars.filter((i) => i.id != e);
   }
 }
 class v3 {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "viral-viewer-2",
-    "version": "6.4.5",
+    "version": "6.4.7",
     "description": "",
     "main": "dist/index.mjs",
     "types": "dist/index.d.ts",