Three.js - 加载 TGA 格式的纹理

最新推荐文章于 2025-02-06 11:28:38 发布

「已注销」

最新推荐文章于 2025-02-06 11:28:38 发布

阅读量5.2k

点赞数 1

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/ithanmang/article/details/82422995

版权

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/201809/20180905/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

最低0.47元/天解锁文章