|
|
@@ -0,0 +1,242 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - animation - skinning</title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <style type="text/css">
|
|
|
+ body {
|
|
|
+ color: #000;
|
|
|
+ font-family:Monospace;
|
|
|
+ font-size:13px;
|
|
|
+ text-align:center;
|
|
|
+
|
|
|
+ background-color: #000;
|
|
|
+ margin: 0px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px; width: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+
|
|
|
+ color: #f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+
|
|
|
+ <div id="container"></div>
|
|
|
+
|
|
|
+ <div id="info">
|
|
|
+ <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - animation - skinning -
|
|
|
+ buffalo model from <a href="http://ro.me">ro.me</a><br/>
|
|
|
+ click to start animation
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <script type="text/javascript" src="../build/Three.js"></script>
|
|
|
+
|
|
|
+ <script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
|
|
|
+ <script type="text/javascript" src="js/Detector.js"></script>
|
|
|
+ <script type="text/javascript" src="js/Stats.js"></script>
|
|
|
+
|
|
|
+ <script type="text/javascript">
|
|
|
+
|
|
|
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
+
|
|
|
+ window.onload = init;
|
|
|
+
|
|
|
+ var container, stats;
|
|
|
+
|
|
|
+ var camera, scene, renderer;
|
|
|
+
|
|
|
+ var mesh, light;
|
|
|
+
|
|
|
+ var mouseX = 0, mouseY = 0;
|
|
|
+
|
|
|
+ var windowHalfX = window.innerWidth / 2;
|
|
|
+ var windowHalfY = window.innerHeight / 2;
|
|
|
+
|
|
|
+ var height = window.innerHeight;
|
|
|
+
|
|
|
+ var animations = [];
|
|
|
+ var buffalos = [];
|
|
|
+ var offset = [];
|
|
|
+
|
|
|
+ var floor, dz = 0, dstep = -10, playback = false;
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ container = document.getElementById( 'container' );
|
|
|
+
|
|
|
+ camera = new THREE.Camera( 25, window.innerWidth / height, 1, 10000 );
|
|
|
+ camera.position.y = 185;
|
|
|
+ camera.position.z = 2500;
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+ scene.fog = new THREE.FogExp2( 0xffffff, 0.0003 );
|
|
|
+ //scene.fog.color.setHSV( 0.1, 0.5, 1 );
|
|
|
+ scene.fog.color.setHSV( 0.1, 0.10, 1 );
|
|
|
+
|
|
|
+ light = new THREE.DirectionalLight( 0xffffff, 1.5 );
|
|
|
+ light.position.set( 0, 1, 1 );
|
|
|
+ light.position.normalize();
|
|
|
+ scene.addLight( light );
|
|
|
+
|
|
|
+ var planeSimple = new THREE.PlaneGeometry( 200, 300 );
|
|
|
+ var planeTesselated = new THREE.PlaneGeometry( 100, 300, 25, 40 );
|
|
|
+ var matWire = new THREE.MeshBasicMaterial( { color :0x110000, wireframe: true, wireframeLinewidth: 2 } );
|
|
|
+ var matSolid = new THREE.MeshBasicMaterial( { color :0x330000 } );
|
|
|
+ matSolid.color.setHSV( 0.1, 0.75, 1 );
|
|
|
+
|
|
|
+ floor = new THREE.Mesh( planeSimple, matSolid );
|
|
|
+ floor.position.y = -10;
|
|
|
+ floor.rotation.x = -1.57;
|
|
|
+ floor.scale.set( 25, 25, 25 );
|
|
|
+ scene.addObject( floor );
|
|
|
+
|
|
|
+ floor = new THREE.Mesh( planeTesselated, matWire );
|
|
|
+ floor.rotation.x = -1.57;
|
|
|
+ floor.scale.set( 25, 25, 25 );
|
|
|
+ scene.addObject( floor );
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer( { clearColor: 0xffffff, clearAlpha: 1 } );
|
|
|
+ renderer.setSize( window.innerWidth, height );
|
|
|
+ renderer.setClearColor( scene.fog.color, 1 );
|
|
|
+ renderer.sortObjects = false;
|
|
|
+
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '0px';
|
|
|
+ container.appendChild( stats.domElement );
|
|
|
+
|
|
|
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
+ document.addEventListener( 'click', startAnimation, false );
|
|
|
+
|
|
|
+ var loader = new THREE.JSONLoader();
|
|
|
+ loader.load( { model: "obj/buffalo/buffalo.js", callback: createScene } );
|
|
|
+
|
|
|
+ loop();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function createScene( geometry ) {
|
|
|
+
|
|
|
+ buffalos = [];
|
|
|
+ animations = [];
|
|
|
+
|
|
|
+ var x, y,
|
|
|
+ buffalo, animation,
|
|
|
+ gridx = 25, gridz = 15,
|
|
|
+ sepx = 150, sepz = 300;
|
|
|
+
|
|
|
+ var material = new THREE.MeshFaceMaterial();
|
|
|
+
|
|
|
+ var originalMaterial = geometry.materials[ 0 ][ 0 ];
|
|
|
+
|
|
|
+ originalMaterial.skinning = true;
|
|
|
+ originalMaterial.transparent = true;
|
|
|
+ originalMaterial.alphaTest = 0.75;
|
|
|
+
|
|
|
+ THREE.AnimationHandler.add( geometry.animation );
|
|
|
+
|
|
|
+ for( x = 0; x < gridx; x ++ ) {
|
|
|
+
|
|
|
+ for( z = 0; z < gridz; z ++ ) {
|
|
|
+
|
|
|
+ buffalo = new THREE.SkinnedMesh( geometry, material );
|
|
|
+
|
|
|
+ //buffalo.doubleSided = true;
|
|
|
+
|
|
|
+ buffalo.position.x = - ( gridx - 1 ) * sepx * 0.5 + x * sepx + Math.random() * 0.5 * sepx;
|
|
|
+ buffalo.position.z = - ( gridz - 1 ) * sepz * 0.5 + z * sepz + Math.random() * 0.5 * sepz - 500;
|
|
|
+
|
|
|
+ buffalo.position.y = buffalo.boundRadius * 0.5;
|
|
|
+ buffalo.rotation.y = 0.2 - Math.random() * 0.4;
|
|
|
+
|
|
|
+ scene.addObject( buffalo );
|
|
|
+
|
|
|
+ buffalos.push( buffalo );
|
|
|
+
|
|
|
+ animation = new THREE.Animation( buffalo, "take_001" );
|
|
|
+ animations.push( animation );
|
|
|
+
|
|
|
+ offset.push( Math.random() );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function startAnimation() {
|
|
|
+
|
|
|
+ for( var i = 0; i < animations.length; i ++ ) {
|
|
|
+
|
|
|
+ animations[ i ].offset = 0.05 * Math.random();
|
|
|
+ animations[ i ].play();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ dz = dstep;
|
|
|
+ playback = true;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function onDocumentMouseMove( event ) {
|
|
|
+
|
|
|
+ mouseX = ( event.clientX - windowHalfX );
|
|
|
+ mouseY = ( event.clientY - windowHalfY );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ var oldTime = new Date().getTime();
|
|
|
+
|
|
|
+ function loop() {
|
|
|
+
|
|
|
+ requestAnimationFrame( loop, renderer.domElement );
|
|
|
+
|
|
|
+ var time = new Date().getTime();
|
|
|
+
|
|
|
+ THREE.AnimationHandler.update( 0.001 * ( time - oldTime ) );
|
|
|
+
|
|
|
+ oldTime = time;
|
|
|
+
|
|
|
+ camera.position.x += ( mouseX - camera.position.x ) * 0.05;
|
|
|
+ //camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
|
|
|
+
|
|
|
+ if ( buffalos && playback ) {
|
|
|
+
|
|
|
+ camera.position.z += 2 * Math.sin( new Date().getTime() * 0.001 );
|
|
|
+
|
|
|
+ for( i = 0; i < buffalos.length; i++ ) {
|
|
|
+
|
|
|
+ buffalos[ i ].position.z += 2 * Math.sin( new Date().getTime() * 0.001 + offset[ i ] );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ floor.position.z += dz;
|
|
|
+ if( floor.position.z < -500 ) floor.position.z = 0;
|
|
|
+
|
|
|
+
|
|
|
+ renderer.render( scene, camera );
|
|
|
+
|
|
|
+ stats.update();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
|
|
+
|
alteredq
