THREE.JS中的一些基本概念。
801657210987_.pic.jpg
最近看了看threeJS的文档，对它初步有了一个新的认识。整理了上上面的图片，有需要的可以保存一下。
应用场景
基本的业务代码写的多了，有时候难免会觉得对自己的技术成长帮助不大，所以总想着去学习一些新的知识。THREE.JS无疑是个不错的选择，因为至少是一个方向，原先我一直认为它在前端的应用场景不多，但是最近了解了之后，发现它的应用场景还是很广泛的，比如：
- 大型厂矿的系统实时监控平台（石油，石化，天然气管道的监控预警系统）
- 电商平台商品信息的三维展示
- 自动驾驶的实时路线跟踪
- 机械结构的模型及组装
- 自动标注平台
- 3D游戏的开发
- 医疗行业的图像标注
- 3D的流程图
- 家装行业的设计平台
- 电路板设计平台 等等，都需要用到相关或者类似的技术。
THREE.JS中的基本概念
学习THREE.JS我们需要对它涉及的一些基本概念有一定的了解。场景，相机，渲染器，控制器，灯光，阴影，材质，纹理，模型，以及后期处理等。
场景
要理解场景，我们可以把它我们要开发的项目想象成一出话剧。场景就相当于特定情景的舞台，用来承载道具，演员，灯光，音响，烟雾等。
我们可以通过scnce.add()方法，向场景中添加我们想要的内容，也可以通过scence.remove()来移除我们不需要的内容。
相机
THREE.JS中的相机，我们可以理解为拍电影时用到的摄像机。或者在实际生活中，其实就是我们的眼睛。我们站在某个地方，眼睛注视着某个人，或者某个物体，我们的视野有一定的范围，THREE.JS中的相机也有一定的照射范围，我们通过设置camera.position.set()方法来设置相机的位置，或者就像拍电影时，铺设摄像机轨道来移动相机，呈现出一定的画面移动效果。
模型，几何体
模型和几何体对应的拍摄电影过程中的道具或者演员。导演说改哪个演员出场了，我们就通过模型加载器，或者scence.add()方法向场景中添加对应的模型以及几何体。
我原先以为哪些3d效果都是用代码绘制的，那也太厉害了。结果发现不少都是使用三维设计软件先设计模型，然后到导出三维模型数据，再通过加载器加载到界面中，贴上纹理，添加交互效果即可。
材质，纹理
材质和纹理，则是演员的服装。演员需要穿什么样的衣服，则是通过制定的方法给某些模型或者几何体添加不通的纹理。比如铺个地板：
代码语言：javascript复制var floortexture = new THREE.TextureLoader().load("src/assets/floor3.png");
var material = new THREE.MeshLambertMaterial({
map: floortexture,
side: THREE.DoubleSide,
transparent: false,
});
var floormesh = new THREE.Mesh(geometry, material);
灯光
灯光和现实中的灯光一样，分为平行光，射灯光，环境光，点光源等等，需要我们根据不同的需要选择不同的灯光进行设置。
控制器
控制器可以控制场景进行一些特定的交互。比如轨道控制器可以控制鼠标对场景进行拖拽，旋转。第一人称控制器，则可以像我们玩游戏的手柄一样，进行不同的操作。
后期处理
后期处理可以对场景，以及场景中的物体进行修改，渲染不同的样式及交互效果。比如点击某个物体加个边框，阴影等等。
上面说的这些仅仅是一些最基本的概念。实际上，每个概念都有一套自己的API方法，想要真正掌握和熟练使用他们，需要有一定的耐性和坚持，找一些示例做练习。
先写到这里，后期的练习中有收获再进行分享，谢谢。
