携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情
前言
Three.js作为Web前端开发的炫技框架之一，在开发使用时经常被提及到。
本篇内容，初步带领了解Three.js的核心概念
什么是Three.js
什么是
Three.js?
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
在数据化需求日益增长的这个时代，数据的展示多样化也逐渐繁杂。Three.js作为Web界面的3D可视化引擎，通过Web的方式展示数据/产品。
使用Three.js
Three.js主要基于三个基本点场景（scene）、相机（camera）、渲染器（Renderder）
下面， 基于这三点我们依次初步使用下。
场景（scene）
这里的场景指的是一个三维空间，里面承载着我们使用Three.js渲染的所有图像，可以把场景看作一个摄影棚，里面呈现的就是我们的物体、相机、光源等。
实际情况中我们通过Three.js的THREE.Scene类构建，代码书写如下👇
/**
* 创建场景对象Scene
*/
const scene = new THREE.Scene();
场景作为我们使用three.js必要的第一步，有了场景，我们接下来才能往场景里添加物体。例如长方形，矩形，球形等。
相机（camera）
由于three.js构建出来的场景是3D的，在平面的屏幕中无法展现所有面。我们就当前面向屏幕的这面叫做内容，而相机就是用来呈现这个内容的。通过相机我们可以通过修改位置、方向、角度来获取/改变我们在屏幕上呈现的内容。
three.js中关于相机的实例创建有俩种方案:
- 正射投影相机
OrthographicCamera - 透视投影相机
PerspectiveCamera。
正射投影和透视投影有什么区别呢？
对于正射投影而言，一条直线放置的角度不同，投影在投影面上面的长短不同；
对于透视投影而言，投影的结果除了与几何体的角度有关，还和距离相关， 人的眼睛观察世界就是透视投影，比如你观察一条铁路距离越远你会感到两条轨道之间的宽度越小。
正射投影相机创建代码👇
/**
* 正投影相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
透视投影相机创建代码👇
/**
* 透视投影相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
渲染器（Renderder）
渲染器就是在Web页面呈现前的最后一步，通过指定渲染区域（特点的dom节点对象），并结合之前我们所设置的场景以及相机
let renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
renderer.render(scene, camera);//执行渲染操作
尾声
以上就为three.js的基本概念，其实还有许多重要的元素也还没有阐述。比如灯光，动画，交互操作等，希望在后期我会整理出来🤡
