review.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. var scene, renderer, camera, container, animation ,mixer;
  2. var hasMorph = false;
  3. var prevTime = Date.now();
  4. var clock = new THREE.Clock();
  5. function render() {
  6. renderer.render( scene, camera );
  7. if ( hasMorph ) {
  8. var time = Date.now();
  9. animation.update( time - prevTime );
  10. prevTime = time;
  11. }
  12. }
  13. function animate() {
  14. requestAnimationFrame( animate );
  15. if ( mixer !== null ) {
  16. var delta = clock.getDelta();
  17. mixer.update(delta);
  18. }
  19. render();
  20. }
  21. function onWindowResize() {
  22. camera.aspect = container.offsetWidth / container.offsetHeight;
  23. camera.updateProjectionMatrix();
  24. renderer.setSize( container.offsetWidth, container.offsetHeight );
  25. render();
  26. }
  27. function setupScene( result, data ) {
  28. scene = new THREE.Scene();
  29. scene.add( new THREE.GridHelper( 10, 8 ) );
  30. }
  31. function setupLights() {
  32. var directionalLight = new THREE.DirectionalLight( 0xb8b8b8 );
  33. directionalLight.position.set(1, 1, 1).normalize();
  34. directionalLight.intensity = 1.0;
  35. scene.add( directionalLight );
  36. directionalLight = new THREE.DirectionalLight( 0xb8b8b8 );
  37. directionalLight.position.set(-1, 0.6, 0.5).normalize();
  38. directionalLight.intensity = 0.5;
  39. scene.add(directionalLight);
  40. directionalLight = new THREE.DirectionalLight();
  41. directionalLight.position.set(-0.3, 0.6, -0.8).normalize( 0xb8b8b8 );
  42. directionalLight.intensity = 0.45;
  43. scene.add(directionalLight);
  44. }
  45. function loadObject( data ) {
  46. var loader = new THREE.ObjectLoader();
  47. scene = loader.parse( data );
  48. var hasLights = false;
  49. // TODO: RectAreaLight support
  50. var lights = ['AmbientLight', 'DirectionalLight',
  51. 'PointLight', 'SpotLight', 'RectAreaLight', 'HemisphereLight'];
  52. var cameras = ['OrthographicCamera', 'PerspectiveCamera'];
  53. for ( var i = 0; i < scene.children.length; i ++ ) {
  54. var lightIndex = lights.indexOf( scene.children[ i ].type );
  55. if ( lightIndex > -1 ) {
  56. hasLights = true;
  57. continue;
  58. }
  59. var cameraIndex = cameras.indexOf( scene.children[ i ].type );
  60. if ( cameraIndex > -1 ) {
  61. camera = scene.children[ i ];
  62. var container = document.getElementById( 'viewport' );
  63. orbit = new THREE.OrbitControls( camera, container );
  64. orbit.addEventListener( 'change', render );
  65. var aspect = container.offsetWidth / container.offsetHeight;
  66. camera.aspect = aspect;
  67. camera.updateProjectionMatrix();
  68. }
  69. }
  70. if ( ! ( hasLights ) ) setupLights();
  71. scene.add( new THREE.GridHelper( 10, 2.5 ) );
  72. render();
  73. }
  74. function loadGeometry( data, url ) {
  75. var loader = new THREE.JSONLoader();
  76. var texturePath = THREE.Loader.prototype.extractUrlBase( url );
  77. data = loader.parse( data, texturePath );
  78. if ( data.materials === undefined ) {
  79. console.log('using default material');
  80. data.materials = [new THREE.MeshLambertMaterial( { color: 0xb8b8b8 } )];
  81. }
  82. var material = new THREE.MultiMaterial( data.materials );
  83. var mesh;
  84. if ( data.geometry.animations !== undefined && data.geometry.animations.length > 0 ) {
  85. console.log( 'loading animation' );
  86. data.materials[ 0 ].skinning = true;
  87. mesh = new THREE.SkinnedMesh( data.geometry, material, false );
  88. mixer = new THREE.AnimationMixer( mesh );
  89. animation = mixer.clipAction( mesh.geometry.animations[ 0 ] );
  90. } else {
  91. mesh = new THREE.Mesh( data.geometry, material );
  92. if ( data.geometry.morphTargets.length > 0 ) {
  93. console.log( 'loading morph targets' );
  94. data.materials[ 0 ].morphTargets = true;
  95. mixer = new THREE.AnimationMixer( mesh );
  96. animation = mixer.clipAction( mesh.geometry.animations[ 0 ] );
  97. hasMorph = true;
  98. }
  99. }
  100. setupScene();
  101. setupLights();
  102. scene.add( mesh );
  103. if ( animation != null ) {
  104. console.log( 'playing animation' );
  105. animation.play();
  106. animate();
  107. } else {
  108. render();
  109. }
  110. }
  111. function loadBufferGeometry( data ) {
  112. var loader = new THREE.BufferGeometryLoader();
  113. var bufferGeometry = loader.parse( data );
  114. var material = new THREE.MeshLambertMaterial( { color: 0xb8b8b8 } );
  115. var mesh = new THREE.Mesh( bufferGeometry, material );
  116. setupScene();
  117. setupLights();
  118. scene.add( mesh );
  119. render();
  120. }
  121. function loadData( data, url ) {
  122. if ( data.metadata.type === 'Geometry' ) {
  123. loadGeometry( data, url );
  124. } else if ( data.metadata.type === 'Object' ) {
  125. loadObject( data );
  126. } else if ( data.metadata.type === 'BufferGeometry' ) {
  127. loadBufferGeometry( data );
  128. } else {
  129. console.warn( 'can not determine type' );
  130. }
  131. }
  132. function init( url ) {
  133. container = document.createElement( 'div' );
  134. container.id = 'viewport';
  135. document.body.appendChild( container );
  136. renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
  137. renderer.setSize( container.offsetWidth, container.offsetHeight );
  138. renderer.setClearColor( 0x000000, 0 );
  139. container.appendChild( renderer.domElement );
  140. renderer.gammaInput = true;
  141. renderer.gammaOutput = true;
  142. var aspect = container.offsetWidth / container.offsetHeight;
  143. camera = new THREE.PerspectiveCamera( 50, aspect, 0.01, 50 );
  144. orbit = new THREE.OrbitControls( camera, container );
  145. orbit.addEventListener( 'change', render );
  146. camera.position.z = 5;
  147. camera.position.x = 5;
  148. camera.position.y = 5;
  149. var target = new THREE.Vector3( 0, 1, 0 );
  150. camera.lookAt( target );
  151. orbit.target = target;
  152. camera.updateProjectionMatrix();
  153. window.addEventListener( 'resize', onWindowResize, false );
  154. var xhr = new XMLHttpRequest();
  155. xhr.onreadystatechange = function ( x ) {
  156. if ( xhr.readyState === xhr.DONE ) {
  157. if ( xhr.status === 200 || xhr.status === 0 ) {
  158. loadData( JSON.parse( xhr.responseText ), url );
  159. } else {
  160. console.error( 'could not load json ' + xhr.status );
  161. }
  162. }
  163. };
  164. xhr.open( 'GET', url, true );
  165. xhr.withCredentials = false;
  166. xhr.send( null );
  167. }