Skip to content

Instantly share code, notes, and snippets.

@jsermeno

jsermeno/animation.html

Created August 24, 2011 05:58
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jsermeno/1167394 to your computer and use it in GitHub Desktop.
Save jsermeno/1167394 to your computer and use it in GitHub Desktop.
Download ZIP
Three.js Troll Animation Morph Targets
Raw
animation.html
<!doctype html>
<html>
<head>
<title>Three.js - Game</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/RequestAnimationFrame.js"></script>
<script type="text/javascript" src="lib/Three.js"></script>
<script type="text/javascript" src="lib/Stats.js"></script>
<script type="text/javascript">
var
camera,
projector,
scene,
renderer,
mesh,
animOffset = 30,
walking = false,
stats;
function initialize() {
/*camera = new THREE.FirstPersonCamera( {
fov: 60,
aspect: window.innerWidth / window.innerHeight,
near: 1,
far: 20000,
movementSpeed: 100,
lookSpeed: 0.01,
noFly: true,
lookVertical: true
});*/
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 130;
camera.position.x = -100;
camera.position.z = 100;
camera.target.position.y = 60;
scene = new THREE.Scene();
// Add Troll
var loader = new THREE.JSONLoader();
loader.load( { model: "assets/troll.js", callback: createScene } );
// Create renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
document.addEventListener("keydown", toggleWalk, false);
// Append stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
}
function toggleWalk(e) {
var i;
if ( e.keyCode === 32 ) {
if ( !walking ) {
animOffset = 0;
duration = 5000;
keyframes = 30;
interpolation = duration / keyframes;
lastKeyframe = 0;
currentKeyframe = 0;
walking = true;
} else {
animOffset = 30;
duration = 5000;
keyframes = 150;
interpolation = duration / keyframes;
lastKeyframe = 0;
currentKeyframe = 0;
walking = false;
}
for ( i = 0; i < mesh.morphTargetInfluences.length; i++ ) {
//mesh.morphTargetInfluences[i] = 0;
}
}
}
function createScene( geometry ) {
geometry.materials[0][0].shading = THREE.FlatShading;
geometry.materials[0][0].morphTargets = true;
var material = new THREE.MeshFaceMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50, 50, 50);
scene.addObject( mesh );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
var
duration = 5000,
keyframes = 150,
interpolation = duration / keyframes,
lastKeyframe = 0, currentKeyframe = 0;
function render() {
if ( mesh ) {
// Alternate morph targets
var time = new Date().getTime() % duration;
var keyframe = Math.floor( time / interpolation ) + animOffset;
if ( keyframe != currentKeyframe ) {
mesh.morphTargetInfluences[ lastKeyframe ] = 0;
mesh.morphTargetInfluences[ currentKeyframe ] = 1;
mesh.morphTargetInfluences[ keyframe ] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];
console.log('current: ' + mesh.morphTargetInfluences[ keyframe ]);
}
renderer.render( scene, camera );
}
</script>
</head>
<body>
<script type="text/javascript">
initialize();
animate();
</script>
</body>
</html>
Raw
create.js
function createScene( geometry ) {
geometry.materials[0][0].shading = THREE.FlatShading;
geometry.materials[0][0].morphTargets = true;
var material = new THREE.MeshFaceMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50, 50, 50);
scene.addObject( mesh );
}
Raw
global_variables.js
var
camera,
projector,
scene,
renderer,
mesh,
animOffset = 30,
walking = false,
stats;
var
duration = 5000,
keyframes = 150,
interpolation = duration / keyframes,
lastKeyframe = 0, currentKeyframe = 0;
Raw
index.js
var
camera,
projector,
scene,
renderer,
mesh,
animOffset = 30,
walking = false,
stats;
function initialize() {
/*camera = new THREE.FirstPersonCamera( {
fov: 60,
aspect: window.innerWidth / window.innerHeight,
near: 1,
far: 20000,
movementSpeed: 100,
lookSpeed: 0.01,
noFly: true,
lookVertical: true
});*/
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 130;
camera.position.x = -100;
camera.position.z = 100;
camera.target.position.y = 60;
scene = new THREE.Scene();
// Add Troll
var loader = new THREE.JSONLoader();
loader.load( { model: "assets/obj/troll.js", callback: createScene } );
// Create renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
document.addEventListener("keydown", toggleWalk, false);
// Append stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
}
function toggleWalk(e) {
var i;
if ( e.keyCode === 32 ) {
if ( !walking ) {
animOffset = 0;
duration = 1000;
keyframes = 30;
interpolation = duration / keyframes;
lastKeyframe = 0;
currentKeyframe = 0;
walking = true;
} else {
animOffset = 30;
duration = 5000;
keyframes = 150;
interpolation = duration / keyframes;
lastKeyframe = 0;
currentKeyframe = 0;
walking = false;
}
for ( i = 0; i < mesh.morphTargetInfluences.length; i++ ) {
mesh.morphTargetInfluences[i] = 0;
}
}
}
function createScene( geometry ) {
geometry.materials[0][0].shading = THREE.FlatShading;
geometry.materials[0][0].morphTargets = true;
var material = new THREE.MeshFaceMaterial();
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set(50, 50, 50);
scene.addObject( mesh );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
var
duration = 5000,
keyframes = 150,
interpolation = duration / keyframes,
lastKeyframe = 0, currentKeyframe = 0;
function render() {
if ( mesh ) {
// Alternate morph targets
var time = new Date().getTime() % duration;
var keyframe = Math.floor( time / interpolation ) + animOffset;
if ( keyframe != currentKeyframe ) {
mesh.morphTargetInfluences[ lastKeyframe ] = 0;
mesh.morphTargetInfluences[ currentKeyframe ] = 1;
mesh.morphTargetInfluences[ keyframe ] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];
}
renderer.render( scene, camera );
}
Raw
init.js
function initialize() {
/*camera = new THREE.FirstPersonCamera( {
fov: 60,
aspect: window.innerWidth / window.innerHeight,
near: 1,
far: 20000,
movementSpeed: 100,
lookSpeed: 0.01,
noFly: true,
lookVertical: true
});*/
camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 130;
camera.position.x = -100;
camera.position.z = 100;
camera.target.position.y = 60;
scene = new THREE.Scene();
// Add Troll
var loader = new THREE.JSONLoader();
loader.load( { model: "assets/obj/troll.js", callback: createScene } );
// Create renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);
document.addEventListener("keydown", toggleWalk, false);
// Append stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
}
Raw
render.js
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
if ( mesh ) {
// Alternate morph targets
var time = new Date().getTime() % duration;
var keyframe = Math.floor( time / interpolation ) + animOffset;
if ( keyframe != currentKeyframe ) {
mesh.morphTargetInfluences[ lastKeyframe ] = 0;
mesh.morphTargetInfluences[ currentKeyframe ] = 1;
mesh.morphTargetInfluences[ keyframe ] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];
}
renderer.render( scene, camera );
}
Raw
toggle.js
function toggleWalk(e) {
var i;
if ( e.keyCode === 32 ) {
if ( !walking ) {
animOffset = 0;
duration = 1000;
keyframes = 30;
interpolation = duration / keyframes;
lastKeyframe = 0;
currentKeyframe = 0;
walking = true;
} else {
animOffset = 30;
duration = 5000;
keyframes = 150;
interpolation = duration / keyframes;
lastKeyframe = 0;
currentKeyframe = 0;
walking = false;
}
for ( i = 0; i < mesh.morphTargetInfluences.length; i++ ) {
mesh.morphTargetInfluences[i] = 0;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment