之前在绘制他车参与物一文用TextGeometry和FontLoader实现了 3d 文字，但其实能展示的内容比较有限，并且观察受视角影响，比较简单的解决方法是用 2d 的悬浮标签卡片（DOM 元素）来展示更多的信息，支持点击3d物体打开标签文本，并且能实时跟随物体

在智驾场景里，元素的坐标数据可能基于自车坐标系（自车不动）或者原点坐标系（自车动）。为了简单点，autopilot 先基于原点坐标系来 mock 道路和障碍物等，然后回基于 tween 来做行驶的动画演示，既然是原点坐标系，那意味着自车需要实时更新位置信息和偏转方向，所以就需要实现跟车相机，基于Three.Camera

有时候为了提高智驾 3d 场景的视觉体验，可能会提一些动画的需求，比如扩散光环、雷达波、避障警告和泊车指示等，这些其实涉及到threejs渲染循环、补间动画、场景亮度和相机等的配合。动画最基础的概念是关键帧，每个关键帧由三部分组成：时间、属性和值。本文主要分享了扩散光环和行人模型动画的实现

关于threejs的模型加载，可以用promise封装一下，然后提供abort方法中断模型加载避免重叠问题，其次是模型加载速度的一些优化，比如draco压缩、缓存策略等，然后还有提供相机视角的切换，然后可以做个车灯光源提高下视觉效果

智驾场景地图上最重要的元素是啥？当属线元素了，比如车道线、斑马线、规划线和预测线等。我们其实可以自定义Line几何体和shader材质来解决threejs内置Line的缺点，实现实线、虚线和渐变线等，需要用到BufferGeometry自定义几何体和shaderMaterial

除了自车和他车（其他车辆），还有一些规则的物体比如圆柱体、椎体等这些可以通过 threejs 内置的几何体来实现，但其实智驾场景里还有很多不规则物体，如果比较简单，比如多边形柱体这类就可以借助自定义几何体来实现，复杂点的就建议建模了。BufferGeometry 是 threejs 内置几何体的基类，通过此基类可以自定义几何体

除了自车，那智驾里最常见的参与物就是他车了，比如下面这种绿色长方体，然后上面可能会携带一些文字信息。怎么做一个长方体？其实很简单，直接用内置几何体 BoxGeometry + EdgesGeometry 来实现，注意为了方便观察，这里要把 Mesh 做成透明的

智能驾驶业务里常用 web 3d 来可视化地图和传感器数据、显示路径规划结果等方法协助算法调试和仿真，可以用 threejs 来做，毕竟在国内社区相对活跃，也比较容易上手

之前基于 threejs 和 cannon-es 实现了一个简单的空中飞车小游戏，本文基于之前的场景继续完善一下，通过增加一些附带物理特性的 3d 障碍物提高一下游戏的难度，实现空中飞车 2.0 -.-|| 先串讲下 3d 场景和物理世界的初始化

这里尝试基于 threejs 实现一个空中飞车小游戏，可以通过键盘方向键控制小车的行驶和转向，经过前方多段不规则的路后到达终点

最近刷到了抖音的漂移停车 2 的视频，感觉还蛮有趣的。乍一看，实现这个漂移停车的效果需要一些东西：一辆一直往前开的小车和一个停车点，这里就做成一个小车库吧；漂移停车逻辑。这个小游戏是通过往左往右触屏滑动来刹车，附带了转向；车库的碰撞处理；停车后的计分逻辑

承接上文，threejs世界里还有一些东西，比如Line、粒子系统、物体交互、补帧动画、自定义着色器等

Threejs的背后是 webGL，WebGL 基于 OpenGL ES 2.0 提供 3d 图形接口，是在浏览器环境下进行 3d/2d 图像渲染的技术。基于它我们可以用 js 做以下这些事

通过 docusaurus 快速搭建一个功能完备且支持自动化部署的文档网页，用于存放个人的一些零散的文档。而且对于博客定制化需求不高的人，这其实完全也可以用于搭建博客

