學習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.pswp.cn/news/894711.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/894711.shtml
英文地址，請注明出處：http://en.pswp.cn/news/894711.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

DeepSeek R1技術報告關鍵解析(8/10)：DeepSeek-R1 的“aha 時刻”，AI 自主學習的新突破

DeepSeek R1技術報告關鍵解析(8/10)：DeepSeek-R1 的“aha 時刻”，AI 自主學習的新突破

1. 什么是 AI 的“aha 時刻”&#xff1f; 在強化學習過程中&#xff0c;AI 的推理能力并不是線性增長的&#xff0c;而是會經歷一些關鍵的“頓悟”時刻&#xff0c;研究人員將其稱為“aha 時刻”。 這是 AI 在訓練過程中突然學會了一種新的推理方式&#xff0c;或者能夠主動…
閱讀更多...
python:遞歸函數與lambda函數

python:遞歸函數與lambda函數

遞歸函數&#xff1a;1.函數內調用自己 2.有一個出口 1.遞歸 一.有出口時 def sum(num):if num1:return 1return numsum(num-1) asum(3) print(a) #num3 3sum(2) #num2 2sum(1) #num1是返回1 #即3sum(2&#xff09;即32sum(1)即321運行結果 6 二.無出口時 def sum(num)…
閱讀更多...
ABB 3BSE018741R30 帶插頭連接器的電纜

ABB 3BSE018741R30 帶插頭連接器的電纜

產品ID:3BSE018741R30 ABB型號名稱:PFTL 101/201/PFCL 201 30米 目錄描述:帶插頭連接器的電纜&#xff0c;30米 ABB型號名稱:PFTL 101/201/PFCL 201 30米 核心信用:0.00 原產國:瑞典波蘭 海關稅則號:85389091 框架尺寸:備件 毛重:5公斤 媒體描述:帶插頭連接器的電纜 最小訂購數…
閱讀更多...
SpringMVC請求

SpringMVC請求

一、RequestMapping注解 RequestMapping注解的作用是建立請求URL和處理方法之間的對應關系 RequestMapping注解可以作用在方法和類上 1. 作用在類上&#xff1a;第一級的訪問目錄 2. 作用在方法上&#xff1a;第二級的訪問目錄 3. 細節&#xff1a;路徑可以不編寫 / 表示應…
閱讀更多...
VUE的響應性調試：組件調試鉤子、計算屬性調試、偵聽器調試【僅會在開發模式下工作】

VUE的響應性調試：組件調試鉤子、計算屬性調試、偵聽器調試【僅會在開發模式下工作】

文章目錄 引言I 組件調試鉤子調試事件對象的類型定義鉤子II 計算屬性調試例子回調函數說明III 偵聽器調試引言 VUE的響應性調試的使用場景：確切地知道Vue 的響應性系統正在跟蹤什么，或者是什么導致了組件重新渲染。 I 組件調試鉤子 組件調試鉤子僅會在開發模式下工作 調試…
閱讀更多...
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…
閱讀更多...
藍橋杯試題：排序

藍橋杯試題：排序

一、問題描述 給定 nn 個正整數 a1,a2,…,ana1?,a2?,…,an?&#xff0c;你可以將它們任意排序。現要將這 nn 個數字連接成一排&#xff0c;即令相鄰數字收尾相接&#xff0c;組成一個數。問&#xff0c;這個數最大可以是多少。 輸入格式 第一行輸入一個正整數 nn&#xff…
閱讀更多...
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;這其中重要的就是全面擁抱了響應式編程的設計思想和實…
閱讀更多...
C/C++編譯器

C/C++編譯器

C/C 代碼是不可跨平臺的&#xff0c;Windows 和 Unix-like 有著不同的 API&#xff0c;C/C 在不同平臺有著不同編譯器。 MSVC Windows 平臺&#xff0c;MSVC 是 Visual Studio 中自帶的 C/C 編譯器。 GCC Unix-like 平臺&#xff0c;GCC 原名 GNU C Compiler&#xff0c;后…
閱讀更多...
python gltf生成預覽圖

python gltf生成預覽圖

使用Python生成GLTF模型的預覽圖 隨著3D技術的不斷發展&#xff0c;GLTF&#xff08;GL Transmission Format&#xff09;逐漸成為了Web和移動應用程序中最流行的3D文件格式之一。GLTF文件不僅能以較小的體積存儲復雜的3D模型&#xff0c;還支持動畫、材質、光照和紋理等特性。…
閱讀更多...
html中的表格屬性以及合并操作

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

表格用table定義&#xff0c;標簽標題用caption標簽定義&#xff1b;用tr定義表格的若干行&#xff1b;用td定義若干個單元格&#xff1b;&#xff08;當單元格是表頭時&#xff0c;用th標簽定義&#xff09;&#xff08;th標簽會略粗于td標簽&#xff09; table的整體外觀取決…
閱讀更多...
【JavaScript】《JavaScript高級程序設計 (第4版) 》筆記-Chapter3-語言基礎

【JavaScript】《JavaScript高級程序設計 (第4版) 》筆記-Chapter3-語言基礎

三、語言基礎 ECMAScript 的語法很大程度上借鑒了 C 語言和其他類 C 語言&#xff0c;如 Java 和 Perl。ECMAScript 中一切都區分大小寫。無論是變量、函數名還是操作符&#xff0c;都區分大小寫。 所謂標識符&#xff0c;就是變量、函數、屬性或函數參數的名稱。標識符可以由…
閱讀更多...
【前端】【Ts】【知識點總結】TypeScript知識總結

【前端】【Ts】【知識點總結】TypeScript知識總結

一、總體概述 TypeScript 是 JavaScript 的超集&#xff0c;主要通過靜態類型檢查和豐富的類型系統來提高代碼的健壯性和可維護性。它涵蓋了從基礎數據類型到高級類型、從函數與對象的類型定義到類、接口、泛型、模塊化及裝飾器等眾多知識點。掌握這些內容有助于編寫更清晰、結…
閱讀更多...
基于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…
閱讀更多...
我的鴻蒙學習之旅：探索萬物互聯的新宇宙

我的鴻蒙學習之旅：探索萬物互聯的新宇宙

在科技飛速發展的今天&#xff0c;操作系統領域的創新層出不窮。華為鴻蒙系統的出現&#xff0c;猶如一顆璀璨的新星&#xff0c;照亮了萬物互聯的未來之路。懷著對新技術的好奇與渴望&#xff0c;我踏上了學習鴻蒙的征程&#xff0c;這段經歷充滿了挑戰與驚喜&#xff0c;也讓…
閱讀更多...
Docker數據卷管理及優化

Docker數據卷管理及優化

一、基礎概念 1.docker數據卷是一個可供容器使用的特殊目錄&#xff0c;它繞過了容器的文件系統&#xff0c;直接將數據存在宿主機上。 2.docker數據卷的作用&#xff1a; 數據持久化&#xff1a;即使容器被刪除或重建數據卷中的數據仍然存在 數據共享&#xff1a;多個容器可以…
閱讀更多...
java：mysql切換達夢數據庫(五分鐘適配完成)

java：mysql切換達夢數據庫(五分鐘適配完成)

背景 因為項目需要國產數據庫的支持&#xff0c;選擇了達夢數據庫&#xff0c;由于我們之前使用的是MySQL今天我們就來說一說&#xff0c;如何快速的切換到達夢數據庫&#xff0c;原本這一章我打算寫VIP章節的后續想想&#xff0c;就純分享。畢竟是國產數據庫遷移數據庫 這里…
閱讀更多...
最新文章

Copyright @ 2022~2023