include this manifest on the code so you can fetch the rpm avatars // src/manifests/avatarManifest.js

export const avatarManifest = [
{
id: "6637232cc6a3e0f03418f723",
name: "David",
body: "M",
avatarMood: "neutral",
sources: [
{ type: "gltf", url: "/assets/avatars/david.glb" },
{ type: "rpm", url: (id) => `https://models.readyplayer.me/${id}.glb` },
],
thumbnails: {
default: [
"/assets/thumbs/avatars/avatarDavid_default.png",
"/assets/thumbs/avatars/avatarDavid_happy.png",
],
},
},
{
id: "64e602a9b54bdcd880df8ca3",
name: "Anja",
body: "F",
avatarMood: "neutral",
sources: [
{ type: "gltf", url: "/assets/avatars/anja.glb" },
{ type: "rpm", url: (id) => `https://models.readyplayer.me/${id}.glb` },
],
thumbnails: {
default: [
"/assets/thumbs/avatars/avatarAnja_default.png",
"/assets/thumbs/avatars/avatarAnja_happy.png",
],
},
},
{
id: "6658826709dff701a3a2955e",
name: "Eli",
body: "M",
avatarMood: "neutral",
sources: [
{ type: "gltf", url: "/assets/avatars/eli.glb" },
{ type: "rpm", url: (id) => `https://models.readyplayer.me/${id}.glb` },
],
thumbnails: {
default: [
"/assets/thumbs/avatars/avatarEli_default.png",
"/assets/thumbs/avatars/avatarEli_happy.png",
],
},
},
{
id: "664e502a6ef2fae943a4e5a4",
name: "Julien",
body: "M",
avatarMood: "neutral",
sources: [
{ type: "gltf", url: "/assets/avatars/julien.glb" },
{ type: "rpm", url: (id) => `https://models.readyplayer.me/${id}.glb` },
],
thumbnails: {
default: [
"/assets/thumbs/avatars/avatarJulien_default.png",
"/assets/thumbs/avatars/avatarJulien_happy.png",
],
},
},
{
id: "680ebd7587f61ba0328013ae",
name: "Dan",
body: "M",
avatarMood: "neutral",
sources: [
{ type: "gltf", url: "/assets/avatars/dan.glb" },
{ type: "rpm", url: (id) => `https://avatars.readyplayer.me/${id}.glb` },
],
thumbnails: {
default: [
"/assets/thumbs/avatars/avatarDan_default.png",
"/assets/thumbs/avatars/avatarDan_happy.png",
],
},
},
{
id: "664e502a6ef2fae943a4e5a4",
name: "Lucy",
body: "F",
avatarMood: "neutral",
sources: [
{ type: "gltf", url: "/assets/avatars/lucy.glb" },
{ type: "rpm", url: (id) => `https://avatars.readyplayer.me/${id}.glb` },
],
thumbnails: {
default: [
"/assets/thumbs/avatars/avatarLucy_default.png",
"/assets/thumbs/avatars/avatarLucy_happy.png",
],
},
},
{
id: "665b2ed436c854537e38cdf8",
name: "Lana",
body: "F",
avatarMood: "neutral",
sources: [
{ type: "gltf", url: "/assets/avatars/lana.glb" },
{ type: "rpm", url: (id) => `https://models.readyplayer.me/${id}.glb` },
],
thumbnails: {
default: [
"/assets/thumbs/avatars/avatarLana_default.png",
"/assets/thumbs/avatars/avatarLana_happy.png",
],
},
},
{
id: "665b2ed436c854537e38cdf8",
name: "Nyx",
body: "F",
avatarMood: "neutral",
sources: [
{ type: "gltf", url: "/assets/avatars/nyx.glb" },
{ type: "rpm", url: (id) => `https://models.readyplayer.me/${id}.glb` },
],
thumbnails: {
default: [
"/assets/thumbs/avatars/avatarNyx_default.png",
"/assets/thumbs/avatars/avatarNyx_happy.png",
],
},
},
];

export default avatarManifest;

index.html

@@ -258,16 +258,64 @@
                 space: false
             }
         };
