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

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - collada - kinematics</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                                 background:#777;
  10                                 padding:0;
  11                                 margin:0;
  12                                 overflow:hidden;
  13                         }
  14
  15                         #info {
  16                                 position: absolute;
  17                                 top: 0px;
  18                                 width: 100%;
  19                                 color: #ffffff;
  20                                 padding: 5px;
  21                                 font-family:Monospace;
  22                                 font-size:13px;
  23                                 text-align:center;
  24                         }
  25
  26                         a {
  27                                 color: #ffffff;
  28                         }
  29                 </style>
  30         </head>
  31         <body>
  32                 <div id="info">
  33                         <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> collada loader - kinematics
  34                          | robot from <a href="https://github.com/rdiankov/collada_robots" target="_blank" rel="noopener">collada robots</a>
  35                 </div>
  36
  37                 <script src="../build/three.js"></script>
  38
  39                 <script src="js/libs/tween.min.js"></script>
  40                 <script src="js/loaders/ColladaLoader2.js"></script>
  41
  42                 <script src="js/Detector.js"></script>
  43                 <script src="js/libs/stats.min.js"></script>
  44
  45                 <script>
  46
  47                         if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  48
  49                         var container, stats;
  50
  51                         var camera, scene, renderer, objects;
  52                         var particleLight;
  53                         var dae;
  54
  55                         var kinematics;
  56                         var kinematicsTween;
  57                         var tweenParameters = {};
  58
  59                         var loader = new THREE.ColladaLoader();
  60                         loader.options.convertUpAxis = true;
  61                         loader.load( './models/collada/kawada-hironx.dae', function ( collada ) {
  62
  63                                 dae = collada.scene;
  64
  65                                 dae.traverse( function ( child ) {
  66
  67                                         if ( child instanceof THREE.Mesh ) {
  68
  69                                                 // model does not have normals
  70                                                 child.material.flatShading = true;
  71
  72                                         }
  73
  74                                 } );
  75
  76                                 dae.scale.x = dae.scale.y = dae.scale.z = 10.0;
  77                                 dae.updateMatrix();
  78
  79                                 kinematics = collada.kinematics;
  80
  81                                 init();
  82                                 animate();
  83
  84                         } );
  85
  86                         function init() {
  87
  88                                 container = document.createElement( 'div' );
  89                                 document.body.appendChild( container );
  90
  91                                 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  92                                 camera.position.set( 2, 2, 3 );
  93
  94                                 scene = new THREE.Scene();
  95
  96                                 // Grid
  97
  98                                 var grid = new THREE.GridHelper( 20, 20 );
  99                                 scene.add( grid );
 100
 101                                 // Add the COLLADA
 102
 103                                 scene.add( dae );
 104
 105                                 particleLight = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
 106                                 scene.add( particleLight );
 107
 108                                 // Lights
 109
 110                                 var light = new THREE.HemisphereLight( 0xffeeee, 0x111122 );
 111                                 scene.add( light );
 112
 113                                 var pointLight = new THREE.PointLight( 0xffffff, 0.3 );
 114                                 particleLight.add( pointLight );
 115
 116                                 renderer = new THREE.WebGLRenderer();
 117                                 renderer.setPixelRatio( window.devicePixelRatio );
 118                                 renderer.setSize( window.innerWidth, window.innerHeight );
 119                                 container.appendChild( renderer.domElement );
 120
 121                                 stats = new Stats();
 122                                 container.appendChild( stats.dom );
 123
 124                                 setupTween();
 125
 126                                 //
 127
 128                                 window.addEventListener( 'resize', onWindowResize, false );
 129
 130                         }
 131
 132                         function setupTween() {
 133
 134                                 var duration = THREE.Math.randInt( 1000, 5000 );
 135
 136                                 var target = {};
 137
 138                                 for ( var i = 0; i < kinematics.joints.length; i ++ ) {
 139
 140                                         var joint = kinematics.joints[ i ];
 141
 142                                         var old = tweenParameters[ i ];
 143
 144                                         var position = old ? old : joint.zeroPosition;
 145
 146                                         tweenParameters[ i ] = position;
 147
 148                                         target[ i ] = THREE.Math.randInt( joint.limits.min, joint.limits.max )
 149
 150                                 }
 151
 152                                 kinematicsTween = new TWEEN.Tween( tweenParameters ).to( target, duration ).easing( TWEEN.Easing.Quadratic.Out );
 153
 154                                 kinematicsTween.onUpdate( function() {
 155
 156                                         for ( var i = 0; i < kinematics.joints.length; i ++ ) {
 157
 158                                                 kinematics.setJointValue( i, this[ i ] );
 159
 160                                         }
 161
 162                                 } );
 163
 164                                 kinematicsTween.start();
 165
 166                                 setTimeout( setupTween, duration );
 167
 168                         }
 169
 170                         function onWindowResize() {
 171
 172                                 camera.aspect = window.innerWidth / window.innerHeight;
 173                                 camera.updateProjectionMatrix();
 174
 175                                 renderer.setSize( window.innerWidth, window.innerHeight );
 176
 177                         }
 178
 179                         //
 180
 181                         function animate() {
 182
 183                                 requestAnimationFrame( animate );
 184
 185                                 render();
 186                                 stats.update();
 187                                 TWEEN.update();
 188
 189                         }
 190
 191                         function render() {
 192
 193                                 var timer = Date.now() * 0.0001;
 194
 195                                 camera.position.x = Math.cos( timer ) * 17;
 196                                 camera.position.y = 10;
 197                                 camera.position.z = Math.sin( timer ) * 17;
 198
 199                                 camera.lookAt( scene.position );
 200
 201                                 particleLight.position.x = Math.sin( timer * 4 ) * 3009;
 202                                 particleLight.position.y = Math.cos( timer * 5 ) * 4000;
 203                                 particleLight.position.z = Math.cos( timer * 4 ) * 3009;
 204
 205                                 renderer.render( scene, camera );
 206
 207                         }
 208
 209                 </script>
 210         </body>
 211 </html>