什么是 WebGL？WebGL 基于 OpenGL ES 2.0 提供3d图形接口，是在浏览器环境下进行3d/2d图像渲染的技术，而threejs则是基于 webGL 的3d图形库，基于 threejs，我们可以用 js 做这些事: 创建 3d 几何图形;给对象应用材质和纹理;在 3d 场景中移动对象、实现动画;加载 3d 模型

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架，底层借助浏览器壳子支持了跨平台，然后可以借助 Node.js 操作进程逻辑和调用系统能力，最后再渲染网页内容

我在实际项目开发过程中，经常要自测，这个时候并不能完全指望服务端 mock 接口和数据，所以其实一段时间了，前前后后沉淀了有这么个 ts-koa 的应用，多用于用于调试接口和 mock 数据，当然，做个改装，也可以用于正式的服务端项目

以前其实做过类似的项目构建上的优化工作，但比较散乱，希望能做一个系统的整理，至少划分出几个基本的优化方向，以作为后续项目优化的参考

实际开发项目，经常会遇到文件相关的接口，比如文件上传和下载，这里针对前端总结一些文件接口调试的方法

最近把组内的一个比较大的微前端项目做了下重构

这阵子把组内最大的前端项目做了下 webpack 的升级，构建效率直接上升，主要得益于 webpack5 的缓存策略

突然想总结下目前为止我在 react 项目的开发实践上的一些经验和准则，然后随着后续的项目实践，看看能否进一步完善准则。兴许还能给别人提供点参考或导向

这个组件其实算是我参加正式工作以来真正意义上的第一个自研的组件，很早就开源到 github 了，虽然只收获了 3 个 star，但也还是蛮值得纪念的

其实之前在项目中经常用到 echarts 开发图表，突然就想着把之前的问题和经验总结下来

最近在做折线图(echarts)相关的需求，有遇到应用卡顿的情况，分析了卡顿原因后，发现在生成折线图的数据时耗时较大（从对象获取指定数据/数组过滤/排序/裁减），决定用 web worker 来做一些曲线绘制前的数据处理工作

最近有个项目蛮折磨人的，里面有个需求是将系统发出的消息转成语音信息，一开始简单查了一下，发现其实主流浏览器都有现成的语音合成 api

最近自己心血来潮，结合之前沉淀的项目模板(react/vue/koa2...)开发了一个项目脚手架等

一般公司内都会搭建自己的私有 npm 仓库，用于上传自研包、缓存第三方包、配置权限管理等

编码规范应该是一个团队有且必须遵循的，他能统一团队的编码风格，提高代码的可维护性。同时他也不是死板的一套规范，是需要随着代码迭代和 code review 不断演进的，适合团队的才是最好的。这些编码规范其实可以通过一些工具(eslint/stylelint/...)来自动约束

最近新建了一个项目，突然需要接入登录功能，同事直接让我去把之前项目的代码搬过来，不料这个过程有点坎坷，主要还是对前端登录的实现了解的不多。多少感觉有些不爽，于是就索性研究下前端登录

前端工程化其实是软件工程在前端方面的应用，是指将系统化的、规范化的、可度量的方法用于前端应用的开发、运行和维护的过程

前端操作二进制数据的场景还是比较多的，像 webGL 中浏览器和 GPU 的通信、用户上传下载文件、canvas 导出图片、FileReader 读取本地文件、图片/音视频处理等等

基于 canvas，我们可以通过 js 绘制 2D 图形，而同样使用 canvas 元素的 WebGL API 则可以用于绘制硬件加速的 2D 和 3D 图形。现在对 canvas 的应用很普遍，比如画板工具、图表绘制（echarts）、处理视频、图片/富文本编辑器、excel、游戏等

最近有新的项目需求，突然想整理下新建项目的这个过程，供以后借鉴，或者给他人提供一些思路

最近在使用 fabric.js 做 canvas 相关的开发，搜集了蛮多资料，但是有点分散，所以想整合一下，方便参考，下面也只是列举一些常用的 api，更详细的内容还是要参考官方文档

通过 gatsby 快速搭建一个好看且易于配置的博客网页

其实之前读书期间就折腾了好长时间在整服务器，主要就是做自己的博客网页，这篇文章算是把之前磕磕绊绊的经验稍微总结了一下吧，入个门应该还是可以的 ~

换 mac 后，第一件事总是迫不及待要搭建好开发环境