-// Sample character data with free models from Three.js examples
+        // RPM Avatar Manifest Data
         const characterData = [
-            { id: 1, name: "Robot", modelUrl: "https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb", color: "#EF4444", dialog: ["Beep boop! I am a robot.", "Processing your request...", "01010100 01101000 01110010 01100101 01100101"] },
-            { id: 2, name: "Fox", modelUrl: "https://threejs.org/examples/models/gltf/Fox/Fox.glb", color: "#3B82F6", dialog: ["What does the fox say?", "The forest is my home.", "Sly as a fox!"] },
-            { id: 3, name: "Parrot", modelUrl: "https://threejs.org/examples/models/gltf/Parrot.glb", color: "#10B981", dialog: ["Polly want a cracker?", "Squawk! Beautiful day!", "I can talk, can you fly?"] },
-            { id: 4, name: "Flamingo", modelUrl: "https://threejs.org/examples/models/gltf/Flamingo.glb", color: "#F59E0B", dialog: ["Standing on one leg is easy!", "Pink is the new black.", "Elegance is my middle name."] },
-            { id: 5, name: "Stork", modelUrl: "https://threejs.org/examples/models/gltf/Stork.glb", color: "#8B5CF6", dialog: ["I deliver special packages!", "Long flights are my specialty.", "Graceful in the sky."] },
-            { id: 6, name: "Damaged Helmet", modelUrl: "https://threejs.org/examples/models/gltf/DamagedHelmet/DamagedHelmet.glb", color: "#EC4899", dialog: ["I've seen many battles.", "This helmet tells a story.", "Ancient warrior's spirit."] },
-            { id: 7, name: "Cesium Man", modelUrl: "https://threejs.org/examples/models/gltf/CesiumMan/CesiumMan.glb", color: "#6366F1", dialog: ["I represent the future!", "Technology evolves rapidly.", "Digital consciousness rising."] },
-            { id: 8, name: "Flight Helmet", modelUrl: "https://threejs.org/examples/models/gltf/FlightHelmet/FlightHelmet.glb", color: "#F97316", dialog: ["Ready for takeoff!", "The sky is my domain.", "Pilot's best friend."] }
+            {
+                id: "6637232cc6a3e0f03418f723",
+                name: "David",
+                modelUrl: "https://models.readyplayer.me/6637232cc6a3e0f03418f723.glb",
+                color: "#3B82F6",
+                dialog: ["Hello there! I'm David.", "Nice to meet you!", "Ready for an adventure?"]
+            },
+            {
+                id: "64e602a9b54bdcd880df8ca3",
+                name: "Anja",
+                modelUrl: "https://models.readyplayer.me/64e602a9b54bdcd880df8ca3.glb",
+                color: "#EC4899",
+                dialog: ["Hi, I'm Anja!", "Beautiful day, isn't it?", "What brings you here?"]
+            },
+            {
+                id: "6658826709dff701a3a2955e",
+                name: "Eli",
+                modelUrl: "https://models.readyplayer.me/6658826709dff701a3a2955e.glb",
+                color: "#10B981",
+                dialog: ["Hey, I'm Eli!", "Love exploring new places.", "What's your story?"]
+            },
+            {
+                id: "664e502a6ef2fae943a4e5a4",
+                name: "Julien",
+                modelUrl: "https://models.readyplayer.me/664e502a6ef2fae943a4e5a4.glb",
+                color: "#F59E0B",
+                dialog: ["Julien here!", "Always up for a challenge.", "Let's make this fun!"]
+            },
+            {
+                id: "680ebd7587f61ba0328013ae",
+                name: "Dan",
+                modelUrl: "https://avatars.readyplayer.me/680ebd7587f61ba0328013ae.glb",
+                color: "#8B5CF6",
+                dialog: ["Dan reporting for duty!", "Ready when you are.", "Let's do this!"]
+            },
+            {
+                id: "664e502a6ef2fae943a4e5a4",
+                name: "Lucy",
+                modelUrl: "https://avatars.readyplayer.me/664e502a6ef2fae943a4e5a4.glb",
+                color: "#EF4444",
+                dialog: ["Hi, I'm Lucy!", "So excited to be here!", "Ready for anything!"]
+            },
+            {
+                id: "665b2ed436c854537e38cdf8",
+                name: "Lana",
+                modelUrl: "https://models.readyplayer.me/665b2ed436c854537e38cdf8.glb",
+                color: "#6366F1",
+                dialog: ["Lana at your service!", "What a wonderful world!", "Let's explore together!"]
+            },
+            {
+                id: "665b2ed436c854537e38cdf8",
+                name: "Nyx",
+                modelUrl: "https://models.readyplayer.me/665b2ed436c854537e38cdf8.glb",
+                color: "#F97316",
+                dialog: ["I'm Nyx, nice to meet you!", "The night is my domain.", "Ready for adventure!"]
+            }
         ];
 // Three.js variables
         let scene, camera, renderer, controls;
