初探three.js，如何深入掌握其三维图形渲染技术？

本文共计1158个文字，预计阅读时间需要5分钟。

相信大多数选择前端的小伙伴都有一个设计师的梦，今天我来聊聊three.js。

three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括摄影机、灯光、材质等。

相信大多数选择前端的小伙伴都有一个设计师的梦，今天我来说一说three.js。three.js是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等

相信大多数选择前端的小伙伴都有一个设计师的梦，今天我来说一说three.js。three.js是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。学习了它之后，就可以在3D发挥你无穷的想象力和设计能力。虽说他是js，但是实际上是对WebGL的封装，对于不那么international得小伙伴来说文档可能不那么友好，相关中文文章零零散散又多又单薄，今天记录一下最近学习的情况，让广大萌新少走一些弯路。

1.渲染3D场景的一些条件

首先3D场景渲染的主角当然是一个场景啦，这个场景就是我们多能看到的全部内容，它包括一些光源light，和一个网格mesh。而网格又可以分成几何体geometry和材质material,几何体和材质又可以分成好多种，我们一会再说。场景有了，那么在一个空间中，我们以什么视角去看这个场景呢？所以说我们还需要一个摄像机camera，他的功能其实就类似于我们的眼睛。常见的相机有两种，一种是正交投影相机orthographicCamera，另一种是透视相机，区别我们以后说。

2. 简单几何体

几何体按照维度分为二维几何体和三维几何体，二维几何体就是各种面，它们默认都在XY轴组成的平面上。三维几何体有宽度（X轴）高度（Y轴）和深度（Z轴）的划分。