学习环境—代码编辑器和本地静态服务器

视频讲解 (opens new window)

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

1. vscode代码编辑器
2. 本地静态服务器——预览文档、课程案例源码

工欲善其事，必先利其器

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

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。