Three.js学习笔记(一)---------起步

Three.js学习笔记(一)---------起步
效果图： 

利用three.js在浏览器上画一个球体。
首先明白用three.js创建3D模型必备的组成部分是：
	1）scene             	（场景）
	2）renderer		（渲染器）
	3）camera		（相机，投影用的，其中包括灯光）
	4）objects		（用户本身定义的尸体）

首先，得定义一些常量，包括场景的大小，以及相机的投影角度，方向，和投影前表面和后表面。
var WIDTH = 400,
      HEIGHT = 300;

    var VIEW_ANGLE = 45,
        ASPECT = WIDTH/HEIGHT,
        NEAR = 0.1,
        FAR = 10000;

以后，就能够定义场景，渲染器，和相机等
        var renderer = new THREE.WebGLRenderer();
        var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
        var scene = new THREE.Scene();

对渲染器设置大小：
	renderer.setSize(WIDTH,HEIGHT);
相机的位置设置：
	camera.position.z = 300;

为了将生成出来的场景，嵌入到网页中，必须用jquery或者js取得元素：
	var $container = $('#container');
而后将场景导入：
	$container.append(renderer.domElement);

如今场景就设置完了，可是这个场景尚未任何的物体，最简单的，咱们添加一个球体：
	var radius = 50,segments = 50,rings = 16;
	var sphere = new THREE.Mesh(
		new THREE.SphereGeometry(radius,segments,rings),sphereMaterial);

其中sphereMaterial咱们没有定义，它能够是简单的颜色，也能够是图片导入的材质，这里咱们简单的设置单一颜色：
	var sphereMaterial = new THREE.MeshLambertMaterial({color:0x00cc00});

以后就是将相机，球体添加到这个场景中：
	scene.add(sphere);
	scene.add(camera);。
这样在浏览器显示出来是全黑的，由于咱们尚未打灯光
var pointLight = new THREE.PointLight(0xFFFFFF);
	pointLight.position.x = 100;
	pointLight.position.y = 100;
	pointLight.position.z = 150;

最后将灯光加入到场景中，scene.add(pointLight);
最后的最后，就是将它画出来了：
	renderer.render(scene,camera);
这样咱们第一个用three.js作的很简单的例子就弄好了！