之前本准备回国实习，需要学习一些关于前端的东西，就自己琢磨学习了一段时候，但由于疫情没法回国了，就心想都学了一点就做一个自己的网页吧，然后开始深入学习了，从HTML开始，到CSS，到JavaScript然后到js的库Three.js，P5.js，paper.js……其实html和css掌握了基本的语法后，运用逻辑并不是很难，JavaScript的交互运用需要去梳理一下逻辑，而后延伸到Three.js，因为是把WebGl包装的一个库，有三维图形的运用的基础知识也能很快理解，分为相机，场景，物体三部分，在分别定义三部分，最后在three.js中加入了shader，用glsl写了场景中灯光cube的材质。
WEB首页效果主页的制作分为三个部分，先是写了基础的road部分，然后是摄像机部分，最后再是上面车流的灯光的部分，road是用的是PlaneBufferGeometry，然后用ShaderMaterial写了材质属性，然后定位了摄像机，然后车流灯光的部分，基础用TubeBufferGeometry的curve来写，定义成LineCuver，再复制给InstanceBufferGeometry定义为两组，给它定义不同的长度、宽度、角度和位置，再给左右两边添加颜色和亮度。然后再添加uTime和uSpeed让light能运动起来，然后再通过shader的顶点着色器来使其循环。同时加入了鼠标控制的加速，通过lerp线性插值来形成加速，并且将加速情况和普通情况在帧速率上作区分，最后再是模块化shader，添加到着色器和材质，最后运用到JavaScript的交互。
附上可以参考的链接：