Three.js（7）：局部纹理刷新

0 版本

 

vuecli：4.5.7

three.js：0.131.0

---

1 说明

• 局部纹理刷新主要是为了解决：图片较大导致加载纹理时候造成卡顿使得用户体验不友好，可是又想要加载高清的大图片提高清晰度。
• 此时就需要用到局部纹理刷新，先整体加载一个小尺寸图片，在局部需要高清显示的部位加载高质量的图片。

直接上前后效果图：

原始纹理：

局部刷新后的纹理：

---

2 实现步骤

2.1 ps中进行全图切片

使用ps的切片工具将高清图片进行切片（ps具体切片方法自行百度）：

 2.2 three.js中使用renderer.copyTextureToTexture方法实现局部刷新

copyTextureToTexture ( position : Vector2, srcTexture : Texture, dstTexture : Texture, level : Number )

position — 当前更新纹理的起点位置，注意，这个位置是基于纹理的左下角开始的。
srcTexture —更新的块图，必须是一个Texture对象。
dstTexture — 将需要更新的纹理，前一个纹理将会从设置的起点开始绘制自身的高度和宽度的一块区域。
level — 指定纹理的细致程度。级别0是基本图像级别，级别n是第n个mipmap缩减级别。默认值为0，不写也可以 。

2.3 构建切片图片在纹理中相应位置的对应关系

// dom - canvas -局部更新规则
        HjqScene.prototype.tileNumber2Position = (number, img) => {
            const intNum = parseInt(number, 10);
            const row = img.hCount - parseInt(intNum / img.wCount) - 1;
            const column = intNum % img.wCount - 1;
            return new THREE.Vector2(img.width * column, img.height * row);
        }

 2.4 选择需要更新的切片，进行局部纹理刷新

const img = {
                    tWidth: 15740,
                    tHeight: 10234,
                    width: 1124,
                    height: 1023,
                    wCount: 14,
                    hCount: 10,
                    tiles: ["06", "07", "08",
                        "18", "19", "20", "21", "22", "23", "24",
                        "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41",
                        "44", "45", "46", "47", "51", "52", "53", "54",
                        "58", "59", "72", "73"
                    ]
                }
                mTextureLoader.load(this_.mCfg.dom1, function (t) {
                    const canvas = document.createElement("canvas");
                    const ctx = canvas.getContext("2d");
                    canvas.width = img.tWidth;
                    canvas.height = img.tHeight;
                    ctx.drawImage(t.image, 0, 0, img.tWidth, img.tHeight);
                    // const texture = new THREE.CanvasTexture(canvas);
                    const material = new THREE.MeshBasicMaterial({
                        map: new THREE.CanvasTexture(canvas)
                    });
                    const materialArr = [mYellowMaterial, mYellowMaterial, mYellowMaterial, mYellowMaterial, mYellowMaterial, material];
                    const boxMesh = new THREE.Mesh(boxGeometry, materialArr);
                    group.add(boxMesh);
                    this_.mScene.add(group);
                    // console.info(render);
                    img.tiles.forEach(e => {
                        mTextureLoader.load(`hjq/feature/dom/v2/dom_tile/dom_${e}.jpg`, function (texture) {
                            render.copyTextureToTexture(this_.tileNumber2Position(e, img), texture, material.map);
                        });
                    });
                });

---

3 实现效果