three.js和webGL
引用官方的说法：
three.js是使用WebGL来绘制三维效果的，three.js封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。
所以学习three.js并不需要专门去学习webGL,当然有基础肯定是有帮助的。
官网说明
1.打开官网看到下图，右边是一些3d样例，对初学没什么用。
官网首页
左边r130代表的版本号，这边建议大家去看的是文档说明( documentation )和resources的第一个学习资源( Three.js Fundamentals ),他们都有对应的中文翻译，讲得比较基础适合入门
three.js版本选择
1） three.js版本更新得很快，今天你*载下**了一个新版本，明天可能又更新了。很多旧版的方法在新版中被删除，一些方法的引用文件也有所改变，在网上搜索到的很多教程都是r6-r9版本，方法的使用看起来也是各异，学习起来挺混乱的。这里我使用r130版本（编写这边文章时候的最新版本）。各版本官方*载下**地址： https://github.com/mrdoob/three.js/tags 。
2） *载下**完之后解压得到three.js-master文件夹。这边将build里面的three.js拿出来，在自己项目做练习，examples里面有各种样例的代码包括了素材和对应的js依赖，之后可以拿来做练习（毕竟3d素材自己不好弄）。
目录结构
开发工具
我使用的vscode ，安装live Server插件，可以跑本地服务，解决了图片等素材引用的跨域问题，当然你也可以直接使用官方的脚手架来练习。官方脚手架需要node环境，如果不了解的建议使用vscode。
五.第一个3d程序
这里我使用官网上的例子。先上全代码，附注释。可以运行下看效果。
<html>
<head>
<metacharset="utf-8">
<title>Myfirstthree.jsapp</title>
<style>
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<scriptsrc="js/three.js"></script>
<script>
constscene=newTHREE.Scene();
constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
constrenderer=newTHREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
constgeometry=newTHREE.BoxGeometry();
constmaterial=newTHREE.MeshBasicMaterial({
color:0x00ff00
});
constcube=newTHREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z=5;
constanimate=function(){
requestAnimationFrame(animate);
cube.rotation.x+=0.01;
cube.rotation.y+=0.01;
renderer.render(scene,camera);
};
animate();
</script>
</body>
</html>
1.创建了一个场景，也就是3d模型等展示的舞台。
const scene = new THREE.Scene();
2.创建一个相机，他拍到的地方就是我们看到的内容，这里创建的是透视相
第一个参数：是角度表示看到的范围，
第二个表示：长宽比，作用是展示的物体可以正常比例显示
三四参数表示：近截面（near）和远截面（far），当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
3.创建一个渲染器，将场景和相机放入，渲染画面，设置渲染范围，并添加到页面中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
4.创建简单的3d模型
// 创建一个正方体
constgeometry=newTHREE.BoxGeometry();
// 创建网格基础材质 可以理解为外表样子，材质有很多种，详细可以查文档
constmaterial=newTHREE.MeshBasicMaterial({
color:0x00ff00
});
// 创建网格 将他们加入网格中在添加到场景，网格包含一个几何体以及作用在此几何体上的材质
constcube=newTHREE.Mesh(geometry,material);
scene.add(cube);
5.渲染
// 这边是将相机拉远了，便于观察。如下图所示
camera.position.z=5;
// 添加动画，渲染
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
6.效果图
