学习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>