两年前看到 Pepyaka 这个网页效果，被其丝滑酷炫漂亮到效果所惊艳，今天终于可以带大家用 Three.js Shader 一步步详复现这个效果，其实并不复杂，相信很多前端、程序员都会喜欢这样的效果

01 kenney 地址：https://www.kenney.nl/assets?q=3d 推荐：★★★★★ 简介：Kenney 国外游戏创意原型资源网站。矢量图形、UI资源、3D游戏资源、spri

突然翻到在之前公司写的抽奖软件（用于公司年会）。觉得挺感慨的，TM的一共30+人，抽15左右，代码还是我写的，就是抽不中我。（真的是，涨了人品，失了智）

用到的库： React three.js gsap dat.gui 主要介绍通过React脚手架快速搭建一个利用Three.js打造的3D世界，本文相对较为基础

最近看了《Three.js开发指南》，深刻地意识到光看不练跟没看差不多，所以就练习写了这个下雨小动画。

关于Three.js，网上有不多不少的零碎教程，有些过于初级，有些云里雾里，而Three.js官网上的示例逼格之高又令人望而却步，这些对于没学过计算机图形学的童鞋来说，就像入门迈槛不知先迈左脚还是右脚，兴趣使然，于是我就先双脚蹦了进去试试水...... 可以观察到成品效果：粒子…

先上效果： 不想看繁琐步骤的，可以直接去github下载项目，如果可以顺便来个star哈哈 本项目使用vue-cli创建，但不影响使用，主要绘制都已封装成类 1、使用geoJson绘制3d地图

随着当今时期前端地愈来愈普及，页面实现的效果真的是越来越棒！ 随着数字图像处理、人工智能技术的发展 ，展示给用户的视觉效果便不局限于平面的2D视觉效果。

事情是这样的，前段时间`外包工头`老杨又来找我了，说某汽车大品牌要开发一个网页展厅，希望可以在网页里360度展示它家新款汽车的3d模型，还要可以让用户DIY汽车部件的颜色。