1、TGA格式
TGA（Targa）格式是计算机上应用最广泛的图象格式。
在兼顾了BMP的图象质量的同时又兼顾了JPEG的体积优势。
并且还有自身的特点：通道效果、方向性。
在CG领域常作为影视动画的序列输出格式，因为兼具体积小和效果清晰的特点。
TGA的结构比较简单，属于一种图形、图像数据的通用格式，在多媒体领域有很大影响，是计算机生成图像向电视转换的一种首选格式。
TGA图像格式最大的特点是可以做出不规则形状的图形、图像文件，一般图形、图像文件都为四方形，若需要有圆形、菱形甚至是缕空的图像文件时，TGA就可以派上用场了。
TGA格式支持压缩，使用不失真的压缩算法。
PC游戏中很多采用TGA格式的图片，转换为tga格式用ps就可以了。
可以通过ps打开以及进行转换。
2、导入TGA格式的纹理
2.1、示例
https://ithanmang.gitee.io/threejs/home/09/0905/03-basic-texture-tga.html
2.2、效果
2.3、引入TGA加载器
<!--导入 TGA 加载器--><script src="../../libs/examples/js/loaders/TGALoader.js"></script>
2.2、实例化加载器
let loader = new THREE.TGALoader();let texture = loader.load('../../textures/tga/' + imageUrl, function () {......});let material = new THREE.MeshStandardMaterial();material.map = texture;let mesh = new THREE.Mesh(geometry, material);
3、示例代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="../../../three.png"><title>基础纹理-加载 TGA 格式的纹理</title><style>body {margin: 0;overflow: hidden; /* 溢出隐藏 */}#loading {position: fixed;top: 50%;left: 50%;color: #FFFFFF;font-size: 20px;margin-top: -30px;margin-left: -40px;}</style><script src="../../libs/build/three-r93.js"></script><script src="../../libs/examples/js/Detector.js"></script><script src="../../libs/examples/js/libs/dat.gui.min.js"></script><script src="../../libs/examples/js/libs/stats.min.js"></script><script src="../../libs/examples/js/controls/OrbitControls.js"></script><!--导入 TGA 加载器--><script src="../../libs/examples/js/loaders/TGALoader.js"></script></head><body><p id="loading">loading......</p><script>let scene, camera, renderer, controls, guiControls;let stats = initStats();/* 场景 */function initScene() {scene = new THREE.Scene();scene.background = new THREE.Color(0x050505);}/* 相机 */function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(0, 0, -50);camera.lookAt(new THREE.Vector3(0, 0, 0));}/* 渲染器 */function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}/* 灯光 */function initLight() {scene.add(new THREE.AmbientLight(0x0c0c0c));let spotLight1 = new THREE.SpotLight(0xffffff);spotLight1.position.set(-400, -400, -400);let spotLight2 = new THREE.SpotLight(0xffffff);spotLight2.position.set(400, 400, 400);scene.add(spotLight1);scene.add(spotLight2);}/* 控制器 */function initControls() {/* 地图控件 */controls = new THREE.OrbitControls(camera, renderer.domElement);/* 属性参数 */}/* 调试插件 */function initGui() {guiControls = new function () {};let gui = new dat.GUI();}/* 场景中的内容 */let sphere;let box;function initContent() {sphere = createMesh(new THREE.SphereGeometry(5, 20, 20), 'crate_color8.tga');box = createMesh(new THREE.BoxGeometry(7, 7, 7), 'crate_grey8.tga');box.translateX(7);sphere.translateX(-7);scene.add(sphere);scene.add(box);}/* 移除加载元素 */function removeLoading() {document.getElementById('loading').style.display = 'none';}/* 创建带有纹理的网格 */function createMesh(geometry, imageUrl) {let loader = new THREE.TGALoader();let texture = loader.load('../../textures/tga/' + imageUrl, function () {removeLoading();});let material = new THREE.MeshStandardMaterial();material.map = texture;let mesh = new THREE.Mesh(geometry, material);return mesh;}/* 性能插件 */function initStats() {let stats = new Stats();document.body.appendChild(stats.domElement);return stats;}/* 窗口变动触发 */function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}/* 数据更新 */function update() {stats.update();controls.update();if (sphere) {sphere.rotateY(0.01);}if (box) {box.rotateY(0.01);}}/* 初始化 */function init() {if (!Detector.webgl) Detector.addGetWebGLMessage();initScene();initCamera();initRender();initLight();initControls();initContent();initGui();/* 监听事件 */window.addEventListener('resize', onWindowResize, false);}/* 循环渲染 */function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);update();}/* 初始加载 */(function () {console.log("three init start...");init();animate();console.log("three init end...");})();</script></body></html>
