我的three.js學習記錄（一）

　　在之前因爲項目需要使用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