当前位置： 首页 > article >正文

学习threejs，pvr格式图片文件贴图

article 2026/5/6 17:59:27

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️PVR贴图
    • 1.2 ☘️THREE.MeshPhongMaterial材质
  • 二、🍀使用pvr格式图片文件贴图
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用pvr格式图片文件贴图，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️PVR贴图

PVR（PowerVR）贴图是一种高效的纹理压缩格式，由Imagination Technologies公司开发，主要用于PowerVR图形处理单元（GPU）。这种格式以高效的内存使用和快速的渲染速度而闻名，特别适合在移动设备和游戏平台上使用。

PVR贴图的特点：
高效的压缩率：PVR格式采用了高效的压缩算法，能够在保持图像质量的同时显著减少贴图的内存占用。
快速的渲染速度：由于PVR贴图格式被PowerVR GPU原生支持，因此在使用这种GPU的设备上，PVR贴图的渲染速度通常比其他格式更快。
兼容性：PVR格式在iOS平台上得到了广泛的支持，同时也在Android和其他一些游戏平台上得到了应用。这使得开发者可以更容易地在不同平台上部署和使用PVR贴图。
支持多种图像格式：PVR贴图格式支持从8位到32位的多种图像格式，包括RGB、RGBA、灰度图等，满足了不同场景下的需求。

PVR贴图的使用场景：
游戏开发：由于PVR贴图具有高效的压缩率和快速的渲染速度，因此在游戏开发中得到了广泛的应用。开发者可以使用PVR贴图为游戏中的角色、场景和道具等添加逼真的纹理效果。
3D建模：在3D建模领域，PVR贴图同样可以用于为模型添加纹理和细节效果。通过使用PVR贴图，建模师可以创建出更加真实和生动的3D模型。
虚拟现实（VR）和增强现实（AR）：在VR和AR应用中，高质量的纹理贴图对于提升用户体验至关重要。PVR贴图以其高效的压缩率和渲染速度，成为了这些应用中常用的纹理格式之一。

如何创建和使用PVR贴图：
创建PVR贴图：开发者可以使用专业的图像编辑软件（如Photoshop、GIMP等）或3D建模软件（如3DMax、Maya等）来创建所需的纹理图像。然后，使用专门的工具（如Texture Packer、PVRTexTool等）将图像转换为PVR格式。
导入和使用PVR贴图：在游戏开发或3D建模软件中，开发者可以将转换后的PVR贴图导入到项目中，并根据需要进行调整和设置。例如，在Unity等游戏引擎中，开发者可以将PVR贴图应用到游戏对象上，以实现所需的视觉效果。

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。

二、🍀使用pvr格式图片文件贴图

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使用‘tex_base.pvr’图片进行贴图。调用createMesh方法，生成二十面几何体网格对象polyhedron，生成立方体网格对象cube，球体网格对象sphere，分别设置生成的网格对象位置，场景scene加入生成的网格对象。定义render方法，实现几何体渲染和旋转动画，执行render方法。具体代码参考下面代码样例。
  • 6、加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html>
<head><title>学习threejs，pvr格式图片文件贴图</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/PVRLoader.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);console.log(cube.geometry.faceVertexUvs);// 设置相机位置和方向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);// 渲染器绑定页面元素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.PVRLoader();var texture = loader.load('../assets/textures/tex_base.pvr');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>

效果如下：
在这里插入图片描述

相关文章：

学习threejs，pvr格式图片文件贴图

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️PVR贴图1.2 ☘️THREE.Mesh…...

编程日记 2026/5/6 17:59:27

数据库开发常识（10.6）——SQL性能判断标准及索引误区（1）

10.6. 数据库开发常识 作为一名专业数据库开发人员&#xff0c;不但需要掌握数据库开发相关的语法和功能实现&#xff0c;还要掌握专业数据库开发的常识。这样&#xff0c;才能在保量完成工作任务的同时&#xff0c;也保质的完成工作任务&#xff0c;避免了为应用的日后维护埋…...

编程日记 2026/5/5 5:09:46

2022年全国职业院校技能大赛网络系统管理赛项模块A：网络构建（样题2）-网络部分解析-附详细代码

目录 附录1：拓扑图​编辑 附录2：地址规划表 1.SW1 2.SW2 3.SW3 4.SW4 5.SW5 6.SW6 7.SW7 8.R1 9.R2 10.R3 11.AC1 12.AC2 13.EG1 14.EG2 15.AP2 16.AP3 附录1：拓扑图 附录2：地址规划表...

编程日记 2026/5/6 12:18:22

100.7 AI量化面试题：如何利用新闻文本数据构建交易信号？

目录 0. 承前1. 解题思路1.1 数据处理维度1.2 分析模型维度1.3 信号构建维度 2. 新闻数据获取与预处理2.1 数据获取接口2.2 文本预处理 3. 情感分析与事件抽取3.1 情感分析模型3.2 事件抽取 4. 信号生成与优化4.1 信号构建4.2 信号优化 5. 策略实现与回测5.1 策略实现 6. 回答话…...

编程日记 2026/4/3 13:38:51

【前端】【Ts】【知识点总结】TypeScript知识总结

一、总体概述 TypeScript 是 JavaScript 的超集&#xff0c;主要通过静态类型检查和丰富的类型系统来提高代码的健壮性和可维护性。它涵盖了从基础数据类型到高级类型、从函数与对象的类型定义到类、接口、泛型、模块化及装饰器等众多知识点。掌握这些内容有助于编写更清晰、结…...

编程日记 2026/2/23 6:56:26

【前端】【Ts】TypeScript的关键知识点

一、知识点总结 &#xff08;一&#xff09;void 与 never 的区别 (1) void&#xff1a;声明函数无返回值&#xff0c;但可以走到 return 行。(2) never&#xff1a;表示函数不会走到 return 行&#xff0c;常用于抛异常或无限循环。 &#xff08;二&#xff09;字面量类型与联…...

编程日记 2026/4/27 16:30:17

C++，STL，【目录篇】

文章目录 一、简介二、内容提纲第一部分&#xff1a;STL 概述第二部分&#xff1a;STL 容器第三部分&#xff1a;STL 迭代器第四部分&#xff1a;STL 算法第五部分&#xff1a;STL 函数对象第六部分&#xff1a;STL 高级主题第七部分&#xff1a;STL 实战应用 三、写作风格四、…...

编程日记 2026/4/26 12:01:21

2502vim,vim文本对象中文文档

介绍 文本块用户(textobj-user)是一个可帮助你毫不费力地创建自己的文本对象的Vim插件. 因为有许多陷阱需要处理,很难创建文本对象.此插件隐藏了此类细节,并提供了声明式定义文本对象的方法. 你可用正则式来定义简单的文本对象,或使用函数来定义复杂的文本对象.如… 文本对…...

编程日记 2026/4/16 9:15:58

【AI论文】直接对齐算法之间的差异模糊不清

摘要&#xff1a;直接对齐算法&#xff08;DAAs&#xff09;通过在对齐人类反馈的强化学习&#xff08;RLHF&#xff09;中用直接策略优化替代强化学习&#xff08;RL&#xff09;和奖励建模&#xff08;RM&#xff09;&#xff0c;简化了语言模型对齐过程。DAAs可以根据其排序…...

编程日记 2026/4/26 12:02:01

（9）gdb 笔记（2）：查看断点 info b，删除断点 delete 3，回溯 bt，

&#xff08;11&#xff09; 查看断点 info b&#xff1a; # info b举例&#xff1a; &#xff08;12&#xff09;删除断点 delete 2 或者删除所有断点&#xff1a; # 1. 删除指定的断点 delete 3 # 2. 删除所有断点 delete 回车&#xff0c;之后输入 y 确认删除所有断点 举…...

编程日记 2026/4/26 12:01:19

中间件的概念及基本使用

什么是中间件 中间件是ASP.NET Core的核心组件&#xff0c;MVC框架、响应缓存、身份验证、CORS、Swagger等都是内置中间件。 广义上来讲&#xff1a;Tomcat、WebLogic、Redis、IIS&#xff1b;狭义上来讲&#xff0c;ASP.NET Core中的中间件指ASP.NET Core中的一个组件。中间件…...

编程日记 2026/4/26 12:01:39

什么是ce认证

CE认证&#xff0c;即只限于产品不危及人类、动物和货品的安全方面的基本安全要求&#xff0c;而不是一般质量要求&#xff0c;协调指令只规定主要要求&#xff0c;一般指令要求是标准的任务。因此准确的含义是:CE标志是安全合格标志而非质量合格标志。是构成欧洲指令核心的&qu…...

编程日记 2026/4/27 16:39:22

S4 HANA手工记账Tax Payable – FB41

本文主要介绍在S4 HANA OP中手工记账Tax Payable – FB41。具体请参照如下内容&#xff1a; 手工记账Tax Payable – FB41 该事务代码用于手工处理税码统驭科目的记账&#xff0c;一般税码科目需要设置为只能自动记账&#xff0c;因此无法手工对税码统驭科目记账&#xff0c;但…...

编程日记 2026/4/26 23:12:00

Java 大视界 -- Java 大数据在智慧文旅中的应用与体验优化（74）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2026/4/26 12:01:28

[leetcode]两数之和等于target

源代码 #include <iostream> #include <list> #include <iterator> // for std::prev using namespace std; int main() { int target 9; list<int> l{ 2, 3, 4, 6, 8 }; l.sort(); // 确保列表是排序的&#xff0c;因为双指针法要求输入是…...

编程日记 2026/4/26 12:01:29

老游戏回顾：G2

一个老的RPG游戏。 剧情有独到之处。 ------- 遥远的过去&#xff0c;古拉纳斯将希望之光给予人们&#xff0c;人类令希望之光不断扩大&#xff0c;将繁荣握在手中。 但是&#xff0c;暗之恶魔巴鲁玛将光从人类身上夺走。古拉纳斯为了守护人类与其展开了一场激战&#xff0c…...

编程日记 2026/5/3 12:01:34

行为驱动开发（BDD）如何提高自动化测试效率

在软件开发的过程中&#xff0c;自动化测试一直扮演着至关重要的角色。随着需求变化日益复杂、开发周期不断压缩&#xff0c;如何提升自动化测试的效率和准确性成为了现代软件开发团队的核心挑战之一。行为驱动开发&#xff08;BDD&#xff0c;Behavior Driven Development&…...

编程日记 2026/5/3 20:36:37

大语言模型的「幻觉」（Hallucination）是指模型在生成内容时

大语言模型的「幻觉」&#xff08;Hallucination&#xff09;是指模型在生成内容时&#xff0c;输出看似合理但实际错误、虚构或与事实不符的信息。这种现象并非模型有意欺骗&#xff0c;而是由其底层技术原理和训练方式导致的必然结果。 幻觉的核心特征 类型示例事实性错误生…...

编程日记 2026/2/27 1:23:54

[25] cuda 应用之 nppi 实现图像色彩调整

[25] cuda 应用之 nppi 实现图像色彩调整 在 NPPI&#xff08;NVIDIA Performance Primitives&#xff09;中&#xff0c;图像色彩调整通常包括以下几种操作&#xff1a; 亮度调整&#xff1a;增加或减少图像的亮度。对比度调整&#xff1a;增强或减弱图像的对比度。饱和度调…...

编程日记 2026/2/25 20:02:36

Redis常见数据类型与编码方式

⭐️前言⭐️ 本小节围绕Redis中常见的数据类型与编码方式展开。 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题可以在评论区留言 &#x1f349;博客中涉及源码及博主日常练习代码均已上传GitHu…...

编程日记 2026/5/5 15:38:40

inter i5 6300U 可以干嘛

Intel Core i5-6300U 是一款发布于 2015 年的双核四线程处理器&#xff0c;属于 Intel 第六代 Skylake 架构的低功耗移动处理器&#xff08;TDP 15W&#xff09;。虽然它不是最新的处理器&#xff0c;但在日常使用中仍然可以胜任许多任务。以下是它适合的用途&#xff1a; 1. 日…...

