three.js浅谈@初识three.js

three之前的准备

three.js是webGL的一个高级工具集，webGL则是从openGL ES 发展而来的一个图形绘制库
如果单纯使用webGL的原生API来绘制场景需要以下几个步骤

1. 创建画布
2. 获取画布环境
3. 初始化视口
4. 创建渲染数据的数组
5. 创建渲染数据的变换矩阵
6. 创建着色器
7. 初始化着色器
8. 绘制

但是我们使用three.js,three.js就会把这些抽象成以下几个东西

初识three.js

three.js是一个封装了webGL接口的工具，什么是webGL这个就需要另外开一长篇大论来写了
简而言之，webGL就是openGL的一个简化版本，可以提供让浏览器使用显卡渲染图形的能力
但是webGL的接口十分复杂：(webGL接口)我们直接调用webGL会耗散我们大量精力，因此各种封装了webGL接口的库应运而生，three.js就是其中的一个佼佼者

如何使用

在使用three.js之前，我们需要了解threejs的几个概念

1. 场景(Scene)
2. 相机(Camera)
3. 渲染器(Renderer)
4. 光源(Light)
5. 模型(Geometry)
6. 材质(Material)

以上就是three.js需要渲染出一个3D世界所需要的基本要素，在我们实际操作之前我们还需要了解一个东西

坐标系
three.js的坐标系是右手坐标系，意思是x轴从左指到右，y轴从下到上，z轴从里到外

坐标系
视口
视口

实践操作

好了我们废话少说了，上代码看看我们怎么把以上元素结合展现一个3D的世界吧

//引入three.js我这里采用的是npm包的require,你也可以使用标签的方式引入
//不管怎么样只要保证全局变量里面有THREE这个对象就行
const THREE= window.THREE=require('three')
const scene = new THREE.Scene();//创建一个场景
//创建一个相机，这个相机属于透视投影相机，里面的参数你就先别管了
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z=150//因为刚刚创建的对象都会位于原点，我们需要把相机拉远一点
//创建一个渲染器,并设置大小，然后把这个渲染器加入到dom中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//创建一个光源，这光源是属于环境光，先别管啥叫环境光
const light = new THREE.AmbientLight( '#fff',1);
//创建一种材质
const mat = new THREE.MeshPhongMaterial({
    color: new THREE.Color("rgb(106,153,153)"),
    transparent: 1,
    opacity: 0.2,
    shininess:5,
    specular:new THREE.Color("rgb(153,153,153)"),
    emissive:new THREE.Color("rgb(6,53,53)"),
    shading: THREE.FlatShading 
});
//创建一个多面体模型，并将模型和材质结合
const ballGeometry = new THREE.IcosahedronGeometry(25,2);
const ball = new THREE.Mesh( ballGeometry, mat );

scene.add(light)//场景中加入光源
scene.add( camera )//场景中加入相机
scene.add( ball )//场景中加入多面体

renderer.render(scene, camera);//把相机对准场景开始渲染

以上代码渲染出如下一个多面体，但是我们看起来像一个圆，是因为光照和材质的缘故导致分不清轮廓，但是不要怀疑，这的确是一个多面体

image.png
example
相机

参考

1. http://www.hewebgl.com/article/articledir/1
2. http://techbrood.com/threejs/docs/