webgl_loader_texture_tga.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - materials - TGA texture</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> - TGA texture example by <a href="https://github.com/DaoshengMu/" target="_blank" rel="noopener">Daosheng Mu</a>
  12. </div>
  13. <script type="module">
  14. import * as THREE from '../build/three.module.js';
  15. import Stats from './jsm/libs/stats.module.js';
  16. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  17. import { TGALoader } from './jsm/loaders/TGALoader.js';
  18. var camera, scene, renderer, stats;
  19. init();
  20. animate();
  21. function init() {
  22. var container = document.createElement( 'div' );
  23. document.body.appendChild( container );
  24. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
  25. camera.position.set( 0, 50, 250 );
  26. scene = new THREE.Scene();
  27. //
  28. var loader = new TGALoader();
  29. var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
  30. // add box 1 - grey8 texture
  31. var texture1 = loader.load( 'textures/crate_grey8.tga' );
  32. var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
  33. var mesh1 = new THREE.Mesh( geometry, material1 );
  34. mesh1.position.x = - 50;
  35. scene.add( mesh1 );
  36. // add box 2 - tga texture
  37. var texture2 = loader.load( 'textures/crate_color8.tga' );
  38. var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
  39. var mesh2 = new THREE.Mesh( geometry, material2 );
  40. mesh2.position.x = 50;
  41. scene.add( mesh2 );
  42. //
  43. var ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
  44. scene.add( ambientLight );
  45. var light = new THREE.DirectionalLight( 0xffffff, 1 );
  46. light.position.set( 1, 1, 1 );
  47. scene.add( light );
  48. //
  49. renderer = new THREE.WebGLRenderer( { antialias: true } );
  50. renderer.setPixelRatio( window.devicePixelRatio );
  51. renderer.setSize( window.innerWidth, window.innerHeight );
  52. container.appendChild( renderer.domElement );
  53. //
  54. var controls = new OrbitControls( camera, renderer.domElement );
  55. //
  56. stats = new Stats();
  57. container.appendChild( stats.dom );
  58. //
  59. window.addEventListener( 'resize', onWindowResize, false );
  60. }
  61. function onWindowResize() {
  62. camera.aspect = window.innerWidth / window.innerHeight;
  63. camera.updateProjectionMatrix();
  64. renderer.setSize( window.innerWidth, window.innerHeight );
  65. }
  66. function animate() {
  67. requestAnimationFrame( animate );
  68. render();
  69. stats.update();
  70. }
  71. function render() {
  72. renderer.render( scene, camera );
  73. }
  74. </script>
  75. </body>
  76. </html>