通过将黑白线稿图片绘制到canvas画布上，以获取像素颜色值过滤出黑色部分坐标位置，并用于设置Three.js Shader粒子系统，再结合RGB数值不断减小做出颜色深浅变化的效果。

黎明之前，总有一段时间特别黑，悄悄努力你就会惊艳所有人。你不一定要逆风翻盘，但请一定向阳而生；你知道吗？梦想，就是梦里想做的事，醒来后，努力去实现；所谓的万丈深渊，走下去，也是前程万里。

面对网页性能要求越来越高的今天，项目性能优化已经成了项目开发中必不可少的一个环节。尤其是现在越来越火🔥的在线教育、在线编辑、直播、游戏等类型的项目中Canvas和WebGL的运用越来越多。

本文是 100+前端几何学应用案例 专栏的第二篇文章, 今天分享一下从零搭建一款可视化几何画板, 采用大家最熟悉的vue3和typescript来实现