Skip to content

Instantly share code, notes, and snippets.

@juniorxsound
Created May 31, 2017 16:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save juniorxsound/4a1ca5c3ffcdd9ce6d6c7171f7cd7544 to your computer and use it in GitHub Desktop.
Save juniorxsound/4a1ca5c3ffcdd9ce6d6c7171f7cd7544 to your computer and use it in GitHub Desktop.
Play a Mixamo exported animation with model (converted to JSON format) in three.js
var scene,
camera,
light,
renderer,
timer,
manager;
function init(){
manager = new THREE.LoadingManager();
//Don't start rendering until you finish loading
manager.onload = function(){
render();
}
timer = new THREE.Clock();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10000);
camera.position.set(0, 0.11, 1);
light = new THREE.DirectionalLight(0xffffff);
scene.add(light);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.sortObjects = false;
document.body.appendChild(renderer.domElement);
var animLoader = new THREE.JSONLoader(manager);
animLoader.load('assets/mixamoAnim.json', function(geometry, materials){
var mat = new THREE.MeshBasicMaterial();
//Make sure to use the vertex colors and skin the material
mat.vertexColors = THREE.VertexColors;
//This is false by default and will not animate!
mat.skinning = true;
var skinnedMesh = new THREE.SkinnedMesh(geometry, mat);
mixer = new THREE.AnimationMixer(skinnedMesh);
//Pick the first animation track
var animation = mixer.clipAction(geometry.animations[ 0 ]);
scene.add(skinnedMesh);
animation.play();
});
}
function render(){
requestAnimationFrame(render);
mixer.update(timer.getDelta());
renderer.render(scene, camera);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment