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

👨‍⚕️ 主页： 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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/894711.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

tkvue 入门，像写html一样写tkinter

tkvue 入门，像写html一样写tkinter

介绍 没有官网&#xff0c;只有例子 安装 像写vue 一样写tkinter 代码 pip install tkvue作者博客 修改样式 import tkvue import tkinter.ttk as ttktkvue.configure_tk(theme"clam")class RootDialog(tkvue.Component):template """ <Top…
阅读更多...
Java—不可变集合

Java—不可变集合

不可变集合&#xff1a;不可以被修改的集合 创建不可变集合的应用场景 如果某个数据不能被修改&#xff0c;把它防御性地拷贝到不可变集合中是个很好的实践。当集合对象被不可信的库调用时&#xff0c;不可变形式是安全的。 简单理解&#xff1a;不想让别人修改集合中的内容…
阅读更多...
每日Attention学习18——Grouped Attention Gate

每日Attention学习18——Grouped Attention Gate

模块出处 [ICLR 25 Submission] [link] UltraLightUNet: Rethinking U-shaped Network with Multi-kernel Lightweight Convolutions for Medical Image Segmentation 模块名称 Grouped Attention Gate (GAG) 模块作用 轻量特征融合 模块结构 模块特点 特征融合前使用Group…
阅读更多...
响应式编程_04Spring 5 中的响应式编程技术栈_WebFlux 和 Spring Data Reactive

响应式编程_04Spring 5 中的响应式编程技术栈_WebFlux 和 Spring Data Reactive

文章目录 概述响应式Web框架Spring WebFlux响应式数据访问Spring Data Reactive 概述 https://spring.io/reactive 2017 年&#xff0c;Spring 发布了新版本 Spring 5&#xff0c; Spring 5 引入了很多核心功能&#xff0c;这其中重要的就是全面拥抱了响应式编程的设计思想和实…
阅读更多...
html中的表格属性以及合并操作

html中的表格属性以及合并操作

表格用table定义&#xff0c;标签标题用caption标签定义&#xff1b;用tr定义表格的若干行&#xff1b;用td定义若干个单元格&#xff1b;&#xff08;当单元格是表头时&#xff0c;用th标签定义&#xff09;&#xff08;th标签会略粗于td标签&#xff09; table的整体外观取决…
阅读更多...
基于Springboot+vue的租车网站系统

基于Springboot+vue的租车网站系统

基于SpringbootVue的租车网站系统是一个现代化的在线租车平台&#xff0c;它结合了Springboot的后端开发能力和Vue的前端交互优势&#xff0c;为用户和汽车租赁公司提供了一个高效、便捷、易用的租车体验和管理工具。以下是对该系统的详细介绍&#xff1a; 一、系统架构 后…
阅读更多...
蓝桥杯之c++入门（二）【输入输出（上）】

蓝桥杯之c++入门（二）【输入输出（上）】

目录 前言1&#xff0e;getchar和 putchar1.1 getchar()1.2 putchar() 2&#xff0e;scanf和 printf2.1 printf2.1.1基本用法2.1.2占位符2.1.3格式化输出2.1.3.1 限定宽度2.1.3.2 限定小数位数 2.2 scanf2.2.1基本用法2.2.2 占位符2.2.3 scanf的返回值 2.3练习练习1&#xff1a…
阅读更多...
Docker数据卷管理及优化

Docker数据卷管理及优化

一、基础概念 1.docker数据卷是一个可供容器使用的特殊目录&#xff0c;它绕过了容器的文件系统&#xff0c;直接将数据存在宿主机上。 2.docker数据卷的作用&#xff1a; 数据持久化&#xff1a;即使容器被删除或重建数据卷中的数据仍然存在 数据共享&#xff1a;多个容器可以…
阅读更多...
java：mysql切换达梦数据库(五分钟适配完成)

java：mysql切换达梦数据库(五分钟适配完成)

背景 因为项目需要国产数据库的支持&#xff0c;选择了达梦数据库&#xff0c;由于我们之前使用的是MySQL今天我们就来说一说&#xff0c;如何快速的切换到达梦数据库&#xff0c;原本这一章我打算写VIP章节的后续想想&#xff0c;就纯分享。毕竟是国产数据库迁移数据库 这里…
阅读更多...
在游戏本(6G显存)上本地部署Deepseek，运行一个14B大语言模型，并使用API访问

在游戏本(6G显存)上本地部署Deepseek，运行一个14B大语言模型，并使用API访问

在游戏本6G显存上本地部署Deepseek&#xff0c;运行一个14B大语言模型&#xff0c;并使用API访问 环境说明环境准备下载lmstudio运行lmstudio 下载模型从huggingface.co下载模型 配置模型加载模型测试模型API启动API服务代码测试 deepseek在大语言模型上的进步确实不错&#xf…
阅读更多...
[leetcode]两数之和等于target

[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;因为双指针法要求输入是…
阅读更多...
C# OpenCV机器视觉:学生注意力监测

C# OpenCV机器视觉:学生注意力监测

小王是一位充满活力的年轻教师&#xff0c;刚接手了一个新班级。他满心欢喜地准备在课堂上大显身手&#xff0c;把自己的知识毫无保留地传授给学生。可没上几节课&#xff0c;他就发现了一个让人头疼的问题&#xff1a;课堂上总有那么几个学生注意力不集中&#xff0c;要么偷偷…
阅读更多...
【嵌入式】C语言多文件编程与内联函数

【嵌入式】C语言多文件编程与内联函数

文章目录 0 前言1 从C语言编译说起2 重复定义错误&#xff08;ODR violation&#xff09;和条件编译3 内联函数inline和static inline4 总结 0 前言 最近在研究ARM内核代码时&#xff0c;看到core_cm3.h中有大量的内联函数&#xff0c;为此查阅了很多资料&#xff0c;也和朋友讨…
阅读更多...
10分钟本地部署Deepseek-R1

10分钟本地部署Deepseek-R1

10分钟本地部署DeepSeek-R1 什么是DeepSeek-R1快速本地部署DeepSeek-R1Ollama下载Ollama安装检查是否安装成功 安装DeepSeek-R1模型模型使用测试 什么是DeepSeek-R1 DeepSeek-R1是中国的深度求索&#xff08;DeepSeek&#xff09;公司开发的智能助手。其具有极佳的语义理解和生…
阅读更多...
Office / WPS 公式、Mathtype 公式输入花体字、空心字

Office / WPS 公式、Mathtype 公式输入花体字、空心字

注&#xff1a;引文主要看注意事项。 1、Office / WPS 公式中字体转换 花体字 字体选择 “Eulid Math One” 空心字 字体选择 “Eulid Math Two” 2、Mathtype 公式输入花体字、空心字 2.1 直接输入 花体字 在 mathtype 中直接输入 \mathcal{L} L \Large \mathcal{L} L…
阅读更多...
【C++】STL——vector底层实现

【C++】STL——vector底层实现

目录 &#x1f495; 1.vector三个核心 &#x1f495;2.begin函数&#xff0c;end函数的实现&#xff08;简单略讲&#xff09; &#x1f495;3.size函数&#xff0c;capacity函数的实现 &#xff08;简单略讲&#xff09; &#x1f495;4.reserve函数实现 &#xff08;细节…
阅读更多...
7、怎么定义一个简单的自动化测试框架？

7、怎么定义一个简单的自动化测试框架？

定义一个简单的自动化测试框架可以从需求理解、框架设计、核心模块实现、测试用例编写和集成执行等方面入手&#xff0c;以下为你详细介绍&#xff1a; 1. 明确框架需求和范围 确定测试类型&#xff1a;明确框架要支持的测试类型&#xff0c;如单元测试、接口测试、UI 测试等…
阅读更多...
AI取代人类?

AI取代人类?

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
C语言-----数据结构从门到精通

C语言-----数据结构从门到精通

1.数据结构基本概念 数据结构是计算机中存储、组织数据的方式&#xff0c;旨在提高数据的访问和操作效率。它是实现高效算法和程序设计的基石。 目标:通过思维导图了解数据结构的知识点,并掌握。 1.1逻辑结构 逻辑结构主要四种类型: 集合&#xff1a;结构中的数据元素之…
阅读更多...
华为小米vivo向上，苹果荣耀OPPO向下

华为小米vivo向上，苹果荣耀OPPO向下

日前&#xff0c;Counterpoint发布的手机销量月度报告显示&#xff0c;中国智能手机销量在2024年第四季度同比下降3.2%&#xff0c;成为2024年唯一出现同比下滑的季度。而对于各大智能手机品牌来说&#xff0c;他们的市场份额和格局也在悄然发生变化。 华为逆势向上 在2024年第…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023