本文主要是介绍2. 学习环境-编辑器和静态服务器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
vscode代码编辑器
Web3D开发的代码编辑器和平时web前端开发一样，你可以根据自己的喜好选择，本课程选择的代码编辑器是vscode (opens new window)。
如果不了解vscode，想安装和使用vscode，可以参考我以前发布的前端公开课HTML入门教程 (opens new window)，具体你可以参考视频 (opens new window)。
如果你用的是其他代码编辑器，建议转到vscode，当然不想转也行，毕竟都差不多。
本地静态服务器
平时学习Three.js，如果你想预览代码3D效果，咱们需要提供一个本地静态服务器的开发环境，如果你有一定的web前端基础，提到本地静态服务器肯定不陌生。
作为前端工程师，大家都知道，正式的web项目开发，往往会用webpack或vite或其它方式配置一个开发环境。
如果只是学习threejs的话，没必要这么麻烦，我最建议的方式就是，通过代码编辑器快速创建本地静态服务器，比如vsocde，安装live-server插件即可。
vscode配置live-server插件
不同代码编辑器创建本地静态服务器方式不同，课程就以vscocde为了大家演示。
- 安装
vscode软件界面左侧，点击扩展，输入live-server关键词查询安装。
- 使用
如果你想预览代码3D效果，打开对应.html文件，右键点击Open with Live Server即可。
预览3D案例和文档
- 预览课程案例源码
打开课件案例，注意把Three.js视频教程源码文件作为根目录，使用vscode创建本地静态服务就可以预览。
- 预览官方examples中案例
- 本地预览文档
把threejs整个官方文件包作为根目录，用本地静服务打开任何一个.html文件即可预览
three.js-文件包
...
└───docs——Three.js API文档文件│───index.html——打开该文件，本地离线方式预览threejs文档
└───examples——大量的3D案例，是你平时开发参考学习的最佳资源│───.html——各种3D案例
...
扩展：nodejs配置本地静态服务器
如果不用代码编辑器创建本地静服务器，也可以用nodejs配置。
首先确保你电脑已经安装nodejs，然后npm安装live-server插件，安装后，进入课件或threejs官方文件根目录，输入live-server命令即可预览3D案例。
// 安装live-server
npm install live-server -g
不过平时为了开发方便，可以不用nodejs创建一个本地静态服务器，可以借助你的代码编辑器更方便，比如下面要说到的vscode。
这篇关于2. 学习环境-编辑器和静态服务器的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
