2. 学习环境

视频讲解 (opens new window)

工欲善其事，必先利其器，写threejs代码之前，需要先准备一个用于threejs学习的开发环境。

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

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插件即可。

不同代码编辑器创建本地静态服务器方式不同，课程就以vscocde为了大家演示。

vscode软件界面左侧，点击扩展，输入live-server关键词查询安装。

如果你想预览代码3D效果，打开对应.html文件，右键点击Open with Live Server即可。

打开课件案例，注意把Three.js视频教程源码文件作为根目录，使用vscode创建本地静态服务就可以预览。

把threejs整个官方文件包作为根目录，用本地静服务打开任何一个.html文件即可预览

如果不用代码编辑器创建本地静服务器，也可以用nodejs配置。

首先确保你电脑已经安装nodejs，然后npm安装live-server插件，安装后，进入课件或threejs官方文件根目录，输入live-server命令即可预览3D案例。

不过平时为了开发方便，可以不用nodejs创建一个本地静态服务器，可以借助你的代码编辑器更方便，比如下面要说到的vscode。