JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/WebGL.js"></script>
<script src="https://threejs.org/examples/js/utils/SkeletonUtils.js"></script>
JavaScript
let container, player, stats, clock;
let camera, scene, renderer, model, face;
const MODELS = [{ name: "RobotExpressive" }];
let numLoadedModels = 0;
const LoadedModels = [];
class Player {
constructor( scene, model ){
this.model = model.scene;
scene.add(this.model);
model.scene.traverse( ( object ) => {
if ( object.isSkinnedMesh ) {
console.log( object );
var skeletonHelper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
scene.add( skeletonHelper );
}
} );
this.states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
this.emotes = [ 'Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp' ];
this.animations = {};
this.mixer = new THREE.AnimationMixer( model.scene );
for ( let i = 0; i < model.animations.length; i ++ ) {
let clip = model.animations[ i ];
let action = this.mixer.clipAction( clip );
this.animations[clip.name] = action;
if ( this.emotes.indexOf( clip.name ) >= 0 || this.states.indexOf( clip.name ) >= 4 ) {
action.clampWhenFinished = true;
action.loop = THREE.LoopOnce;
}
}
}
};
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
camera.position.set( - 5, 3, 10 );
camera.lookAt( new THREE.Vector3( 0, 2, 0 ) );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xe0e0e0 );
scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );
clock = new THREE.Clock();
// lights
var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 20, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 20, 10 );
scene.add( light );
// ground
var mesh = new THREE.Mesh(...