第二十七章、燃烧吧！Three.js 小宇宙！(伍)

前言

嗨大家好，今天是铁人赛的第 27 天，也是本系列 Three.js 最後一篇罗，照惯例，最後一天我们要来利用前面所学技术制作小功能。那麽废话不多说，就让我们开始吧！

几何多面体旋转

这边有个小提醒，若你是使用 codepen 即时渲染画面等线上编辑器，记得把 three.js 引入，然後在 Behavior 内关闭即时渲染程序画面的功能，以免爆掉喔～

首先，先给一个初始化渲染环境
```
function init() {}
```

接着将场景、相机类型设定好

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

指定 WebGL 的渲染器方式，将背景颜色设定为透明色(预设值为 false 黑色)。并且设定渲染器环境大小，这边我们让整张画布大小与 viewport 比利一模一样，然後将整包 renderer 节点插入 body。
```
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );
```
设定物体形状与贴图，由於我们要让好几个多面体以不同的角度旋转，因此我们用一个阵列将这些形状组装起来。
```
var shape = [];
```

直接使用 Three.js 内建的 Constructor 绘制多面(20面)体，半径为 2.5 面数为 0 (也就是 20 面)。并且贴上材质，我们用 MeshNormalMaterial Constructor 将材质用法向量投射RGB 颜色的材质。

geometry = new THREE.IcosahedronGeometry(2.5,0);
material = new THREE.MeshNormalMaterial();
shape[0] = new THREE.Mesh( geometry, material );
shape[1] = new THREE.Mesh( geometry, material );
shape[2] = new THREE.Mesh( geometry, material );

接着我们将绘制好的物件定位，目前先让多个多面体重叠再一起，所以把定位都设在同一点就好
```
shape[0].position.set(0,5,0);
shape[1].position.set(0,5,0);
shape[2].position.set(0,5,0);
```
把绘制好的物件渲染进场景内
```
scene.add(shape[0],shape[1],shape[2]);
```
设定灯光，这边我们使用的是点光源，设定好光源位置後将其渲染到场景内
```
var light = new THREE.PointLight(0xfca4c5);
light.position.set(250,0,0);
scene.add(light);
```
上述基础设定完後调整一下相机定位
```
camera.position.set(3,4,10);
```
render 上面所有的设定到场景与相机内，我们就会得到一个多面体物件。
```
renderer.render(scene, camera);
```

到了重头戏，在 render 内设定动画。我们利用浏览器自动渲染的 requestAnimationFrame 运作动画，接着针对我们上面绘制的三个多面体物件去透过 旋转矩阵 来调整旋转角度。

function render() {
  requestAnimationFrame( render );

  shape[0].rotation.x += 0.035;
  shape[0].rotation.y -= 0.005;
  shape[1].rotation.y += 0.015;
  shape[1].rotation.z -= 0.005;
  shape[2].rotation.z -= 0.025;
  shape[2].rotation.x += 0.005;
  renderer.render(scene, camera);
}
render();