在框架中添加选定的角色/.gltf 模型

Question

我被困在一个问题上。

我在选项中内置了三个项目。所以，我想点击任何一个按钮来根据点击更改头像。如果有人选择了男性头像，那么它也应该反映在其他人身上。例如，如果有 4 个用户。从中 3 个是男性，1 个是女性，女性选择了一个女性化身。所以，她可以看到别人是男性头像，其他人可以看到她是女性头像（.gltf模型）。

有什么方法可以动态添加 .gltf 模型到框架中并为其他人更新它吗？

<body>
<!-- ============================ Start Model Selection ==========================  -->
<div class="container" style="z-index: 1; position: fixed">
  <div class="content_container content_container-1">
    <div class="svg">
      <img
        src="https://s2.svgbox.net/illlustrations.svg?ic=selfie-boy"
        alt="Boy"
      />
    </div>
    <div class="content content-1">Boy</div>
  </div>

  <div class="content_container content_container-1">
    <div class="svg">
      <img
        src="https://s2.svgbox.net/illlustrations.svg?ic=selfie-girl"
        alt="Girl"
      />
    </div>
    <div class="content content-2">Girl</div>
  </div>

  <div class="content_container content_container-1">
    <div class="svg">
      <img
        src="https://s2.svgbox.net/illlustrations.svg?ic=my-robot"
        alt="Robot"
      />
    </div>
    <div class="content content-3">Robot</div>
  </div>
</div>

<!-- ============================ End Model Selection ==========================  -->

<a-scene background="color: #FAFAFA">
  <a-entity environment="preset: forest;  grid: cross"></a-entity>
</a-scene>

这是我为此编写的代码。

Answer 1

docs提到同步自定义组件（gltf-model是一个组件），这很简单。假设我们想要一个带有标准头的模型：

将带有gltf-component的实体添加到网络模板：

<template id="avatar-template">
  <a-entity class="avatar">
    <a-entity class="model" gltf-model></a-entity>
    <a-sphere class="head">
    <!-- The rest of the template definition -->

将其添加到NAF.schemas:

NAF.schemas.add({
     template: '#avatar-template',
     components: [
       // the default position, rotation, color
       {
         // the model entity has a .model class
         selector: '.model',
         // we want the gltf-model component to sync between clients
         component: 'gltf-model'
       },

将模型添加到您的本地客户端：

<a-entity id="player" camera
         networked="template:#avatar-template;attachTemplateToLocal:false;"
         position="0 1.6 0" wasd-controls look-controls>
  <a-entity class="model" gltf-model="#fox" model-changer></a-entity>
</a-entity>

创建单击图像时更改模型的 model-changer 组件：

AFRAME.registerComponent("model-changer", {
  init: function() {
    // nothing special here - change the models when the images are clicked
    const btn1= document.getElementById("btn1")
    const btn2= document.getElementById("btn2")

    // for whatever reason i need to update the model with the actual source, not just the id
    function getAssetSrc(id) {
      return document.getElementById(id).getAttribute("src")
    }
    btn1.addEventListener("click", e => {
      this.el.setAttribute("gltf-model", getAssetSrc(model1))
    })
    btn2.addEventListener("click", e => {
      this.el.setAttribute("gltf-model", getAssetSrc(model2))
    })
  }
})

在 this glitch 中查看 - 图片应更改型号：

在框架中添加选定的角色/.gltf 模型

Adding selected character/ .gltf model in a-frame

three.js

aframe

aframe-networked