前言

由于公司的项目需要增加用户体验，而且图片尺寸比较大，动不动就会大于2k，4k，甚至更高。如果直接加载这样尺寸的图片，会需要很长时间，对于用户体验十分的不友好。
所以，需要首先加载一张小图，然后将整张大图分块进行加载，这样可以使用户第一时间查看的到图片，并且在一定的时间内，也将分块图片加载进来，更新纹理，提高清晰度。
最初我是通过canvas画布实现，创建一块完整图片大小的画布，首先将小图加载进去，然后让材质更新，显示出来当前的图片，然后每一块小块图加载完成，绘制到画布上面，设置material.map.needsUpdate为true来更新GPU的纹理。制作完成后，发现通过这种方式实现后，性能会有卡顿，每更新一次整张图片务必会影响性能。
最后，发现了Three.js的纹理局部更新的方法renderer.copyTextureToTexture可以实现，只更新局部数据，提高性能。接下来我们看一下这个方法如何使用。

方法使用

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

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

实际案例

有了这个方法以后，我就知道能够实现当前的局部更新功能。

首先是准备工作，我们需要的东西是整图的宽高和每一张的图片的大小和它在整张图上面所处于的位置。

然后，我们通过整张的尺寸创建一个纹理，并赋值给一个材质：

        material = new THREE.MeshBasicMaterial({map:new THREE.Texture()}); //创建材质let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");canvas.width = sceneBlockModel.sceneWidth;canvas.height = sceneBlockModel.sceneHeight;ctx.drawImage(img, 0, 0, sceneBlockModel.sceneWidth, sceneBlockModel.sceneHeight);material.map.image = canvas;material.map.minFilter = THREE.LinearFilter;material.map.generateMipmaps = false;material.map.needsUpdate = true;

这些工作在img图片加载完成后才可以制作。

然后就是把所有的分块图片加载到浏览器内，在加载完成时，触发回调，在相应的位置调用copyTextureToTexture更新纹理即可：

 //加载分块图片let xLen = Math.ceil(sceneBlockModel.sceneWidth / sceneBlockModel.fileBlockWidth);let yLen = Math.ceil(sceneBlockModel.sceneHeight / sceneBlockModel.fileBlockHeight);//延迟三秒开始加载分块图片setTimeout(function () {for (let x = 0; x < xLen; x++) {for (let y = 0; y < yLen; y++) {let img = new Image();img.src = sceneBlockModel.dir + x + "_" + y + ".jpg";img.onload = function () {let texture = new THREE.Texture(img);//获取渲染的起始位置let position = new THREE.Vector2();position.x = y * sceneBlockModel.fileBlockWidth;if (x === yLen - 1) {position.y = 0;}else {position.y = (yLen - 2 - x) * sceneBlockModel.fileBlockHeight + (sceneBlockModel.sceneHeight % sceneBlockModel.fileBlockHeight);}renderer.copyTextureToTexture(position, texture, material.map);}}}}, 3000);

案例里面我是设置延迟加载分块图片，由于图片是按照一定规则切块的，所以，我直接两个循环，通过计算位置，来实现的等位置渲染。

案例查看地址

https://www.wjceo.com/blog/threejs2/2018-11-02/179.html

103 THREE.JS 实现局部纹理刷新相关推荐

Three.js（7）：局部纹理刷新
0 版本 vuecli:4.5.7 three.js:0.131.0 1 说明局部纹理刷新主要是为了解决:图片较大导致加载纹理时候造成卡顿使得用户体验不友好,可是又想要加载高清的大图片提高清晰度. ...
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中的纹理纹理 ...

103 THREE.JS 实现局部纹理刷新

前言

方法使用

实际案例

案例查看地址

103 THREE.JS 实现局部纹理刷新相关推荐

最新文章

热门文章