程序员必备小知识：近期学习了 WebGL 和 Three.js 的一些基础知识，本文内容主要介绍，通过使用React + three.js技术栈，加载3D模型、添加3D文字、增加动画、点击交互等。

最近因为鸿星尔克给河南捐了5000万物资，真的是看哭了很多的网友，于是我想到了给鸿星尔克做了一个线上的看鞋展厅，鸿星尔克 TO BE No.1！

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

这是我参与更文挑战的第10天，活动详情查看： 更文挑战 序 在web的前端发展过程中，对于视觉化的要求已经越来越高 有关于VR全景的效果也同样可以在网页中实现了，不用戴上VR设备，你也可以在网页上体会

本次分享的特效案例，基于官方项目r129版本，实现的超酷炫Threejs 3D地球，喜欢的可以点个赞

之前做组内分享，选了threejs来学习一下，接下来就把用threejs实现的全景图来解读一下。 1. three.js基础回顾 1. 是什么？ Three.js 是一款 webGL 框架，它封装了底层的图形接口，使得能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现…

模型： 模型可以自己通过three.js构建，也可以采用3D建模软件建立好的模型进行导入，本文采用的是.Obj格式的模型文件导入。

第一次尝试选择了我比较熟悉的 PixiJS，关于我如何用 PixiJS 中的 Sprite3d 做了一个失败的 3D 卡片，可以 戳这里查看。 有了第一次失败的经历，果断老实选择使用 three.js 来实现 3d 效果。 但为什么选择使用 CSS3DRenderer 实现，可…

说明: 公司需要做此项目，之前都没接触过，所以个人集合了所有能找到的资料做出了一个demo项目出来，希望对需要的各位有帮助。 （2）所有的变量最好不要在data里面定义，因为模型大一点的话会卡顿等。目前我是在外部定义的。 模型需要放在根目录下，不然会读取不到。 2.使用thre…