入门ThreeJs：一：本地配置以及遇到的坑

这篇文章不做过多的入门介绍，主要是记录一下自己遇到的一些坑，在后续文章中会陆续更新遇到的问题。

Three.Js简单介绍

Three.js是用JavaScript编写的一个第三方库，用于实现很多的3D功能。而此Three.js正是封装的WebGL这个库，WebGL又是封装的OpenGL ES 2.0与JavaScript。而OpenGLES 2.0又是OpenGL 三维图形 API 的一个子集，而OpenGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API），或者说仅仅是一个规范…
具体可见：Three.js技术简介

为什么要学习Three.js

我原本专精于做Unity开发，但是在上家公司的时候频繁遇到需要实现Web以及小程序端的3D项目，例如展厅，AR等，使用过Unity的也知道，虽然Unity官方支持WebGL，但是它在移动端上性能上较差，并且官方也是不推荐移动端运行的，因此在webgl导出模板那里才会有一个不支持移动端的弹窗出来，并且导出的包体如果不经过特殊优化也比较大，最大的一个坑就是IOS系统的浏览器有内存保护限制，如果包体较大就会导致浏览器闪退。
因此我觉得Web以及小程序端的项目就应该用前端的技术去解决，而不是使用Unity去勉强开发，Unity做出来的东西虽然效果更好，并且操作起来也十分方便，但是受限于平台，并且目前支持WebAR的Unity插件也是少之又少。

Three.Js 官网介绍

ThreeJs官方网址
ThreeJsGitHub仓库
ThreeJs官方网站中有许多的使用ThreeJs实现的例子供我们观看（例如查看模型，Shader展示，PBR材质效果等），也有多种语言的文档（包括中文！），并且ThreeJs是支持Shader编写的，如果图形学工程师来开发就能在网页中实现很好的图形效果。
并且官方网站中也有一个在线编辑器，类似于Unity编辑器，在使用下来觉得不是很好用，许多功能也一时半会找不到地方，但是优点是很直观，在刚接触ThreeJs时可以玩一玩，大门时实际商业开发中还是推荐直接使用代码进行搭建与编写。

本地环境配置

在正式开发之前最好将ThreeJs官方仓库的dev分支下载下来，里面包括所有threeJs中的库，会在开发中频繁使用到，并且包含文档和例子，相当于把整个官网都扒下来，我在本地使用了nginx进行配置，只需要把下载好的压缩包解压到nginx的html文件夹中即可，方便随时查看文档，随时引库。

我在这里还简单地编写了一下导航栏，方便自己从首页快速地进入官网或者自己编写的demo中。

导入ThreeJs库遇到的坑

1、导入three.module.js时一切正常，使用时也正常，但是在导入轨道控制器(OrbitControls)后再次运行就报错了，显示以下的错误。
解决方法：需要在引入库之前使用type为importmap的script标签预先配置好对应的库文件，具体路径参考自己的项目，也可以加载cdn远程库文件，具体解决方案参考了：threeJs引入错误解决


2、轨道控制器添加完成后按下鼠标旋转视角依然无法旋转视角？
在一开始学习的时候，创建了场景，相机，并且为场景设置了天空盒，最好添加了轨道控制器，想要通过轨道控制器对天空盒进行观察，发现怎么拖动鼠标都无法实现旋转，然后尝试性的为场景添加了一个平面，发现就可以旋转了，才明白应该是场景中必须存在物体才能够进行旋转视角。


3、导入材质后发现材质的颜色不太对劲，色彩不一致
在ThreeJs中有一个类叫做TextureLoader，是专门用于图片加载的，一般用于加载场景的天空盒图片，加载模型的材质等。但是我在加载模型之后尝试为模型添加材质时，发现模型的材质颜色十分怪异。我第一时间想到的是ThreeJs中是否也有类似于OpenCV开发时使用到的颜色空间转换，因此我去查询了相关资料，发现网上确实有说在加载完贴图之后转换颜色空间的相关代码。这里展示在颜色空间转换前后的效果图。
转换后


解决方法：使用textureloader加载贴图，并在onload回调中修改贴图的colorSpace属性。
4、使用dat.GUI修改物体旋转值时发现旋转值与旋转效果对应不上？
原因：经过查询资料发现，ThreeJs中的Rotation属性使用的并非Unity中的角度制，而是使用了弧度制，因此修改的时候填入角度值自然无法达成自己想要的旋转效果，因此我编写一个Js函数，使用弧度转角度公式实现了角度与弧度之间的转换。

function AngleToRadian(angle)//角度转弧度公式
{
    return angle*Math.PI/180;
}