百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

WebGL No. 4 - 照相机和交互控制

进阶

人数66人在学习该课程,有53人已经完成该课程

时间平均用时1.3

关键词WebGLthree.js

课程概述

作业提交截止时间:04-24

任务目的

在这一题中,你将了解如何为场景设置合适的照相机位置,并且配合鼠标实现交互控制照相机位置。

任务描述

  • 学习《Three.js 入门指南》第 2 章照相机;
  • 为场景添加合适的照相机位置;
  • 实现交互控制照相机位置;
    • 场景可以使用前两题的,也可以随意添加一些物体;
    • 使用 TrackballControls 实现 Three.js 例子 的效果;
      • 左键旋转、中键缩放、右键平移;
      • Three.js 提供了一类辅助类的代码,比如用于交互控制的 TrackballControls ,这些代码不包括在 three.js 文件中,需要使用的话要额外引入,在这题中,可以使用这个文件快速实现效果;
      • 可以参考其实现代码,但是要理解每行代码做了什么事;
    • 有能力的同学可以看一下 TrackballControls 的源码做了那些事;

如果觉得看不懂也没关系,这的确需要比较深入的图形学知识,这里我们不想展开叙述,让我们的课程显得太过枯燥。其实,理解照相机的最直观的类比就是在真实的世界中我们是如何用照相机拍照的:首先,我们会摆放好照相机的位置(即 camera.position.set(...);其次,在这个位置瞄准我们要拍摄的物体(即 camera.lookAt(...));最后,确认照相机放水平了(即设定向上矩阵 camera.up.set(...))。对照相机的操作都可以归结到这三种操作中,而实际代码之所以看起来难以理解,是因为有时候直接使用了向量、矩阵操作,不要被它们吓到了!

TrackballControls 这个名字来源于轨迹球的隐喻,这是一种类似老式鼠标的机械装置,通过球体的旋转控制场景的旋转。我们可以想象,用鼠标拖曳屏幕的操作,等同于滚动这个轨迹球。因此,这就是通过二维屏幕的一个向量,映射到三维空间球体旋转向量的过程。具体的映射算法有很多变种,这里 有更详细的说明,感兴趣的同学可以作为扩展阅读。

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~