学习threejs，使用Texture纹理贴图，canvas动态更新贴图

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

---

---

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用Texture纹理贴图，canvas动态更新贴图，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️Texture 纹理贴图

Texture 创建一个纹理贴图，将其应用到一个表面，或者作为反射/折射贴图。

1.1.1 ☘️代码示例

const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

1.1.2 ☘️构造函数

Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )

1.1.3 ☘️属性

.id : Integer
只读 - 表示该纹理实例的唯一数字。

.isTexture : Boolean
只读标志，用于检查给定对象是否属于纹理类型。

.uuid : String
该对象实例的UUID。 这个值是自动分配的，因此不应当对其进行编辑。

.name : String
该对象的名称，可选，且无需唯一。默认值是一个空字符串。

.image : Image
一个图片对象，通常由TextureLoader.load方法创建。 该对象可以是被three.js所支持的任意图片（例如PNG、JPG、GIF、DDS）或视频（例如MP4、OGG/OGV）格式。

要使用视频来作为纹理贴图，你需要有一个正在播放的HTML5 Video元素来作为你纹理贴图的源图像， 并在视频播放时不断地更新这个纹理贴图。——VideoTexture 类会对此自动进行处理。

.mipmaps : Array
用户所给定的mipmap数组（可选）。

.mapping : number
图像将如何应用到物体（对象）上。默认值是THREE.UVMapping对象类型， 即UV坐标将被用于纹理映射。

.wrapS : number
这个值定义了纹理贴图在水平方向上将如何包裹，在UV映射中对应于U。

默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。

.wrapT : number
这个值定义了纹理贴图在垂直方向上将如何包裹，在UV映射中对应于V。

可以使用与 .wrapS : number相同的选项。

请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……）时才起作用。 宽度、高度无需相等，但每个维度的长度必须都是2的幂。 这是WebGL中的限制，不是由three.js所限制的。

.magFilter : number
当一个纹素覆盖大于一个像素时，贴图将如何采样。默认值为THREE.LinearFilter， 它将获取四个最接近的纹素，并在他们之间进行双线性插值。 另一个选项是THREE.NearestFilter，它将使用最接近的纹素的值。

.minFilter : number
当一个纹素覆盖小于一个像素时，贴图将如何采样。默认值为THREE.LinearMipmapLinearFilter， 它将使用mipmapping以及三次线性滤镜。

.anisotropy : number
沿着轴，通过具有最高纹素密度的像素的样本数。 默认情况下，这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果，代价是需要使用更多纹理样本。 使用renderer.capabilities.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值；这个值通常是2的幂。

.format : number
默认值为THREE.RGBAFormat。

.internalFormat : String
默认值是使用 .format 和 .type 的组合获得的。GPU 格式允许开发人员指定数据将如何存储在 GPU 上。

.type : number
这个值必须与.format相对应。默认值为THREE.UnsignedByteType， 它将会被用于绝大多数纹理格式。

.offset : Vector2
在 U 和 V 的每个方向上，纹理的单个重复从开始偏移多少。典型范围是 0.0 到 1.0。

以下纹理类型共享引擎中的第一个 uv 通道。偏移（和重复）设置根据以下优先级进行评估，然后由这些纹理共享：

color map
specular map
displacement map
normal map
bump map
roughness map
metalness map
alpha map
emissive map
clearcoat map
clearcoat normal map
clearcoat roughnessMap map

以下纹理类型共享引擎中的第二个 uv 通道。偏移（和重复）设置根据以下优先级进行评估，然后由这些纹理共享：

ao map
light map
.repeat : Vector2

纹理在 U 和 V 的每个方向上在整个表面上重复多少次。如果在任一方向上将 repeat 设置为大于 1，则相应的 Wrap 参数也应设置为 THREE.RepeatWrapping 或 THREE.MirroredRepeatWrapping 以实现所需的平铺影响。为纹理设置不同的重复值与 .offset 一样受到限制。

.rotation : number
纹理将围绕中心点旋转多少度，单位为弧度（rad）。正值为逆时针方向旋转，默认值为0。

.center : Vector2
旋转中心点。(0.5, 0.5)对应纹理的正中心。默认值为(0,0)，即左下角。

.matrixAutoUpdate : Boolean
是否从纹理的.offset、.repeat、.rotation和.center属性更新纹理的UV变换矩阵（uv-transform .matrix）。 默认值为true。 如果你要直接指定纹理的变换矩阵，请将其设为false。

.matrix : Matrix3
纹理的UV变换矩阵。 当纹理的.matrixAutoUpdate属性为true时， 由渲染器从纹理的.offset、.repeat、.rotation和.center属性中进行更新。 当.matrixAutoUpdate属性为false时，该矩阵可以被手动设置。 默认值为单位矩阵。

.generateMipmaps : Boolean
是否为纹理生成mipmap（如果可用）。默认为true。 如果你手动生成mipmap，请将其设为false。

.premultiplyAlpha : Boolean
如果设置为 true，alpha 通道（如果存在）会在纹理上传到 GPU 时倍增到颜色通道中。默认为假。

请注意，此属性对 ImageBitmap 没有影响。您需要在创建位图时进行配置。

.flipY : Boolean
如果设置为 true，纹理在上传到 GPU 时沿垂直轴翻转。默认为真。

请注意，此属性对 ImageBitmap 没有影响。您需要在创建位图时进行配置。

.unpackAlignment : number
默认为4。指定内存中每个像素行起点的对齐要求。 允许的值为1（字节对齐）、2（行对齐到偶数字节）、4（字对齐）和8（行从双字边界开始）。

.encoding : number
默认值为THREE.LinearEncoding。

