Three.js学习笔记（一）

一、什么是three.js？

学习一门东西，我一直以来的思路就是先要搞清楚，我们为什么需要这项技术，以及它能给我们带来什么，对于three.js我也是如此。

首先Three.js封装了底层的图形接口，让我们能用简单的代码实现三维场景的渲染,本质上可以看做WebGL的上层的封装。

那么什么又是webGL呢？WebGL是基于OpenGL ES 2.0的Web标准，可以通过HTML5 Canvas元素作为DOM接口访问。
简单来说，WebGL其实就是将OpenGL （ES）移植到了网页平台，让我们使用JavaScript就可以在网页上实现三维图形的渲染了。

而之所以我们需要对WebGL进行封装，而不是直接去使用WebGL，就是由于WebGL的代码书写起来太过复杂，往往实现一个小的效果，却需要几百行代码，这极大的影响了我们的日常开发效率，因此才会有Tree.js的出现，目的就是提高开发效率，减少一定的学习成本。

差异方面具体可看：《Three.js入门指南》一书中的比较：http://www.ituring.com.cn/book/miniarticle/49782

还有youtube上的这个视频也不错：https://www.youtube.com/watch?v=YKzyhcyAijo
（虽然感觉这老哥说的英语不咋清楚，但总体看上两遍后也就可以听清楚了）

二、Three.js初探

three.js是画在canvans上的，因此我们首先需要申明canvans标签：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>First Three.js Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style></style>
    <script src="three.min.js"></script>
</head>
<body>
    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>
<script>
    const init = () => {
}
</script>
</html>

上面的幕布已经准备少了，下面就是需要使用Three.js来画东西了。首先要明确的是Three.js是由下面三者构成的：

渲染器（Renderer）
场景（Scene）
照相机（Camera）

2.1 渲染器（Renderer）

渲染器将和Canvas元素进行绑定,在这里我们使用的就是WebGLRenderer：

1
2
3

const renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
})

当然，我们也能使用Three.js来生成一个canvas，这样我们就无需再将渲染器与canvas进行绑定了：

1
2
3

const renderer = new THREE.WebGLRenderer()
renderer.setSize(400, 300) // 表示设置Canvas的宽400像素，高300像素
document.getElementsByTagName('body')[0].appendChild(renderer.domElement) // 将渲染器对应的Canvas元素添加到<body>中

然后我就能来画这个canvas了：

1	renderer.setClearColor(0x000000)

就能看到一块黑色的背景：
输入图片说明

2.2 场景（Scene）

我么在Three.js中所添加的物体都是添加到场景中的，因此场景其实就相当于一个大容器。一般说，场景里没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可：

1	const scene = new THREE.Scene()

2.3 照相机（Camera）

在Three.js中，照相机可以说是最重要的一个工具了，我们使用所添加的物件都是需要它来进行定义的。这里，我们定义了一个透视投影的照相机：

1
2
3

const camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000)
camera.position.set(0, 0, 5)
scene.add(camera)

2.4 画东西

在WebGL和Three.js中都有坐标系这一概念，他们两个使用的坐标系是右手坐标系：

我们在画东西的时候，就是根据这个坐标系来实现我们的物体的，比如我们需要实现一个长方形：

const cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
    new THREE.MeshBasicMaterial({
        color: 0xff0000
    })
)
scene.add(cube) // 将长方体加入场景

最后使用渲染器将场景和照相机渲染出来：

1	renderer.render(scene, camera)

总的效果如下：

输入图片说明

参考资料：

《Three.js入门指南》
https://www.youtube.com/watch?v=YKzyhcyAijo