提到three.js就不得不提到另外两个名词 openGL和webGL
这里复制一下百度对openGL的解释
OpenGL（全写Open Graphics Library）是指定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。它用于三维图像（二维的亦可），是一个功能强大，调用方便的底层图形库。
但openGL需要使用C或C++语言，对前端工程师不太友好
不过html5以后这个问题就被解决了，h5的新特性之一就是webGL,由openGL ES2.0演变而来，这样前端工程师就可以用html和js来创建和显示三维图形了，绘图区域就是canvas元素。canvas分为两部分，一部分是2d绘图，另一部分就是webGL绘图。
不过直接使用webGL还是十分复杂，于是我们可以使用three.js库来简化这个过程。
下面发一张three.js简易结构图方便大家认识一下three.js
简单来说 创建一个three.js三维场景需要三步
1.创建场景 可以理解为所有要显示的物体都是一个object，首先要创建一个场景然后才能在场景里加入object
2.创建相机 相当于眼睛 参数不同看到的场景也是不同的
3.创建渲染器 画完图需要通过渲染器渲染到页面上
先在three.js官网下载一下文件，然后按照上面的顺序做好准备工作，接下来我们就可以开始three.js的旅程了
下面贴一下代码
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<script type="text/javascript" src="../assets/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<script type="text/javascript">
function init() {
var scene=new THREE.Scene();
var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.x=-30;
camera.position.y=40;
camera.position.z=30;
camera.lookAt(scene.position);
var renderer=new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE,1.0);
renderer.setSize(window.innerWidth,window.innerHeight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene,camera);
}
window.onload = init
</script>
</body>
</html>
当然了，运行出来的结果还是什么都没有，这是因为我们还没有往场景里面加物体，不过检查元素我们应该看到一个canvas已经挂载到dom树上了
下一篇笔记我会详细写如何再场景中加入物体 喜欢的朋友可以关注我一起学习three.js