My first three.js app

> 原文地址： https://dev.to/mrryanfloyd/create-an-interactive-3d-portfolio-website-that-stands-out-to-employers-47gc > > 作者github：https://github.com/0xFloyd > > 作者twitter：https://twitter.com/mrryanfloyd # 引言个人网站是程序员的第二张简历。如果你有酷炫的个人网页，面试官对你的好感度会蹭蹭蹭往上涨。在疫情隔离期间，我用`Three.js`和`Ammo.js`制作了一个可交互的3D个人网页。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94a9e857777f4900a4befe2b9c1f1c67~tplv-k3u1fbpfcp-zoom-1.image) > 在线预览地址： https://www.ryan-floyd.com/ # Three.js的3D世界当我在[Google Experiments](https://experiments.withgoogle.com/)闲逛时，我发现非常多的作品都是用`three.js`写的。 `three.js`是一个让3D网页应用开发变得简单的库。它诞生于2010年，作者是[Ricardo Cabello (Mr.doob),](https://github.com/mrdoob/three.js/)，在github上有超过1300多的贡献者，在所有仓库中star数排行第38。当看到`Google Experiments`上那些酷炫的3D效果后，我决定开始学习`three.js`。 # Three.js的工作机制 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f2b51e091bd46258a292ca445d9d73d~tplv-k3u1fbpfcp-zoom-1.image) (3D应用的组件结构，图片来自[discoverthreejs.com](https://discoverthreejs.com/book/first-steps/first-scene/)) `Three.js`使得在浏览器展示3D图像变得容易，它的底层是基于`WebGL`，它使浏览器能借助系统显卡在canvas中绘制3D画面。 `WebGL`自身只能绘制点（points）、线（lines）和三角形（triangles），而`Three.js`对`WebGL`进行了封装，使我们能够非常方便地创建物体（objects）, 纹理（textures）, 进行 3D 计算等操作。使用`Three.js`，我们将所有物体（objects）添加到场景（scene）中，然后将需要渲染的数据传递给渲染器（renderer），渲染器负责将场景在 `