webgl_loader_gltf_extensions.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - glTF 2.0 - extensions</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. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="info">
  11. <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
  12. <a href="https://github.com/KhronosGroup/glTF" target="_blank" rel="noopener">glTF</a> 2.0 loader<br />
  13. <div id="description"></div>
  14. </div>
  15. <script type="module">
  16. import * as THREE from '../build/three.module.js';
  17. import { GUI } from './jsm/libs/dat.gui.module.js';
  18. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  19. import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
  20. import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
  21. import { RGBELoader } from './jsm/loaders/RGBELoader.js';
  22. let orbitControls;
  23. let camera, scene, renderer, loader;
  24. let gltf, background, envMap, mixer, gui, extensionControls;
  25. const clock = new THREE.Clock();
  26. const scenes = {
  27. Boombox: {
  28. name: 'BoomBox (PBR)',
  29. url: './models/gltf/BoomBox/%s/BoomBox.gltf',
  30. author: 'Microsoft',
  31. authorURL: 'https://www.microsoft.com/',
  32. cameraPos: new THREE.Vector3( 0.02, 0.01, 0.03 ),
  33. objectRotation: new THREE.Euler( 0, Math.PI, 0 ),
  34. extensions: [ 'glTF', 'glTF-pbrSpecularGlossiness', 'glTF-Binary' ],
  35. addEnvMap: true
  36. },
  37. 'Bot Skinned': {
  38. name: 'Bot Skinned',
  39. url: './models/gltf/BotSkinned/%s/Bot_Skinned.gltf',
  40. author: 'MozillaVR',
  41. authorURL: 'https://vr.mozilla.org/',
  42. cameraPos: new THREE.Vector3( 0.5, 2, 2 ),
  43. center: new THREE.Vector3( 0, 1.2, 0 ),
  44. objectRotation: new THREE.Euler( 0, 0, 0 ),
  45. addLights: true,
  46. addGround: true,
  47. shadows: true,
  48. extensions: [ 'glTF-MaterialsUnlit' ]
  49. },
  50. MetalRoughSpheres: {
  51. name: 'MetalRoughSpheres (PBR)',
  52. url: './models/gltf/MetalRoughSpheres/%s/MetalRoughSpheres.gltf',
  53. author: '@emackey',
  54. authorURL: 'https://twitter.com/emackey',
  55. cameraPos: new THREE.Vector3( 2, 1, 15 ),
  56. objectRotation: new THREE.Euler( 0, 0, 0 ),
  57. extensions: [ 'glTF', 'glTF-Embedded' ],
  58. addEnvMap: true
  59. },
  60. 'Clearcoat Test': {
  61. name: 'Clearcoat Test',
  62. url: './models/gltf/ClearcoatTest/ClearcoatTest.glb',
  63. author: 'Ed Mackey (Analytical Graphics, Inc.)',
  64. authorURL: 'https://www.agi.com/',
  65. cameraPos: new THREE.Vector3( 0, 0, 20 ),
  66. extensions: [ 'glTF' ],
  67. addEnvMap: true
  68. },
  69. Duck: {
  70. name: 'Duck',
  71. url: './models/gltf/Duck/%s/Duck.gltf',
  72. author: 'Sony',
  73. authorURL: 'https://www.playstation.com/en-us/corporate/about/',
  74. cameraPos: new THREE.Vector3( 0, 3, 5 ),
  75. addLights: true,
  76. addGround: true,
  77. shadows: true,
  78. extensions: [ 'glTF', 'glTF-Embedded', 'glTF-pbrSpecularGlossiness', 'glTF-Binary', 'glTF-Draco' ]
  79. },
  80. Monster: {
  81. name: 'Monster',
  82. url: './models/gltf/Monster/%s/Monster.gltf',
  83. author: '3drt.com',
  84. authorURL: 'http://www.3drt.com/downloads.htm',
  85. cameraPos: new THREE.Vector3( 3, 1, 7 ),
  86. objectScale: new THREE.Vector3( 0.04, 0.04, 0.04 ),
  87. objectPosition: new THREE.Vector3( 0.2, 0.1, 0 ),
  88. objectRotation: new THREE.Euler( 0, - 3 * Math.PI / 4, 0 ),
  89. animationTime: 3,
  90. addLights: true,
  91. shadows: true,
  92. addGround: true,
  93. extensions: [ 'glTF', 'glTF-Embedded', 'glTF-Binary', 'glTF-Draco', 'glTF-lights' ]
  94. },
  95. 'Cesium Man': {
  96. name: 'Cesium Man',
  97. url: './models/gltf/CesiumMan/%s/CesiumMan.gltf',
  98. author: 'Cesium',
  99. authorURL: 'https://cesiumjs.org/',
  100. cameraPos: new THREE.Vector3( 0, 3, 10 ),
  101. objectRotation: new THREE.Euler( 0, 0, 0 ),
  102. addLights: true,
  103. addGround: true,
  104. shadows: true,
  105. extensions: [ 'glTF', 'glTF-Embedded', 'glTF-Binary', 'glTF-Draco' ]
  106. },
  107. 'Cesium Milk Truck': {
  108. name: 'Cesium Milk Truck',
  109. url: './models/gltf/CesiumMilkTruck/%s/CesiumMilkTruck.gltf',
  110. author: 'Cesium',
  111. authorURL: 'https://cesiumjs.org/',
  112. cameraPos: new THREE.Vector3( 0, 3, 10 ),
  113. addLights: true,
  114. addGround: true,
  115. shadows: true,
  116. extensions: [ 'glTF', 'glTF-Embedded', 'glTF-Binary', 'glTF-Draco' ]
  117. },
  118. 'Outlined Box': {
  119. name: 'Outlined Box',
  120. url: './models/gltf/OutlinedBox/OutlinedBox.gltf',
  121. author: '@twittmann',
  122. authorURL: 'https://github.com/twittmann',
  123. cameraPos: new THREE.Vector3( 0, 5, 15 ),
  124. objectScale: new THREE.Vector3( 0.01, 0.01, 0.01 ),
  125. objectRotation: new THREE.Euler( 0, 90, 0 ),
  126. addLights: true,
  127. shadows: true,
  128. extensions: [ 'glTF' ]
  129. },
  130. };
  131. const state = {
  132. scene: Object.keys( scenes )[ 0 ],
  133. extension: scenes[ Object.keys( scenes )[ 0 ] ].extensions[ 0 ],
  134. playAnimation: true
  135. };
  136. function onload() {
  137. renderer = new THREE.WebGLRenderer( { antialias: true } );
  138. renderer.setPixelRatio( window.devicePixelRatio );
  139. renderer.setSize( window.innerWidth, window.innerHeight );
  140. renderer.outputEncoding = THREE.sRGBEncoding;
  141. renderer.toneMapping = THREE.ACESFilmicToneMapping;
  142. renderer.toneMappingExposure = 1;
  143. renderer.physicallyCorrectLights = true;
  144. document.body.appendChild( renderer.domElement );
  145. window.addEventListener( 'resize', onWindowResize );
  146. // Load background and generate envMap
  147. new RGBELoader()
  148. .setDataType( THREE.FloatType )
  149. .setPath( 'textures/equirectangular/' )
  150. .load( 'venice_sunset_1k.hdr', function ( texture ) {
  151. texture.mapping = THREE.EquirectangularReflectionMapping;
  152. envMap = texture;
  153. background = texture;
  154. //
  155. buildGUI();
  156. initScene( scenes[ state.scene ] );
  157. animate();
  158. } );
  159. }
  160. function initScene( sceneInfo ) {
  161. const descriptionEl = document.getElementById( 'description' );
  162. if ( sceneInfo.author && sceneInfo.authorURL ) {
  163. descriptionEl.innerHTML = sceneInfo.name + ' by <a href="' + sceneInfo.authorURL + '" target="_blank" rel="noopener">' + sceneInfo.author + '</a>';
  164. }
  165. scene = new THREE.Scene();
  166. scene.background = new THREE.Color( 0x222222 );
  167. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.001, 1000 );
  168. scene.add( camera );
  169. let spot1;
  170. if ( sceneInfo.addLights ) {
  171. const ambient = new THREE.AmbientLight( 0x222222 );
  172. scene.add( ambient );
  173. const directionalLight = new THREE.DirectionalLight( 0xdddddd, 4 );
  174. directionalLight.position.set( 0, 0, 1 ).normalize();
  175. scene.add( directionalLight );
  176. spot1 = new THREE.SpotLight( 0xffffff, 1 );
  177. spot1.position.set( 5, 10, 5 );
  178. spot1.angle = 0.50;
  179. spot1.penumbra = 0.75;
  180. spot1.intensity = 100;
  181. spot1.decay = 2;
  182. if ( sceneInfo.shadows ) {
  183. spot1.castShadow = true;
  184. spot1.shadow.bias = 0.0001;
  185. spot1.shadow.mapSize.width = 2048;
  186. spot1.shadow.mapSize.height = 2048;
  187. }
  188. scene.add( spot1 );
  189. }
  190. if ( sceneInfo.shadows ) {
  191. renderer.shadowMap.enabled = true;
  192. renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  193. }
  194. // TODO: Reuse existing OrbitControls, GLTFLoaders, and so on
  195. orbitControls = new OrbitControls( camera, renderer.domElement );
  196. if ( sceneInfo.addGround ) {
  197. const groundMaterial = new THREE.MeshPhongMaterial( { color: 0xFFFFFF } );
  198. const ground = new THREE.Mesh( new THREE.PlaneGeometry( 512, 512 ), groundMaterial );
  199. ground.receiveShadow = !! sceneInfo.shadows;
  200. if ( sceneInfo.groundPos ) {
  201. ground.position.copy( sceneInfo.groundPos );
  202. } else {
  203. ground.position.z = - 70;
  204. }
  205. ground.rotation.x = - Math.PI / 2;
  206. scene.add( ground );
  207. }
  208. loader = new GLTFLoader();
  209. const dracoLoader = new DRACOLoader();
  210. dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' );
  211. loader.setDRACOLoader( dracoLoader );
  212. let url = sceneInfo.url.replace( /%s/g, state.extension );
  213. if ( state.extension === 'glTF-Binary' ) {
  214. url = url.replace( '.gltf', '.glb' );
  215. }
  216. const loadStartTime = performance.now();
  217. loader.load( url, function ( data ) {
  218. gltf = data;
  219. const object = gltf.scene;
  220. console.info( 'Load time: ' + ( performance.now() - loadStartTime ).toFixed( 2 ) + ' ms.' );
  221. if ( sceneInfo.cameraPos ) {
  222. camera.position.copy( sceneInfo.cameraPos );
  223. }
  224. if ( sceneInfo.center ) {
  225. orbitControls.target.copy( sceneInfo.center );
  226. }
  227. if ( sceneInfo.objectPosition ) {
  228. object.position.copy( sceneInfo.objectPosition );
  229. if ( spot1 ) {
  230. spot1.target.position.copy( sceneInfo.objectPosition );
  231. }
  232. }
  233. if ( sceneInfo.objectRotation ) {
  234. object.rotation.copy( sceneInfo.objectRotation );
  235. }
  236. if ( sceneInfo.objectScale ) {
  237. object.scale.copy( sceneInfo.objectScale );
  238. }
  239. if ( sceneInfo.addEnvMap ) {
  240. object.traverse( function ( node ) {
  241. if ( node.material && ( node.material.isMeshStandardMaterial ||
  242. ( node.material.isShaderMaterial && node.material.envMap !== undefined ) ) ) {
  243. node.material.envMap = envMap;
  244. node.material.envMapIntensity = 1.5; // boombox seems too dark otherwise
  245. }
  246. } );
  247. scene.background = background;
  248. }
  249. object.traverse( function ( node ) {
  250. if ( node.isMesh || node.isLight ) node.castShadow = true;
  251. } );
  252. const animations = gltf.animations;
  253. if ( animations && animations.length ) {
  254. mixer = new THREE.AnimationMixer( object );
  255. for ( let i = 0; i < animations.length; i ++ ) {
  256. const animation = animations[ i ];
  257. // There's .3333 seconds junk at the tail of the Monster animation that
  258. // keeps it from looping cleanly. Clip it at 3 seconds
  259. if ( sceneInfo.animationTime ) {
  260. animation.duration = sceneInfo.animationTime;
  261. }
  262. const action = mixer.clipAction( animation );
  263. if ( state.playAnimation ) action.play();
  264. }
  265. }
  266. scene.add( object );
  267. onWindowResize();
  268. }, undefined, function ( error ) {
  269. console.error( error );
  270. } );
  271. }
  272. function onWindowResize() {
  273. camera.aspect = window.innerWidth / window.innerHeight;
  274. camera.updateProjectionMatrix();
  275. renderer.setSize( window.innerWidth, window.innerHeight );
  276. }
  277. function animate() {
  278. requestAnimationFrame( animate );
  279. if ( mixer ) mixer.update( clock.getDelta() );
  280. orbitControls.update();
  281. render();
  282. }
  283. function render() {
  284. renderer.render( scene, camera );
  285. }
  286. function buildGUI() {
  287. gui = new GUI( { width: 330 } );
  288. gui.domElement.parentElement.style.zIndex = 101;
  289. const sceneCtrl = gui.add( state, 'scene', Object.keys( scenes ) );
  290. sceneCtrl.onChange( reload );
  291. const animCtrl = gui.add( state, 'playAnimation' );
  292. animCtrl.onChange( toggleAnimations );
  293. updateGUI();
  294. }
  295. function updateGUI() {
  296. if ( extensionControls ) extensionControls.remove();
  297. const sceneInfo = scenes[ state.scene ];
  298. if ( sceneInfo.extensions.indexOf( state.extension ) === - 1 ) {
  299. state.extension = sceneInfo.extensions[ 0 ];
  300. }
  301. extensionControls = gui.add( state, 'extension', sceneInfo.extensions );
  302. extensionControls.onChange( reload );
  303. }
  304. function toggleAnimations() {
  305. for ( let i = 0; i < gltf.animations.length; i ++ ) {
  306. const clip = gltf.animations[ i ];
  307. const action = mixer.existingAction( clip );
  308. state.playAnimation ? action.play() : action.stop();
  309. }
  310. }
  311. function reload() {
  312. if ( loader && mixer ) mixer.stopAllAction();
  313. updateGUI();
  314. initScene( scenes[ state.scene ] );
  315. }
  316. onload();
  317. </script>
  318. </body>
  319. </html>