wolf3d-readyplayerme-three.js-boilerplate

Important Update

Please use https://demo.readyplayer.me/ to create half-body avatars which are compatible with this project.

^{Grand Canyon by Jason Thompson on Unsplash}

About

This starter kit lets you deploy your Wolf3D/ReadyPlayer.Me avatars on your personal webpage using three.js.

This repository is based on: superguigui/threejs-starter-kit

Special thanks to Zakir Baytar (@zakirbaytar) for helping me refactor the code to make it more human-readable and maintainable.

Demo

[Demo 1] [Demo 2]

Features

• Deploy Wolf3D/ReadyPlayer.Me avatars using three.js
• ES6 with Babel and Webpack.
• Animations and morph targets.
• Cursor tracking.

Requirements

• node.js & npm

Usage

After cloning install all node dependencies

npm i

Then launch the main task to open the livereload server

npm start

You are good to go!

Deployment

npm run build

Then put the content of the dist folder on your server.

Debug tools can be included in development mode. This can be done by using the DEVELOPMENT environment variable that is set by webpack.

if (DEVELOPMENT) {
  const gui = require('package-name') // will not be included in production
}

Configuration

1. Create your avatar and place the .glb file in assets/models.
2. In config.js, edit:
   • defaultAvatar.url
   • AvatarSettings
   • DOMSettings
3. In AvatarSettings.morphTargets, each element has the properties:
   • key (string)
   • targetValue [0-1]
   • transition (ms)
   • duration (ms)
4. When building and deploying through npm run build, have a div with id DOMSettings.avatarDivID (config.js). E.g.

   <div id="3d_avatar"></div>
   

To see available morph targets and animations, view your avatar on: https://gltf-viewer.donmccurdy.com/

File Structure and Coding Style

• Classes in src/objects extend THREE.Object3D.
• Factory pattern is used to create container, renderer, scene, and camera.
• Builder pattern is used to add components to Scene and Avatar.
• THREE global keyword is avoided.
• Necessary components are imported from three:

import { Object3D, Mesh, MeshBasicMaterial } from 'three'

See superguigui/threejs-starter-kit for more information.

• Similar to MonoBehaviour class in Unity development, scene objects can implement update function to execute at each frame.

Avatar.js:

  update(delta) {
    this.rotateHead();
    this.mixer.update(delta);
  }

index.js, render():

..
scene.main.traverse((element) => element?.update?.(delta));
..