Skip to content

Latest commit

 

History

History
61 lines (48 loc) · 2.08 KB

integrate_in_your_project.md

File metadata and controls

61 lines (48 loc) · 2.08 KB
Raw

Integrate the avatars in your glitch project

The main parts without the UI are in player-info.js and index.html. You can look at index.html to see the exact things to add, but here are the relevant parts concerning the avatars.

Get the player-info.js file, upload it in a js folder next to your index.html file. In your index.html add the following lines before </head>:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/networked-aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/c-frame/[email protected]/dist/aframe-extras.min.js"></script>
<script src="/js/player-info.js"></script>

Be sure to not load several versions of networked-aframe and aframe-extras.

Remove any NAF schema in index.html related to the avatar, the one we'll use is defined in the player-info.js file.

To load the avatars properly, we need meshopt support:

<a-scene gltf-model="meshoptDecoderPath:https://unpkg.com/[email protected]/meshopt_decoder.js"

Define the avatar-template naf template:

<template id="avatar-template">
  <a-entity player-info>
    <a-entity class="model">
      <a-text class="nametag" align="center" value="?" position="0 2.1 0" scale=".5 .5 .5"></a-text>
    </a-entity>
    <!-- <a-entity class="camera" networked-audio-source></a-entity> -->
    <a-entity class="camera"></a-entity>
  </a-entity>
</template>

and rig and player entities like this:

<a-entity
  id="rig"
  movement-controls="fly:false;controls: gamepad, trackpad, keyboard, nipple;"
  spawn-in-circle="radius:1"
  networked="template:#avatar-template;attachTemplateToLocal:false"
  player-info
>
  <a-entity id="player" class="camera" camera position="0 1.6 0" look-controls></a-entity>
</a-entity>

You can create your own UI to select the avatar. To set the avatar model and name, execute the following for example:

const rig = document.getElementById('rig');
rig.setAttribute('player-info', {
  name: 'John',
  avatarSrc: 'https://cdn.jsdelivr.net/gh/c-frame/valid-avatars-glb@c539a28/avatars/Asian/Asian_F_1_Busi.glb',
});