使用小游戏中的 sharedCanvas 开发排行榜

编程类型： JavaScript

技能点：threejs，canvas

题目描述：

根据课程所学知识，使用小游戏中的 sharedCanvas 能力完成开发排行榜。在任务的过程中，同学们需要首先理解微信小游戏数据链中开发数据域和主域的概念从而才能理解 sharedCanvas 为什么存在。完成 sharedCanvas 数据传递之后还需要将 canvas 作为 threejs 中 object 的纹理才能在 threejs 工程中显示出canvas图像的内容，这部分可以参考样例代码简单实现，深入理解的话，可自行学习一下 webgl 纹理映射的过程及 threejs 中相应的 api。

效果图:

暂无，预计之后会录制一段一分钟的短视频展示

任务要求：

1、了解微信小游戏数据链 API，并基于微信小游戏数据链完成开发数据域和主域之间的数据通信；

2、将开发数据域中的数据通过 sharedCanvas 的形式传递到主域中；

3、参考样例代码，完成 sharedCanvas 内容在 threejs Object 上的绘制，最终再 threejs 场景中渲染出来；

4、理解 webgl 中纹理映射的原理以及 threejs 中对于 API 的封装，并总结成 markdown 的文档。（可选）

辅助资料：

https://git.imooc.com/coding-282/complete-version 中对应的源码

任务提示/思路分析：

任务提示：

1. 优先学习微信小游戏数据链 API，理解开发数据域和主域存在的意义及通信方式；
2. 了解 canvas 的基本 api，sharedCanvas 也需要使用 canvas 的基本 api 才能完成绘制；
3. 建议全面理解一下纹理映射的原理，这样以后涉及到 threejs 纹理的部分才能选择合适的 API，纹理映射核心是坐标的映射关系，通过纹理参数我们也能设置纹理映射的方式如 gl.REPEAT 是平铺式的重复纹理，gl.LINEAR 使用距离新像素中心最近的四个像素的颜色值得加权值平均，gl.NEAREST_MIPMAP_LINEAR 使用原纹理上的距离映射后像素中心最近的那个像素的颜色值作为新像素的值等。