在之前因為項目需要使用WebGL技術做網頁應用，但是苦於自己沒有接觸，只是使用過OpenGL。然后接觸到了thre.js這個第三方庫之后我突然心情很愉快，這將節省我很多時間。
過了這個項目之后，就再也沒有看過它了，最近翻開我的個人記錄發現了在角落邊緣堆塵的three.js決定再看一下，然后記錄下來以便以后翻看，畢竟多一個技能也挺好的。
three.js簡介
three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。
Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精彩的演示。不過，這款引擎目前還處在比較不成熟的開發階段，其不夠豐富的 API 以及匱乏的文檔增加了初學者的學習難度（尤其是文檔的匱乏）three.js的代碼托管在github上面。
這個項目的目標是創建一個易於使用的,輕量級,3 d庫。這個庫提供<canvas>,< svg >,CSS3D和WebGL渲染器。
以上來自百度百科和Github上面的簡介（如果我沒有翻譯錯）
https://baike.baidu.com/item/three.js/7896801?fr=aladdin
https://github.com/mrdoob/three.js/blob/dev/README.md本人入門three.js時的鏈接地址
http://www.hewebgl.com/
https://threejs.org/examples/
http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html
https://www.qcloud.com/community/article/924964?fromSource=gwzcw.149972.149972.149972
http://www.ituring.com.cn/book/1272
http://www.cnblogs.com/zjf-1992/p/6276779.html
http://www.cnblogs.com/amy2011/
基礎知識
首先三維的存在需要有一個空間可以讓我們的物體加載進去，這就是我們three.js中的場景（scene），這個是我們三維的空間，比如我們畫一個立方體，畫完了就放在這個場景中給渲染出來。
除了一個空間，當然還要一個攝像機（camera），這個相當於我們的眼睛，我們能看到東西不僅僅是因為它的存在，而是我們還看到了，這點很重要，但是在three.js中照相機的坐標表示是使用的右手坐標
當然了看的到的也需要真實的存在，這里就需要我們加入物體。
加入了物體之后就需要我們渲染出我們的這個三維世界了，這里就需要用到我們的渲染器（renderer）它可以將我們的場景渲染出來
入門之一個點
經過以上的陳述自己也知道有些什么是必備的，所以現在我們來畫出一個點
初始化渲染器
var renderer, width = window.innerWidth, height = window.innerHeight;
//創建一個div可供放置渲染器
var container = document.createElement('div');
//將這個div置入body
document.body.appendChild(container);
//新建渲染器，其中設置antialias為true
renderer = new THREE.WebGLRenderer({
antialias: true //這里是抗鋸齒，比如我們看到一條斜線有很多跟鋸子形狀的齒，這里可以弱化那些鋸齒
});
//設置渲染器的尺寸
renderer.setSize(width, height);
//將我們的渲染器嵌入之前創建的div容器
container.appendChild(renderer.domElement);
//設置渲染器的顏色（白色）以及alpha值（這里可以理解為透明度，顏色深淺）
renderer.setClearColor(0xFFFFFF, 1.0);
初始化相機
var camera;
//這里采用了透視投影相機，看到的東西類似於人眼，越遠越小
//參數1: fov 廣角，也就是看到的平面的大小到你眼睛的角度，越大看到的越多
//參數2: aspect 平面的寬高比
//參數3: near 近處你可以看見的距離
//參數4: far 遠處可以看見的距離
camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
//設置相機的位置
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
//設置相機的朝向，z為1跟我們頭朝上一樣（這里是右手坐標系）
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
//設置相機對焦的點，跟我們眼球盯住的點一樣
camera.lookAt({
x: 0,
y: 0,
z: 0
});
初始化場景和點並渲染
var scene;
scene = new THREE.Scene();
//new THREE.CubeGeometry(5, 5, 5)確定我們的形狀，這是一個幾何體，畫出來是正方形，這里我們用足夠小的正方形表示一個點
//new THREE.MeshBasicMaterial({color: 0xFF0000})確定我們的材質
//new THREE.Mesh(geometry, material)這就是我們的物體了，這是用網格來體現的
//點成線，線成面，面成體Mesh就是由很多點線組成的
var point = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), new THREE.MeshBasicMaterial({
color: 0xFF0000
}));
//向場景中添加物體point
scene.add(point);
//渲染場景
renderer.render(scene, camera);
這里的代碼顯得有點亂，不過具體的流程已經給出來了，並且有注釋，入門應該是很方便的，最后我也會貼出代碼
入門之一條線
畫一條線跟一個點的差別不大，只需要改變創建物體的那一段代碼就行，如下：
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});
var color1 = new THREE.Color(0x444444), color2 = new THREE.Color(0xFF0000);
// 線的材質可以由2點的顏色決定
var p1 = new THREE.Vector3(-100, 0, 100);
var p2 = new THREE.Vector3(100, 0, -100);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push(color1, color2);
var line = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(line);
產品展示
經過奮戰，入門了點和線之后結果如下顯示
以上的代碼已經上傳Github