improve avatar simple example

resources.json

@@ -69,27 +69,13 @@
     ],
     "dependencies": []
   },
-  "assets/GLTF/.ds_store": {
-    "type": "file",
-    "tags": [
-      "unknown"
-    ],
-    "dependencies": []
-  },
   "assets/GLTF/double-mat-test.glb": {
-    "type": "file",
+    "type": "asset",
     "tags": [
       "Model"
     ],
     "dependencies": []
   },
-  "assets/GLTF/Duck/.ds_store": {
-    "type": "file",
-    "tags": [
-      "unknown"
-    ],
-    "dependencies": []
-  },
   "assets/GLTF/Duck/basic/Duck.gltf": {
     "type": "asset",
     "tags": [

src/examples/GLTFs.tsx

@@ -157,11 +157,6 @@ export const gltfRoutes = [
     description: 'Ethereal Engine Material Extension',
     /** @todo currently relies on eepro advanced materials project - replace asset with one that has base custom material */
     entry: () => <GLTFViewer src={fileServer + '/projects/ee-development-test-suite/assets/GLTF/double-mat-test.glb'} light />
-  },
-  {
-    name: 'VRM',
-    description: 'VRM Avatar',
-    entry: () => <GLTFViewer src={fileServer + '/projects/ee-development-test-suite/assets/GLTF/VRM/VRMTest.vrm'} light />
   }
 ] as RouteData[]
 

src/examples/avatarSimple.tsx

@@ -3,7 +3,7 @@ import { GLTF } from '@gltf-transform/core'
 import { useEffect } from 'react'
 import { Cache, Color, Euler, Quaternion } from 'three'
 
-import { AvatarID } from '@etherealengine/common/src/schema.type.module'
+import { AvatarID, avatarPath } from '@etherealengine/common/src/schema.type.module'
 import {
   Engine,
   EntityUUID,
@@ -25,6 +25,7 @@ import { RendererComponent } from '@etherealengine/spatial/src/renderer/WebGLRen
 import { SceneComponent } from '@etherealengine/spatial/src/renderer/components/SceneComponents'
 import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
 import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 
 // create scene with a rigidbody loaded offset from the origin
 const createSceneGLTF = (id: string): GLTF.IGLTF => ({
@@ -50,6 +51,7 @@ const createSceneGLTF = (id: string): GLTF.IGLTF => ({
 export default function AvatarSimpleEntry() {
   const entity = useHookstate(UndefinedEntity)
   const gltfComponent = useOptionalComponent(entity.value, GLTFComponent)
+  const avatars =  useFind(avatarPath)
 
   useEffect(() => {
     const lightEntity = createEntity()
@@ -82,19 +84,19 @@ export default function AvatarSimpleEntry() {
   }, [])
 
   useEffect(() => {
-    if (gltfComponent?.progress?.value !== 100) return
+    if (!avatars.data.length || gltfComponent?.progress?.value !== 100) return
 
     const parentUUID = getComponent(entity.value, UUIDComponent)
     const entityUUID = Engine.instance.userID
     dispatchAction(
       AvatarNetworkAction.spawn({
         parentUUID,
-        avatarID: '9cc0a253-aeec-45d6-86cb-ab08f094c09d' as AvatarID,
+        avatarID: avatars.data.find(avatar => avatar.modelResource?.key.endsWith('.vrm'))!.id as AvatarID,
         entityUUID: (entityUUID + '_avatar') as EntityUUID,
         name: 'avatar'
       })
     )
-  }, [gltfComponent?.progress?.value])
+  }, [gltfComponent?.progress?.value, avatars.data.length])
 
   return null
 }