个人日常使用 mac 的一些工具

在 React 中，数据获取、设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。在 React 16.8 新增了 Hook，这些副作用都可以通过 useEffect 或者 useLayoutEffect 来调用。前阵子抽空学了下 useState 的源码和做了总结，今天也稍微总结了下 use(Layout)Effect

得闲翻下 react17 的源码和相关文章，学习一下 react 的 useState 的实现原理。整个过程蛮有趣的，首先得理解 fiber 架构，其次在 debugger 源码的时候得学习和理解一些必要的上下文，整体来说受益匪浅

在 react 中可以通过 setState 来更新状态，重新渲染该组件及其子组件。react 15 在一次事务更新中，会合并多次状态更新（批量更新），等到事务结束再统一更新状态；而 react 16 中已经没有了事务的概念，在 Fiber 架构下，setState 是如何实现的呢

在 react 16 之前，更新虚拟 DOM 为 stack reconciler，这是一个递归的过程，在树很深的时候，单次 diff 时间过长会造成 JS 线程持续被占用，用户交互响应迟滞，页面渲染会出现明显的卡顿。为了解决这种问题，react 团队使用 fiber 架构重构了 React，使其能够将任务分片，划分优先级，同时能够实现类似于操作系统中对线程的抢占式调度

上一次用 vue 在工作中开发项目是在大四的实习期间，不过那会儿还是清一色的 vue2，最近 vue3 也是正式上线不久，看了下文档发现改动蛮大的

vue2 主要是基于 Object.defineProperty 做的数据双向绑定，这里从 observer、watcher、dep 出发做一个简单的数据绑定实例

Vue2.x 不能检测以下数组的变动：1.直接修改数组长度；2.通过数组下标赋值。第一点主要是收到`defineProperty`的限制，第二点要究其原因，还是得从源码分析

本文主要是记录 Git 在实际开发中的常见用法和技巧

最近在用 typescript + react 开发项目，学习到了蛮多。其实 typescript 是 js 的超集，最终还是要编译为 js 代码。typescript 提供的静态类型系统，大大增强了代码的可读性以及可维护性，可以更好地支持大规模 JavaScript 应用的开发和维护

泛型对前端开发人员来说会比较陌生，其实它可以被理解成是一种预先设置的数据类型，在后面通过推导得出真实的类型后再替换。在 typescript 中有很多的工具泛型，可以帮助我们更加灵活地处理类型，简化类型编程的过程，提高生产力

对于面向对象的编程语言这一说法，准确来说应该是 **支持使用面向对象程序设计思想进行编程的编程语言**，而这一思想的本质其实是抽象。从这点出发，其实 JavaScript 就是一门面向对象的语言，但是其他面向对象的语言（比如 Java、C++）是基于 class 来实现的，而 JavaScript 是基于原型来实现

不论是 react 还是 vue 脚手架，都依赖 webpack 进行构建和打包。这一篇主要是我之前在入门 webpack 4 的时候记的一点小笔记，详细内容还得参见官方文档

Promise 是异步编程的一种解决方案。Promise 本质上是一个绑定了回调的对象，而不是将回调传进函数内部，从它可以获取异步操作的信息

js 在执行代码时可分为全局上下文、函数上下文、eval 上下文，代码执行过程：创建全局上下文（caller），自上而下执行全局上下文；遇到函数时，函数上下文（callee）被 push 到执行栈顶端；开始执行函数中的代码，caller 被挂起；函数执行完后，callee 被移除出执行栈，继续执行全局上下文

JavaScript 是一种单线程语言，主要是防止 dom 操作的不确定性。但是在同步执行任务的过程容易受到一些耗时任务的阻塞，比如网络请求、定时器和事件监听等，这样会影响到整体页面的加载；因此需要引入异步编程的能力

ECMAScript6 是 JavaScript 的标准，目前浏览器的 JavaScript 大多数都支持ES6。ES6使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

ECMAScript6 是 JavaScript 的标准，目前浏览器的 JavaScript 大多数都支持ES6。ES6使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

js 没有原生支持面向对象，但是可以通过原型来实现。从这个角度讲，其实js也算是一门面向对象的语言