如何将Ready Player Me头像设为资料头像并嵌入HTML网页小窗口

1. 将RPM头像设置为个人资料头像 #

两种场景对应实现方式：

• 如果你是要把头像设置到第三方平台的个人资料中：直接从Ready Player Me导出2D格式的头像图片（PNG/JPG均可），到对应平台的个人资料设置页上传替换即可，无需额外写代码。
• 如果你是在自己开发的站点中支持用户将RPM头像设为个人资料：拿到用户导出的头像文件数据后，调用站点的用户信息更新接口上传即可，参考代码：

// rpmAvatarFile为拿到的RPM头像文件对象
const formData = new FormData();
formData.append('avatar', rpmAvatarFile);
fetch('/api/user/update-avatar', {
  method: 'POST',
  body: formData,
  headers: {
    'Authorization': '当前用户的站点认证token'
  }
}).then(res => res.json()).then(data => {
  if(data.code === 0) {
    // 更新页面上展示的个人头像
    document.querySelector('.user-avatar').src = URL.createObjectURL(rpmAvatarFile);
  }
})

2. 头像嵌入网页小窗口仅展示 #

根据你需要的展示形式选择对应的实现方案：

2.1 2D静态头像展示（最简单，无额外依赖） #

<!-- 头像小窗口容器，可自行调整宽高、边框等样式 -->
<div style="width: 200px; height: 200px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb;">
  <img src="替换为你导出的RPM头像本地路径" alt="个人头像" style="width: 100%; height: 100%; object-fit: cover;">
</div>

2.2 3D动态头像展示 #

需要先导出RPM的glb格式3D模型，将Three.js相关依赖和模型文件都托管到你自己的站点服务器下即可使用，代码默认无修改功能，仅支持展示：

<!-- 3D头像容器 -->
<div id="avatar-3d-container" style="width: 300px; height: 300px; border-radius: 8px; overflow: hidden;"></div>
<!-- 引入本地托管的Three.js依赖 -->
<script src="替换为本地three.min.js路径"></script>
<script src="替换为本地GLTFLoader.js路径"></script>
<script>
// 初始化3D场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf3f4f6);
const camera = new THREE.PerspectiveCamera(75, 300 / 300, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(300, 300);
document.getElementById('avatar-3d-container').appendChild(renderer.domElement);

// 添加环境光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// 加载RPM头像模型
const loader = new THREE.GLTFLoader();
loader.load('替换为本地RPM头像glb文件路径', function(gltf) {
  const avatar = gltf.scene;
  // 调整模型尺寸适配容器，可根据实际模型调整参数
  avatar.scale.set(1.2, 1.2, 1.2);
  avatar.position.y = -0.5;
  scene.add(avatar);

  // 自动旋转效果，不需要可删除这段逻辑
  function animate() {
    requestAnimationFrame(animate);
    avatar.rotation.y += 0.005;
    renderer.render(scene, camera);
  }
  animate();
});
camera.position.z = 2;
</script>

内容的提问来源于stack exchange，提问作者Kailau05