请注意，如果在材质被使用之后，纹理贴图中这个值发生了改变， 需要触发Material.needsUpdate，来使得这个值在着色器中实现。

.version : Integer
这个值起始值为0，计算 .needsUpdate : Boolean被设置为true的次数。

.onUpdate : Function
一个回调函数，在纹理被更新后调用。 （例如，当needsUpdate被设为true且纹理被使用。）

.needsUpdate : Boolean
将其设置为true，以便在下次使用纹理时触发一次更新。 这对于设置包裹模式尤其重要。

.userData : Object
可用于存储有关纹理的自定义数据的对象。它不应该包含对函数的引用，因为这些不会被克隆。

.source : Source
纹理的数据定义。可以跨纹理共享对数据源的引用。这在 spritesheet 的上下文中通常很有用，其中多个纹理渲染相同的数据但具有不同的纹理转换。

1.1.4 ☘️方法

EventDispatcher方法在这个类上可以使用。

.updateMatrix () : undefined
从纹理的.offset、.repeat、 .rotation和.center属性来更新纹理的UV变换矩阵（uv-transform .matrix）。

.clone () : Texture
拷贝纹理。请注意。这不是“深拷贝”，图像是共用的。 此外，克隆纹理不会自动将其标记为纹理上传。一旦其图像属性（数据源）完全加载或准备就绪，您必须将 Texture.needsUpdate 设置为 true。

.toJSON ( meta : Object ) : Object
meta – 可选，包含有元数据的对象。

将Texture对象转换为 three.js JSON Object/Scene format（three.js JSON 物体/场景格式）。

.dispose () : undefined
使用“废置”事件类型调用EventDispatcher.dispatchEvent。

.transformUv ( uv : Vector2 ) : Vector2
基于纹理的.offset、.repeat、 .wrapS、.wrapT和.flipY属性值来变换uv。

二、🍀使用Texture纹理贴图，canvas动态更新贴图

1. ☘️实现思路

• 1、创建canvas页面html要素对象canvas（document.createElement(“canvas”) ），html要素添加canvas（document.getElementById(‘canvas-output’).appendChild(canvas)）。初始化literallycanvas canvas绘画组件，初始化renderer渲染器。
• 2、初始化Scene三维场景scene。
• 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
• 4、创建THREE.AmbientLight环境光源ambiLight，创建DirectionalLight平行光源light，设置light位置，scene场景加入ambiLight和light。
• 5、加载几何模型：定义createMesh方法（参数：geom 几何对象），方法内传入canvas创建THREE.Texture纹理贴图canvasMap，使用THREE.MeshPhongMaterial高光材质mat，mat属性map设置为canvasMap，创建THREE.Mesh网格对象mesh，返回mesh。调用createMesh方法创建立方体网格对象cube，设置cube的位置，scene场景添加cube。定义controls方法，定义canvas绘画工具的显示和隐藏方法。定义render方法，实现cube的旋转动画。具体代码参考下面代码样例。
• 6、加入gui控制。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html>
<head>
    <title>学习threejs，使用Texture纹理贴图，canvas动态更新贴图</title>
    <link href="../libs/literally/css/literally.css" rel="stylesheet">
    <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/perlin.js"></script>
    <script type="text/javascript" src="../libs/literally/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="../libs/literally/underscore-1.4.2.js"></script>
    <script type="text/javascript" src="../libs/literally/js/literallycanvas.js"></script>

    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        .fs-container {
            width: 300px;
            height: 300px;
            margin: auto;
            bottom: 20px;
            position: absolute;
            x: 0;
            y: 0;
        "
        }

        #canvas-output {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>

<div class="fs-container">
    <div id="canvas-output" style="float:left">
    </div>
</div>


<div id="WebGL-output">
</div>

<!-- Js代码块 -->
<script type="text/javascript">

	// 初始化literallycanvas canvas绘画组件
    var canvas = document.createElement("canvas");
    document.getElementById('canvas-output').appendChild(canvas);
    $('#canvas-output').literallycanvas({imageURLPrefix: '../libs/literally/img'});


    // 初始化
    function init() {

        var stats = initStats();

        // 创建三维场景scene
        var scene = new THREE.Scene();

        // 创建相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建渲染器webGLRenderer
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xbbbbbb, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;


        var cube = createMesh(new THREE.BoxGeometry(10, 10, 10));
        cube.position.x = 0;
        scene.add(cube);


        // 设置相机位置和方向
        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);

        // 渲染器webGLRenderer绑定html要素
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        var step = 0;

        var controls = new function () {

            this.showTexture = true;

            this.showCanvas = function () {
                if (controls.showTexture) {
                    $('.fs-container').show();
                } else {
                    $('.fs-container').hide();
                }
            };

            this.regenerateMap = function () {
                var date = new Date();
                pn = new Perlin('rnd' + date.getTime());
                fillWithPerlin(pn, ctx);
                cube.material.map.needsUpdate = true;
                $('#cv').sketch();
            };

            this.applyTexture = function () {
                cube.material.map.needsUpdate = true;
            }

        };


        var gui = new dat.GUI();
        gui.add(controls, "showTexture").onChange(controls.showCanvas);


        render();

        function createMesh(geom) {

            var canvasMap = new THREE.Texture(canvas);
            var mat = new THREE.MeshPhongMaterial();
            mat.map = canvasMap;
            var mesh = new THREE.Mesh(geom, mat);

            return mesh;
        }

        function render() {
            stats.update();

            cube.rotation.y += 0.01;
            cube.rotation.x += 0.01;

            cube.material.map.needsUpdate = true;
            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>

效果如下：