webglFramework/Thirdparty/three.js-master/examples/misc_animation_keys.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - animation - basic</title>
   5                 <meta charset="utf-8">
   6                 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   7                 <style>
   8                         body {
   9                                 color: #fff;
  10                                 font-family:Monospace;
  11                                 font-size:13px;
  12                                 text-align:center;
  13
  14                                 background-color: #000;
  15                                 margin: 0px;
  16                                 overflow: hidden;
  17                         }
  18
  19                         #info {
  20                                 position: absolute;
  21                                 top: 0px; width: 100%;
  22                                 padding: 5px;
  23                         }
  24
  25                         a {
  26                                 color: #f00;
  27                         }
  28
  29                 </style>
  30         </head>
  31         <body>
  32
  33                 <div id="container"></div>
  34
  35                 <div id="info">
  36                         <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - basic use
  37                 </div>
  38
  39                 <script src="../build/three.js"></script>
  40                 <script src="js/Detector.js"></script>
  41                 <script src="js/libs/stats.min.js"></script>
  42
  43                 <script>
  44
  45                         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  46
  47                         var stats, clock;
  48                         var scene, camera, renderer, mixer;
  49
  50                         init();
  51                         animate();
  52
  53                         function init() {
  54
  55                                 scene = new THREE.Scene();
  56
  57                                 var container = document.getElementById( 'container' );
  58
  59                                 //
  60
  61                                 camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
  62                                 camera.position.set( 50, 50, 100 );
  63                                 camera.lookAt( scene.position );
  64
  65                                 //
  66
  67                                 var axisHelper = new THREE.AxisHelper( 10 );
  68                                 scene.add( axisHelper );
  69
  70                                 //
  71
  72                                 var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
  73                                 var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
  74                                 var mesh = new THREE.Mesh( geometry, material );
  75                                 scene.add( mesh );
  76
  77                                 // create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
  78                                 // Note: the keyframe track type should correspond to the type of the property being animated
  79
  80                                 // POSITION
  81                                 var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
  82
  83                                 // SCALE
  84                                 var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
  85
  86                                 // ROTATION
  87                                 // Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
  88                                 // Interpolating Euler angles (.rotation property) can be problematic and is currently not supported
  89
  90                                 // set up rotation about x axis
  91                                 var xAxis = new THREE.Vector3( 1, 0, 0 );
  92
  93                                 var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
  94                                 var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
  95                                 var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
  96
  97                                 // COLOR
  98                                 var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
  99
 100                                 // create an animation sequence with the tracks
 101                                 // If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
 102                                 var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF ] );
 103
 104                                 // setup the AnimationMixer
 105                                 mixer = new THREE.AnimationMixer( mesh );
 106
 107                                 // create a ClipAction and set it to play
 108                                 var clipAction = mixer.clipAction( clip );
 109                                 clipAction.play();
 110
 111                                 //
 112
 113                                 renderer = new THREE.WebGLRenderer();
 114                                 renderer.setPixelRatio( window.devicePixelRatio );
 115                                 renderer.setSize( window.innerWidth, window.innerHeight );
 116                                 container.appendChild( renderer.domElement );
 117
 118                                 //
 119
 120                                 stats = new Stats();
 121                                 container.appendChild( stats.dom );
 122
 123                                 //
 124
 125                                 clock = new THREE.Clock();
 126
 127                                 //
 128
 129                                 window.addEventListener( 'resize', onWindowResize, false );
 130
 131                         }
 132
 133                         function onWindowResize() {
 134
 135                                 camera.aspect = window.innerWidth / window.innerHeight;
 136                                 camera.updateProjectionMatrix();
 137
 138                                 renderer.setSize( window.innerWidth, window.innerHeight );
 139
 140                         }
 141
 142                         function animate() {
 143
 144                                 requestAnimationFrame( animate );
 145
 146                                 render();
 147
 148                         }
 149
 150                         function render() {
 151
 152                                 var delta = clock.getDelta();
 153
 154                                 if ( mixer ) {
 155
 156                                         mixer.update( delta );
 157
 158                                 }
 159
 160                                 renderer.render( scene, camera );
 161
 162                                 stats.update();
 163
 164                         }
 165
 166                 </script>
 167
 168         </body>
 169 </html>