ggabcd-meshwalk
Version:
MeshWalk.js is a JS library which helps your TPS game development with three.js.
96 lines (76 loc) • 2.89 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>=^.^=</title>
<style>
body{margin: 0;padding: 0; background: #000;}
canvas{display: block;}
.info{
color: #fff;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="info">
<button onclick="animationController.play( 'idle' );">idle</button>
<button onclick="animationController.play( 'run' );">run</button>
<button onclick="animationController.play( 'jump' );">jump</button>
<button onclick="animationController.play( 'slide' );">slide</button>
<br>
<button onclick="animationController.turn( 90 * THREE.Math.DEG2RAD );">turn to 90deg</button>
<button onclick="animationController.turn( 270 * THREE.Math.DEG2RAD );">turn to 270deg</button>
<button onclick="animationController.turn( 180 * THREE.Math.DEG2RAD );">turn to 180deg</button>
<button onclick="animationController.turn( 0 * THREE.Math.DEG2RAD );">turn to 0deg</button>
<br>
<button onclick="animationController.turn( 90 * THREE.Math.DEG2RAD, true );">turn to 90deg immediate</button>
<button onclick="animationController.turn( 270 * THREE.Math.DEG2RAD, true );">turn to 270deg immediate</button>
<button onclick="animationController.turn( 0 * THREE.Math.DEG2RAD, true );">turn to 0deg immediate</button>
</div>
<script src="https://unpkg.com/three@0.98.0/build/three.min.js"></script>
<script src="../dist/meshwalk.js"></script>
<script>
var width, height, clock, scene, camera, renderer;
var loader = new THREE.JSONLoader();
var ambientLight, characterMesh;
var animationController;
MW.install( THREE );
width = window.innerWidth;
height = window.innerHeight;
clock = new THREE.Clock();
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
camera.position.set( 0, 1, 4 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight( 0xffffff )
scene.add( ambientLight );
loader.load( './model/miku.json', function( geometry, materials ) {
materials.forEach( function ( material ) {
material.skinning = true;
} );
characterMesh = new THREE.SkinnedMesh(
geometry,
new THREE.MeshFaceMaterial( materials )
);
scene.add( characterMesh );
animationController = new MW.AnimationController( characterMesh );
animationController.play( 'idle' );
animationController.motion.jump.setLoop( THREE.LoopOnce, 0 );
animationController.motion.slide.setLoop( THREE.LoopOnce, 0 );
animationController.motion.jump.clampWhenFinished = true;
animationController.motion.slide.clampWhenFinished = true;
} );
( function update () {
requestAnimationFrame( update );
var delta = clock.getDelta();
if ( animationController ) { animationController.update( delta ); }
renderer.render( scene, camera );
} )();
</script>
</body>
</html>