学习threejs，tga格式图片文件贴图
👨⚕️ 主页： gis分享者
👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨⚕️ 收录于专栏：threejs gis工程师
文章目录
- 一、🍀前言
- 1.1 ☘️TGA图片
- 1.2 ☘️THREE.MeshPhongMaterial材质
- 1.3 ☘️TGA加载器TGALoader
- 二、🍀使用tga格式图片文件贴图
- 1. ☘️实现思路
- 2. ☘️代码样例
一、🍀前言
本文详细介绍如何基于threejs在三维场景中使用tga格式图片文件贴图，亲测可用。希望能帮助到您。一起学习，加油！加油！
1.1 ☘️TGA图片
TGA（Tagged Graphics Format）格式图片是由Truevision公司为其显示卡开发的一种图像文件格式，现已成为数字化图像以及运用光线跟踪算法所产生的高质量图像的常用格式。
TGA图片的特点：
高质量：TGA格式支持多种颜色深度和图像尺寸选项，能够存储高质量、高分辨率的图像。
压缩算法：TGA格式使用不失真的压缩算法，可以在保持图像质量的同时减小文件大小。
通道效果：TGA格式支持带通道图，可以存储图像的透明度信息，这在图形设计和动画制作中非常有用。
方向性：TGA格式还具有方向性的特点，可以存储图像的旋转和翻转信息。
TGA图片的使用场景：
计算机图形：TGA格式在计算机图形领域有着广泛的应用，常用于图形设计、动画制作以及游戏开发等领域。
影视动画：由于TGA格式具有高质量和压缩算法的优势，它常被用作影视动画的序列输出格式。
其他领域：TGA格式还可用于科学计算、医学影像等领域，用于存储和传输高质量图像。
如何创建和使用PVR图片：
查看工具：Windows 10系统已经默认支持查看TGA格式图片，而其他版本的Windows可以使用WPS等看图软件来查看。此外，还有专门的TGA查看工具，如tga viewer等。
编辑工具：Photoshop等专业的图像处理软件可以打开和编辑TGA格式图片，用户可以在这些软件中进行图像调整、滤镜处理等操作。
1.2 ☘️THREE.MeshPhongMaterial材质
THREE.MeshPhongMaterial 是 Three.js 中的一种材质类型，用于模拟物体表面的光照效果，包括漫反射（diffuse）和镜面反射（specular）。这种材质遵循 Phong 反射模型，可以模拟出光滑表面的高光效果，因此非常适合用来渲染金属、塑料、瓷器等具有光泽表面的物体。
常用属性：
THREE.MeshPhongMaterial 继承自 THREE.Material，并具有一些特定的属性，可以用来控制材质的外观：
color：材质的基本颜色，默认为白色（0xffffff）。可以是一个整数，表示十六进制颜色值。
map：基础颜色贴图，可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。
alphaMap：透明度贴图，可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。
emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。
emissiveMap：自发光贴图，可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。
specular：高光颜色，默认为白色（0x111111）。高光颜色定义了镜面反射的颜色。
shininess：高光强度，默认为 30。高光强度定义了高光区域的锐度，数值越高，高光越集中。
opacity：材质的全局透明度，默认为 1（不透明）。
transparent：是否开启透明模式，默认为 false。如果设置为 true，则需要设置 opacity 或者使用 alphaMap。
side：指定材质在哪一面渲染，可以是 THREE.FrontSide（正面）、THREE.BackSide（背面）或 THREE.DoubleSide（双面）。
wireframe：是否启用线框模式，默认为 false。
visible：是否渲染该材质，默认为 true。
depthTest：是否进行深度测试，默认为 true。
depthWrite：是否写入深度缓冲区，默认为 true。
blending：混合模式，默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。
vertexColors：是否启用顶点颜色，默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。
flatShading：是否使用平滑着色，默认为 false。如果设置为 true，则每个面片都将使用平均法线。
envMap：环境贴图，可以用来模拟环境光照。可以是一个 THREE.Texture 对象。
reflectivity：环境光反射率，默认为 1。
refractionRatio：折射率，默认为 0.98。
combine：环境贴图的组合方式，默认为 THREE.MixOperation。
bumpMap：凹凸贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
bumpScale：凹凸贴图的比例，默认为 1。
normalMap：法线贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
normalScale：法线贴图的比例，默认为 Vector2(1, 1)。
displacementMap：置换贴图，可以用来改变表面的高度。可以是一个 THREE.Texture 对象。
displacementScale：置换贴图的比例，默认为 1。
displacementBias：置换贴图的偏移，默认为 0。
1.3 ☘️TGA加载器TGALoader
构造函数
TGALoader( manager : LoadingManager )
manager — 供加载器使用的 loadingManager。默认值为 THREE.DefaultLoadingManager。
创建一个新的 TGALoader。
属性
请参阅基本 Loader 类以了解公共属性。
方法
常用方法见 Loader 基类。
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : DataTexture
url — 包含 .tga 文件的路径/URL 的字符串。
onLoad — （可选）加载成功完成后要调用的函数。该函数接收加载的 DataTexture 作为参数。
onProgress — （可选）在加载过程中调用的函数。参数将是 XMLHttpRequest 实例，它包含 .total 和 .loaded 字节。
onError —（可选）加载期间发生错误时调用的函数。该函数接收错误作为参数。
从 url 开始加载并将加载的纹理传递给 onLoad。纹理也直接返回以供立即使用（但可能未完全加载）。
二、🍀使用tga格式图片文件贴图
1. ☘️实现思路
- 1、初始化renderer渲染器
- 2、初始化Scene三维场景scene
- 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
- 4、创建THREE.AmbientLight环境光源ambiLight，scene场景加入环境光源ambiLight。创建THREE.DirectionalLight平行光源light，设置平行光源位置，scene添加平行光源light。
- 5、加载几何模型：定义createMesh方法，用于创建THREE.Mesh网格对象mesh，该方法中mesh使用‘crate_color8.tga’图片进行贴图。调用createMesh方法，生成二十面几何体网格对象polyhedron，生成立方体网格对象cube，球体网格对象sphere，分别设置生成的网格对象位置，场景scene加入生成的网格对象。定义render方法，实现几何体渲染和旋转动画，执行render方法。具体代码参考下面代码样例。
- 6、加入stats监控器，监控帧数信息。
2. ☘️代码样例
<!DOCTYPE html>
<html>
<head>
<title>学习threejs，tga格式图片文件贴图</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<script type="text/javascript" src="../libs/TGALoader.js"></script>
<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>
<!-- js 代码示例-->
<script type="text/javascript">
// 初始化
function init() {
var stats = initStats();
// 创建三维场景
var scene = new THREE.Scene();
// 创建投影相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器并设置大小
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;
var polyhedron = createMesh(new THREE.IcosahedronGeometry(5, 0));
polyhedron.position.x = 12;
scene.add(polyhedron);
var sphere = createMesh(new THREE.SphereGeometry(5, 20, 20));
scene.add(sphere);
var cube = createMesh(new THREE.BoxGeometry(5, 5, 5));
cube.position.x = -12;
scene.add(cube);
// 设置相机位置大小和方向
camera.position.x = 00;
camera.position.y = 12;
camera.position.z = 28;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var ambiLight = new THREE.AmbientLight(0x141414);
scene.add(ambiLight);
var light = new THREE.DirectionalLight();
light.position.set(0, 30, 20);
scene.add(light);
// 渲染器绑定html元素
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
var step = 0;
var controls = new function () {
};
var gui = new dat.GUI();
render();
function createMesh(geom, imageFile) {
var loader = new THREE.TGALoader();
var texture = loader.load('../assets/textures/crate_color8.tga');
var mat = new THREE.MeshPhongMaterial();
mat.map = texture;
var mesh = new THREE.Mesh(geom, mat);
return mesh;
}
function render() {
stats.update();
polyhedron.rotation.y = step += 0.01;
polyhedron.rotation.x = step;
cube.rotation.y = step;
cube.rotation.x = step;
sphere.rotation.y = step;
sphere.rotation.x = step;
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}
function initStats() {
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
window.onload = init;
</script>
</body>
</html>
效果如下：