编程日记 2026/5/3 20:50:45

不可控的内存分配（CWE-789）

漏洞描述&#xff1a;内存分配的大小受外部控制的输入数据影响&#xff0c;且程序没有指定内存分配大小的上限 漏洞风险&#xff1a;攻击者可以使程序分配大量的内存&#xff0c;程序可能会因为内存资源不足而奔溃。 修复或规避建议&#xff1a; 设定合理的内存分配上限&…...

编程日记 2026/5/3 10:33:04

大型三甲医院算力网络架构的深度剖析与关键技术探索

一、引言 1.1 研究背景与意义 1.1.1 医疗信息化发展趋势 随着信息技术的迅猛发展&#xff0c;全球医疗行业正经历着深刻的数智化转型。数字化转型已成为医疗行业提升服务质量、优化运营效率、推动医学科研创新的关键驱动力。从电子病历系统的普及到远程医疗的广泛应用&#…...

编程日记 2026/5/5 4:57:06

获取要素类或表中的字段列表

要素类和表中往往包含一个或多个属性信息,可以通过ListFields()函数获取要素类中的字段列表. 操作方法: 1.打开IDLE,新建一个脚本窗口 2.导入arcpy模块 3.设置工作空间 arcpy.env.workspace "" 4.在try语句中对<>要素调用ListFields()方法 try:fieldlis…...

编程日记 2026/2/27 15:08:56

Android原生开发入门

1. 资源地址 Android官方教程Android参考手册 2. 必看基础模块 应用基础知识View 绑定 &#xff1a;绑定相当于Qt中的ui文件生成界面代码的机制&#xff0c;Qt中的ucc会自动将ui文件编译成ui_xxxx.h文件&#xff0c;Android开发中也一样。 Android中自动生成的代码在&#x…...

编程日记 2026/5/6 8:55:01

网络设备的安全加固

设备的安全始终是信息网络安全的一个重要方面&#xff0c;攻击者往往通过控制网络中设备来破坏系统和信息&#xff0c;或扩大已有的破坏。网络设备包括主机&#xff08;服务器、工作站、PC&#xff09;和网络设施&#xff08;交换机、路由器等&#xff09;。 一般说来&#xff…...

编程日记 2026/3/22 4:55:25

验证工具：VCS与Verdi介绍

VCS和Verdi都是Synopsys公司旗下的工具，在集成电路设计和验证领域发挥着重要作用。 VCS VCS，全称Verilog Compile Simulator，是Synopsys公司的一款Verilog仿真工具。它具有以下主要功能： 编译和仿真：VCS能够对Verilog设计代码和testbench进行编译，生成simv二进制可执行…...

编程日记 2026/4/28 16:13:37

CSV数据分析智能工具（基于OpenAI API和streamlit）

utils.py&#xff1a; from langchain_openai import ChatOpenAI from langchain_experimental.agents.agent_toolkits import create_csv_agent import jsonPROMPT_TEMPLATE """你是一位数据分析助手&#xff0c;你的回应内容取决于用户的请求内容。1. 对于文…...

编程日记 2026/4/26 12:02:03

【Day31 LeetCode】动态规划DP Ⅳ

一、动态规划DP Ⅳ 1、最后一块石头的重量II 1049 这题有点像脑筋急转弯&#xff0c;尽量让石头分成重量相同的两堆&#xff08;尽可能相同&#xff09;&#xff0c;相撞之后剩下的石头就是最小的。明白这一点&#xff0c;就与上一篇博客里的划分等和数组很相似。划分等和数组…...

编程日记 2026/2/27 20:53:39

产品经理的人工智能课 02 - 自然语言处理

产品经理的人工智能课 02 - 自然语言处理 1 自然语言处理是什么2 一个 NLP 算法的例子——n-gram 模型3 预处理与重要概念3.1 分词 Token3.2 词向量化表示与 Word2Vec 4 与大语言模型的交互过程参考链接 大语言模型&#xff08;Large Language Models, LLMs&#xff09;是自然语…...

编程日记 2026/5/5 14:00:42