@@ -333,13 +381,14 @@
                 card.className = 'character-card bg-gray-800 rounded-xl p-4 cursor-pointer transition-all shadow-lg';
                 card.innerHTML = `
                     <div class="character-preview mb-4 flex items-center justify-center">
-                        <div class="w-24 h-24 rounded-full" style="background-color: ${character.color};"></div>
+                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold text-sm">
+                            ${character.name}
+                        </div>
                     </div>
-                    <h3 class="text-xl font-bold text-center mb-2">${character.name}</h3>
-                    <p class="text-gray-400 text-center">Click to select</p>
+                    <h3 class="text-xl font-bold text-center mb-2 text-white">${character.name}</h3>
+                    <p class="text-gray-300 text-center text-sm">RPM Avatar</p>
                 `;
-                
-                card.addEventListener('click', () => {
+card.addEventListener('click', () => {
                     // Deselect all cards
                     document.querySelectorAll('.character-card').forEach(c => {
                         c.classList.remove('ring-2', 'ring-purple-500');
@@ -370,13 +419,14 @@
                 }`;
                 card.innerHTML = `
                     <div class="character-preview mb-4 flex items-center justify-center">
-                        <div class="w-16 h-16 rounded-full" style="background-color: ${character.color};"></div>
+                        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white font-bold text-xs">
+                            ${character.name}
+                        </div>
                     </div>
-                    <h3 class="text-lg font-bold text-center mb-2">${character.name}</h3>
-                    <p class="text-gray-400 text-sm text-center">Click to ${gameState.selectedWorldCharacters.some(c => c.id === character.id) ? 'deselect' : 'select'}</p>
+                    <h3 class="text-lg font-bold text-center mb-2 text-white">${character.name}</h3>
+                    <p class="text-gray-300 text-sm text-center">Click to ${gameState.selectedWorldCharacters.some(c => c.id === character.id) ? 'deselect' : 'select'}</p>
                 `;
-                
-                card.addEventListener('click', () => {
+card.addEventListener('click', () => {
                     // Check if character is already selected
                     const index = gameState.selectedWorldCharacters.findIndex(c => c.id === character.id);
                     
@@ -443,22 +493,22 @@
         scene.background = envMap;
         scene.environment = envMap;
 
-        // Add lights
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-        scene.add(ambientLight);
-        
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-        directionalLight.position.set(10, 20, 15);
-        directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 2048;
-        directionalLight.shadow.mapSize.height = 2048;
-        directionalLight.shadow.camera.near = 0.5;
-        directionalLight.shadow.camera.far = 50;
-        directionalLight.shadow.camera.left = -20;
-        directionalLight.shadow.camera.right = 20;
-        directionalLight.shadow.camera.top = 20;
-        directionalLight.shadow.camera.bottom = -20;
-        scene.add(directionalLight);
+        // Add better lighting for RPM avatars
+        const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 1);
+        scene.add(hemisphereLight);
+
+        const mainLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        mainLight.position.set(10, 20, 15);
+        mainLight.castShadow = true;
+        mainLight.shadow.mapSize.width = 2048;
+        mainLight.shadow.mapSize.height = 2048;
+        mainLight.shadow.camera.near = 0.5;
+        mainLight.shadow.camera.far = 50;
+        mainLight.shadow.camera.left = -20;
+        mainLight.shadow.camera.right = 20;
+        mainLight.shadow.camera.top = 20;
+        mainLight.shadow.camera.bottom = -20;
+        scene.add(mainLight);
 // Create ground
             const groundGeometry = new THREE.PlaneGeometry(100, 100);
             const groundMaterial = new THREE.MeshStandardMaterial({ 
@@ -531,9 +581,9 @@ function addEnvironmentObjects() {
         function loadPlayerCharacter() {
             loader.load(gameState.selectedCharacter.modelUrl, (gltf) => {
                 const model = gltf.scene;
-                // Scale and position the model - reduced size
-                model.scale.set(0.6, 0.6, 0.6);
-                model.position.set(0, 0, 0);
+                // Scale and position the RPM avatar model - adjusted for human proportions
+                model.scale.set(0.8, 0.8, 0.8);
+model.position.set(0, 0, 0);
 // Enable shadows for all children
                 model.traverse((child) => {
                     if (child.isMesh) {
@@ -750,10 +800,9 @@ function loadNPCCharacters() {
                 head.position.y = 1.6;
                 head.castShadow = true;
                 group.add(head);
-                // Scale down NPCs to match player size
-                group.scale.set(0.6, 0.6, 0.6);
-                
-                // Position NPCs in a circle around the center
+                // Scale NPCs to match player size
+                group.scale.set(0.8, 0.8, 0.8);
+// Position NPCs in a circle around the center
                 const angle = (index / gameState.selectedWorldCharacters.length) * Math.PI * 2;
                 const radius = 10 + Math.random() * 10;