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

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

Three.js - 加载 TGA 格式的纹理相关推荐

Three.js加载.stl格式模型
.stl格式模型加载本文是Three.js电子书的14.2节基本所有的三维软件都支持导出.stl格式的三维模型文件,.stl格式的三维模型不包含材质Material信息,只包含几何体顶点数据的信息 ...
three.js加载PDB格式模型(vue中使用three.js55)
加载PDB格式模型 1.demo效果 2.实现要点 2.1 PDB模型放置路径 2.2 加载PDB模型 2.3 处理分子顶点 2.4 处理分子连线 3.demo代码 1.demo效果如上图,该dem ...
three.js加载和使用纹理-加载DDS、PVR、TGA格式的纹理(vue中使用three.js73)
加载DDS.PVR.TGA格式的纹理 1.demo效果 2. 实现要点 2.1 加载DDS格式纹理 2.2 加载PVR格式纹理 2.3 加载TGA格式纹理 3. demo代码 1.demo效果以上三 ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...
Metal之加载TGA与PNG/JPEG纹理图片
TGA纹理 ① 效果展示 ② 环境准备视图控制器类:在 viewDidLoad 函数中创建 MTKView 对象.自定义 render 对象,并设置 view 的代理为 render,其流程请参考: ...
关于three.js加载blender导出gltf格式模型动画要点
研究过一次加载动画后导入three.js场景不执行动画,故此记录原因. 我判断两个方面影响动画生成,一.blender导出模型未生成动画通道二.代码原因未执行一.blender 制作动画后应在动画 ...
three.js加载三维模型（obj文件mtl文件）
.obj和.mtl格式详解 obj文件是3D模型文件格式.由Alias|Wavefront公司为3D建模和动画软件"Advanced Visualizer"开发的一种标准,适合用于 ...
maxscript脚本：模型导出为json，用于three.js加载
一.总的任务 1.数据来源: 将3dsmax中建好的模型,通过烘焙反贴,赋予SelfIllumMap(自发光材质)一个bitmap(位图贴图),用于表达物体的光影效果.加上本身的diffuseMap( ...
优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...