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 实现效果

Three.js（7）：局部纹理刷新相关推荐

103 THREE.JS 实现局部纹理刷新
前言由于公司的项目需要增加用户体验,而且图片尺寸比较大,动不动就会大于2k,4k,甚至更高.如果直接加载这样尺寸的图片,会需要很长时间,对于用户体验十分的不友好. 所以,需要首先加载一张小图,然后将 ...
form表单刷新_《大胖 ? 小课》- 不用 js 实现文件无刷新上传
这是<大胖小课>栏目的专题一<说说文件上传那些事儿>的第3节-<不用 js 实现文件无刷新上传> 专题已经更新章节: <大胖 • 小课>- 我是这样理解 ...
java局部刷新session过期_Ajax局部页面刷新和History API结合的陷阱
ajax在现代网站已经得到非常普遍地应用,主要的好处大家都知道(异步加载数据,不用刷新整个浏览器,更小的数据传输尺寸).对于那些老网站或者老项目来说全盘改造成ajax并不现实,于是就有了"局 ...
解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题参考文章: (1)解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题 (2)https://www.cnblogs.co ...
js app缓存自动刷新_如何通过清除缓存来刷新App Store中的内容
js app缓存自动刷新 Are you finding that you're not seeing new apps on the App Store, or that updates to ap ...
Flutter StatefulBuilder 用来实现局部数据刷新
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
js php 实时更新数字,js实现股票实时刷新数据案例
近来学习炒股,免不了上班时间看盘,总不能光明正大的用电脑看行情,一直盯着手机影响也不好,容易引起"关注". 所以就想自己做一个网页来达到看盘的目的,一个只显示几个关键数字的网页肯定 ...
原生JS实现下拉刷新（移动端）
原生JS实现下拉刷新(移动端) 主要利用touchstart.touchmove.touchend事件结合CSS定位 <!DOCTYPE html> <html lang=&quo ...
WebGL three.js学习笔记纹理贴图模拟太阳系运转
纹理贴图的应用以及实现一个太阳系的自转公转点击查看demo演示 demo地址:https://nsytsqdtn.github.io/demo/solar/solar three.js中的纹理纹理 ...

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

0 版本

1 说明

2 实现步骤

2.1 ps中进行全图切片

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

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

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

3 实现效果

Three.js（7）：局部纹理刷新相关推荐

最新文章

热门文章