three之前的准备
three.js是webGL的一个高级工具集，webGL则是从openGL ES 发展而来的一个图形绘制库
如果单纯使用webGL的原生API来绘制场景需要以下几个步骤
- 创建画布
- 获取画布环境
- 初始化视口
- 创建渲染数据的数组
- 创建渲染数据的变换矩阵
- 创建着色器
- 初始化着色器
- 绘制
但是我们使用three.js,three.js就会把这些抽象成以下几个东西
初识three.js
three.js是一个封装了webGL接口的工具，什么是webGL这个就需要另外开一长篇大论来写了
简而言之，webGL就是openGL的一个简化版本，可以提供让浏览器使用显卡渲染图形的能力
但是webGL的接口十分复杂：(webGL接口)我们直接调用webGL会耗散我们大量精力，因此各种封装了webGL接口的库应运而生，three.js就是其中的一个佼佼者
如何使用
在使用three.js之前，我们需要了解threejs的几个概念
- 场景(Scene)
- 相机(Camera)
- 渲染器(Renderer)
- 光源(Light)
- 模型(Geometry)
- 材质(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
相机
