初学three.js之如何把three跑起来

1.引入three

通过js引入：

<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>

通过安装引入

npm install three --save

首先我们需要知道把three.js做出来的东西展示出来需要什么东西？
场景、相机和渲染器，没错，我们需要这三个对象，这样我们就能透过摄像机渲染场景。

1.建立场景、相机和渲染器

const scene = new THREE.Scene(); // 场景
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );  // 相机

const renderer = new THREE.WebGLRenderer();  // 渲染器
renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器的尺寸
document.body.appendChild( renderer.domElement ); // 将渲染器的canvas元素添加至html文档

// 其中PerspectiveCamera(视野角度fov，长宽比aspect ratio，近截面near，远截面far)

至此我们就可以在页面中看到一块占据满屏的黑色幕布，查看元素可以看到一个canvas元素，也就说明我们已经把设置过尺寸的渲染器的domElement（也就是canvas）渲染到页面了。细心的同学已经发现我们定义的scene和camera还没有用到诶！那就请君继续往下看~

2. 让canvas上显示些东西，比如一个立方体

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 创建一个立方体对象
// 当一个立方体出现后，如何去设置这个物体的外观呢？接下来我们就需要
// 创建一个材质对象
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); 
// 那现在我们有立方体、有外观后怎么让它俩建立联系呢？(在html中dom元素和css是通过style标签)
// 我们需要通过Mesh网格对象将二者联系到一起,
// 网格包含一个几何体以及作用在此几何体上的材质，
// Mesh对象的第一个参数是物体对象，第二个参数是材质对象
const cube = new THREE.Mesh( geometry, material );
scene.add( cube ); // 将mesh网格对象添加到场景中
// 默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
camera.position.z = 5; 

此时页面中不会有任何变化，是因为我们还没有对它进行真正的渲染，也就是“渲染循环” || “动画循环”

3. 渲染循环

使渲染器能够在每次屏幕刷新时对场景进行绘制(大多数屏幕上的刷新频率是60次/秒)

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

至此，一个由three绘制的立方体便显示在屏幕上了！

4. 使立方体动起来

// 将下列代码添加到animate()函数中renderer.render调用的上方
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

至此，一个转动的立方体便展示在页面了！