three.js是什么

了解three.js之前，我们需要先了解一下WebGL。WebGL是一个用以渲染交互式3D和2D图形的无需插件且兼容下一代浏览器的 Java API，通过HTML5中canvas元素实现其功能。可以简单理解为网页版OpenGL。但WebGL的接口底层且难以上手，所以three.js应运而生。它是一个Java 3D 库，封装了WebGL底层实现，使得前端工程师不需要了解复杂的图形学和数学变换，即可利用简单的Java构建3D场景。

three.js能做什么

three.js 是封装于WebGL，一般来说封装的同时会带来灵活性的损失，但从开发者的反馈情况来看，凡是WebGL能做到的，three.js都能做到。three.js是一个比较伟大的WebGL开源库，它简化了浏览器3D编程，使得使用JavaScript在浏览器中创建复杂的场景变得容易很多。

threejs中文文档 ：http://techbrood.com/threejs/docs

github例子：https://github.com/josdirksen/learning-threejs

实现步骤

1.引用Three.js

<script src="./js/Three.js"></script>

2.创建场景、摄像机、画布等基础元素，部分代码如下

2.1 创建场景

scene = new THREE.Scene();

2.2创建相机 (这里使用的是透视相机)

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

2.3 创建画布

texture_placeholder = document.createElement( 'canvas' );

3.创建立方体网格模型、渲染器。

4. 鼠标事件触发后调用函数渲染场景

demo地址 ：https://github.com/cinoliu/ThreeJS-demo 

demo预览： https://cinoliu.github.io/ThreeJS-demo/