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作的很簡單的例子就弄好了！