使用 webgl 和 threejs 分别完成带阴影和纹理的旋转砖块的开发。
编程类型： JavaScript
技能点：webgl，threejs，渲染原理
题目描述：
根据课程所学知识，分别使用 webgl 和 threejs 完成带阴影和纹理的旋转砖块的渲染开发工作。需要同学们掌握课程所教的 webgl 的使用及 threejs 的 api 才能完成该任务，在完成任务的过程中，希望同学们回答三个问题：1. opengl 是如何在硬件上进行工作的；opengl 和 webgl 的关系是什么；webgl 和 threejs 的关系是什么；
效果图:
暂无，预计之后会录制一段一分钟的短视频展示
任务要求：
1、基于课程的内容使用 webgl 实现带阴影和纹理的旋转砖块的渲染开发工作。
2、基于课程的内容使用 threejs 实现带阴影和纹理的旋转砖块的渲染开发工作。
3、针对需要思考的三个问题，可以通过查资料等方式，产出问答的 markdown 文档交付。
辅助资料：
https://git.imooc.com/coding-282/complete-version 中对应的源码中有相应的纹理素材可以使用
任务提示/思路分析：
任务提示：
- webgl 部分需要循序渐进，逐渐把需要的功能添加进去，纹理映射的时候需要理解注意纹理映射的原因，这块对于原理理解不透彻就没法分析预期之外的纹理结果是如何产生的了。了解纹理映射的模式之后，可以自行尝试使用一些其他的纹理图片，并使得纹理映射产生你自己预期的效果。
- threejs 部分，在光照部分开发时，注意使用合适的光源去产生阴影，光源的方向着重进行验证，接受阴影的目标对象的材质配置，需要能反应出阴影的特性。
- 总体功能上，大家可以理解为分为：在场景中渲染出基础的立方体，为场景设置合理的相机位置，为立方体增加纹理，为场景增加光照和阴影的逻辑，几步，具体实现的时候完成一步再做下一步，这样有利于进行 debug 发现问题。
- 上述三个问题分别的从不同的方面去理解咱们课程的底层基础，opengl 如何在硬件上工作的可以帮助大家理解，计算机硬件是如何和上层应用层约定 api 协议，并在硬件系统层面整体推动运行的，可以帮助理解计算机的软硬件交互，加深对为什么有 opengl 以及 opengl 生效过程的理解，一开始理解起来会比较困难，需要花时间；opengl 和 webgl 的关系问题，是让大家去理解 webgl 在浏览器上运行的时候是如何调用运行并最终生效由浏览器渲染出结果的；webgl 和 threejs 之间的关系，是让大家去理解底层 api 和上层封装在应用层的不同，理解框架对业务封装和抽象的意义。
参考答案：
暂无，预计之后提供针对该任务题独立的代码和图文答案。