threejs开发切片全景图探索01

好久没有写文章了，最近一直忙着学习AI相关的知识，差点忘记自己本职是三维开发了。

残酷残酷，今天做一下记录。

不知道大家有没有注意到，全景图在应用的时候，发现官方的实例，完全不够用了。

官方示例：three.js examples

主要原因：官方提供的是一张图片，加载全景图，但是实际应用中，图片比较大，基本都是一张照片20M左右，有的甚至更大，如果在内网加载图片，还好点，会快点。如果通过网络，简直没法看。

存在问题很明显：

        1）图片太大，导致互联网下载比较慢，用户体验感极差。

        2）一张大图直接给球体贴图，不管性能和展示都不好，有的电脑配置比较低的情况，电脑嗡嗡响。

主要目标：

1）提高加载速度 ，瞬间或者秒级【5秒之内】

2）提高性能，不损失用户体验的情况下，可以更好的保证性能，并且能够有效的利用资源。

3）图片不容易被扒，不做任何处理，别人直接可以拿到原始的全景图片。当然做了处理，挡不住盗图者。

重点地方多点费话：客户不满意，体验不好，性能不好

解决思路：

        解决的方法有很多种，精心思考一下，如果针对问题解决。

第一步：图片过大，那咱们就让他变小

1)压缩【无损压缩，这种方法 根据具体情况而定，最好处理后和客户确认】

2）分割处理，将一张图横向和纵向，切割图片，得到一堆拼接图片，如4*4、4*8 甚至更多

第二步：性能问题，我们可以采用加载切割后的小图

1）一种是一个mesh 多个材质处理

2）一种是多个mesh 多个材质处理

3）一种是多个mesh 合并处理

第三步：进一步优化

通过上面的步骤，也许做到了很好的优化

就差最后一步了，做当前视椎体下加载。

暂时写到这里，后面进一步详细说明。

如果图片进行处理。

three.js examples