【1】Three.js入门心得记-开发环境及准备工作

前言

学习Three.js，这事儿咱们得聊聊，就像你突然想在家自己做顿大餐，而不是天天吃外卖一样。Three.js，这家伙就像是你的3D烹饪秘籍，让你在数字世界里也能大展厨艺，做出让人眼前一亮的美味佳肴------哦不，是炫酷3D场景！

首先，你得明白，现在这年头，视觉盛宴可是王道。网页上光有文字图片哪够啊，人家一看，"唉，这也太清汤寡水了吧。" 但你要是用Three.js整出个3D旋转地球仪，或者让个小机器人在页面上活蹦乱跳，保证访客眼睛一亮，心里头直呼："哇塞，这网页有点东西！" 这就好比你的个人名片，瞬间从黑白变成了彩色立体，档次上去了，关注度自然也就蹭蹭往上涨。

再者，Three.js就像是给你配了个数字世界的"变形金刚"。你想让场景里的物体变形就变形，想让它飞上天就飞上天，自由度爆表！而且啊，它还特别接地气，不像那些高深莫测的编程术语，Three.js的社区教程多得是，就像是你身边一群热心的厨艺大师，手把手教你怎么把简单的食材变成满汉全席。

最重要的是，学会了Three.js，你就掌握了打开新世界大门的钥匙。不管是游戏开发、虚拟现实、还是网页动画，Three.js都能让你大展身手。这就像是你突然学会了变魔术，原本平淡无奇的网络空间，被你轻轻一挥，就变成了充满无限可能的奇幻世界。

所以啊，学习Three.js，别看它名字听起来挺高大上，其实就像学做一道新菜那么简单，一旦上手，你会发现，这不仅仅是为了装酷，更是让你的创意在网络世界里自由飞翔的翅膀。别犹豫了，赶紧拿起你的"鼠标铲"，开始你的3D烹饪之旅吧！学习Three.js，这事儿咱们得聊聊，就像你突然想在家自己做顿大餐，而不是天天吃外卖一样。Three.js，这家伙就像是你的3D烹饪秘籍，让你在数字世界里也能大展厨艺，做出让人眼前一亮的美味佳肴------哦不，是炫酷3D场景！

入门心得记

工欲善其事，必先利其器

学习Web3D可视化，就像你想耕地，拖拉机就是比二哈更专业的开发学习工具。

代码编辑器

Web3D开发的代码编辑器和平时web前端开发一样，你可以根据自己的喜好选择，

当然

如果你用的是其他代码编辑器，建议转到vscode，当然不想转也行，毕竟都差不多。

本地静态服务器

平时学习Three.js，如果你想预览代码3D效果 ，咱们需要提供一个本地静态服务器 的开发环境，如果你有一定的web前端基础，提到本地静态服务器肯定不陌生。

作为前端工程师，大家都知道，正式的web项目开发，往往会用webpack或vite或其它方式配置一个开发环境。

如果只是学习threejs的话，没必要这么麻烦，我最建议的方式就是，通过代码编辑器 快速创建本地静态服务器，vscode，安装live-server插件即可

开发和学习环境，引入threejs

1. 开发环境：项目开发引入threejs，比如vue或react脚手架引入threejs。
2. 学习环境：入门threejs阶段，.html文件中直接引入threejs 这里使用最简单的引入方式，便于学习

script标签方式引入three.js

你可以像平时开发web前端项目一样，通过script标签把three.js当做一个js库引入你的项目。

three.js库可以在threejs官方文件包下面的build目录获取到。

• threejs官方文件包所有版本：github.com/mrdoob/thre...

• 如果你上面github打开慢，可以百度网盘 下载threejs文件包： pan.baidu.com/s/1rNdrMnrI... 提取码: qck8

<script src="./build/three.js"></script>

//随便输入一个API，测试下是否已经正常引入three.js
console.log(THREE.Scene); 

版本问题如何对待

three.js官网 (opens new window)可以下载three.js文件包，不过默认是最新版本的，three.js官网的文档一般也是当前最新版本。

因为threejs每月更新的时候，API会有变化，我的建议是，实际开发的时候，three.js API的使用规则，一切以你项目threejs版本 对应的文档 为准，下节课会具体给大家说怎么在本地预览任何你想要的版本文档。

Threejs官网中文文档链接：threejs.org/docs/index....

threejs文件资源目录介绍

下载three.js文件包解压后，你可以看到如下目录(不同版本会略有差异)。

对于开发者而言，大家经常接触的是文档docs 和案例examples 两个文件夹，平时查看文档，可以打开文档docs 里面html文件，案例examples里面提供了海量threejs功能案例。

three.js-文件包
└───build------three.js相关库，可以引入你的.html文件中。
    │
└───docs------Three.js API文档文件
    │───index.html------打开该文件，本地离线方式预览threejs文档
└───examples------大量的3D案例，是你平时开发参考学习的最佳资源
    │───jsm------threejs各种功能扩展库
└───src------Three.js引擎的源码，有兴趣可以阅读。
    │
└───editor------Three.js的可视化编辑器，可以编辑3D场景
    │───index.html------打开应用程序  

这里我使用的是serve跑服务，比较易用

结果ok:

下一章，开始案例实战