周记 2019/8/16: Threejs 和 parallax scrolling

[wangpin34]

为什么开始同时接触这两个八杆子打不着的东西?

原因是我目前负责的一个 web app 需要添加点高级的玩意，让原本偏呆板的页面变得更加灵动一点。我觉得 parallax scrolling 还可以接受，代价不高，尽管我认为在用户 profile 页面提供这样的视觉体验并不合适。而 引入 webgl 所带来的复杂度就高多了，还要考虑兼顾多平台的响应式页面。这并不是我的强项，所以短期内要有建树还是挺难的。

Threejs

虽然 Threejs 是一个 js 框架，但这没有让我觉得它很容易。因为从本质上来说，Threejs 是使用 js 封装的 opengl，核心是 opengl 而非 js。这和一般的 js 框架如 reactjs 根植于 web 基础是完全不一样的。你会在 reactjs 这样的框架中接触到很多新的概念如 jsx，form，但无论是外貌还是内在，它们都和web前端固有的知识体系密不可分，某种程度上完全可以看作是后者的另一种表现形式。这就像方便面和普通面条，本质上都是面食，熟悉方便面的人不太可能会对烹饪普通面条的办法有任何理解上的障碍。

相反的是，Threejs 所介绍的新概念，material，texture，camera，等等，它们都来源于 opengl 而和web 世界没有什么关系。如果没有掌握这些概念，那就会和我一样，文档上讲的理所当然，我却只能一脸懵逼。因此，挣扎一番后，我放弃了阅读文档学习 API，转而去理解一些基础概念。

所以，先记录下此刻我对几个核心概念的理解吧。

• Vector
  以二维向量 Vector2 为例，x，y 坐标代表向量终点位置，起点位置是 0， 0。向量是 Threejs 中非常重要的概念，应用的场合很多，比如移动一个几何体的位置（x，y，z），就需要构造一个向量存储位移量，然后使用矩阵乘法应用这个位移量。

• Geometry（几何体），obj 文件
  几何体和 obj 本质上是一样的东西，都可以用来在渲染出 3d 物体。threejs 提供了常用的几何体如 Box，很多时候利用这些几何体就能满足需要了。如果想要定制几何体，可以使用如 Blender 这样的 3d 建模工具定制复杂的几何体，然后导出为 obj 文件加载到 threejs 中渲染。

• Material （材料）
  几何体只有顶点信息所形成的面信息，比如 Box 就只有 6 个面而已。如果进一步设定几何体的外观，如镜面特质，就需要利用 Material。Material 有很多属性，常见的如颜色，map 等。

• Texture （纹理）
  纹理是材料的表面内容。纹理和材料的区别是，材料规定物理特性，如对光照的反射情况，纹理则只针对外观的内容。

parallax scrolling

parallax（视差） 从技术层面上讲并不深奥。

1. 通过设置 background-attachment：fixed 固定背景图片使其与内容分离，从而在滚动页面时形成视觉上的速度差异。
2. 设置 3d 物体的 z 轴 （相对于屏幕垂直）坐标，使其相对远离其他内容，从而在滚动页面时形成视觉上的速度差异。

parallax 的难点并不在于技术，虽然我承认 2 所涉及的三角函数让我不禁感叹「都还给老师了」。相对于上面的 Threejs，并不需要挖空心思理解那些新概念。

真正的难点在于设计层面，如何让 parallax 看起来确实提升了用户体验而不是浮夸的炫技？说实话我自己也阅览了很多应用 parallax 的站点，好坏参半。好的且不说，那些坏的，并非是因为动画生涩，素材不佳，而是，我看了半天，也不知道它说了什么。这也是很多资深设计师傅所说的，parallax 其实是讲故事的好工具。用得不好，故事讲的不明白，那不如老老实实的用传统的办法。