Three.js编辑器editor使用详解

官网下载Three.js压缩包

github官网源码包

解压后文件目录如下图：

其他的文件内容如下：

Build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。

Docs目录：这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。

Editor目录：类似3D-max的简单编辑程序，能创建一些三维物体。

Examples目录：一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。

Src目录：源代码目录，里面是所有源代码。

Test目录：一些测试代码，基本没用。

tils目录：存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。

gitignore文件：git工具的过滤规则文件，没有用。

ONTRIBUTING.md文件：一个怎么报bug，怎么获得帮助的说明文档。

ICENSE文件：版权信息。

EADME.md文件：介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。

了解过文件内容之后下一步：

打开editor文件夹发现index.html
但是浏览器打开后发现一片空白，按F2打开控制台发现

通过查询第一条报错信息，打开似乎需要部署到服务器上才能访问相关资源。
不过用Visual Studio Code的用户就很幸运了，我们应该体会过它强大的扩展能力，这里只需要使用Live Server扩展就可以解决没有服务器的问题。
打开Visual Studio Code点击扩展商店搜索LiveServer点击install即可。

使用Visual Studio Code打开editor文件夹

打开index.html右键open with live server

有些幸运的同学到这一步可能已经成功了，但是还有很多不行的同学会报错。
报错时忘记截图了不过找了张类似的，如果浏览器console是这样的错误

XXXX的脚本因Mime类型不匹配而被阻止
解决方式：
win键+R键打开运行输入regedit

打开HKEY_CLASSES_ROOT

打开HKEY_CLASSES_ROOT文件夹找到.css文件夹,打开.css看里面有没有ContentType文件夹没有的话新建一个

查看右侧

把右侧的数据改为text/css上图展示的是完成后的情况。
修改的方法如下，注意别点错了

完成后重启浏览器即可。

当然可能还有些更倒霉的同学会继续报错大概有四五个红色css或js找不到（忘记截图了）这是因为LiveServer的默认工作空间问题，他去默认路径下找某些css和js文件找不到，因为有些在我们下载的editor上级目录里

解决方案：Visual Studio Code中
ctrl+shift+p

点击首选项打开设置
搜索框输入LiveServer

找到Root点击箭头位置点击之后进入settings.json

如上图把双引号里改为…/即可（别忘了Ctrl+s保存后重启VSCode）

打开用VisualStudioCode打开文件夹找到其中的index.html右键OpenWithLiveServer成功之后你将看到：

然后就可以开始使用了，这是我的第一篇博客，用来记录个人所遇到的错误和麻烦，供日后翻阅，如对您有所帮助关注点赞即可，如果真要打赏我也不会拒绝，多谢老板打赏。