three.js探索筆記一

前言

“哈？要搞3D？”

“恩，之後一個項目要建造一棟樓，要靠你了少年！”

於是我默默的打開了 webgl新手入門手冊 http://www.hewebgl.com/article/getarticle/27

後來，我成功的完成了這個這個3d樓層。http://wisdom.pppppc.com/home/index/threes.html

這個過程中，我經歷了很多。接下來我將分享我過程中的心得。

第一步：新手教程

方法一：進入webgl官網   three.js新手教程。（我就是這樣乾的，花了3-4天通了遍基礎）

方法二：找之前大神的基礎教程。

方法三：加webgl相關QQ群，假扮萌妹，求幫助~~

以下是個畫網格的例子，通過這個例子，我給大家分析畫一個3d的需要（不是導入模型~）

        var renderer,camera,scene,light;
        var width,height;
        //物體
        var cube;
        //初始化渲染器函數
        function initThree(){
            width = document.getElementById("canvas3d").clientWidth;
            height = document.getElementById("canvas3d").clientHeight;
            //初始化渲染器  （花括弧裡面為：鋸齒優化）
            renderer = new THREE.WebGLRenderer({antialias:true});    
            //大小
            renderer.setSize(width,height);            
            document.getElementById("canvas3d").appendChild(renderer.domElement);
            //背景顏色
            renderer.setClearColor(0xFFFFFF,1.0);
        }
        //初始化相機函數
        function initCamera(){
            camera = new THREE.PerspectiveCamera(45,width/height,1,5000);
            camera.position.x=0;
            camera.position.y=1000;
            camera.position.z=0;
            camera.up.x = 0;
            camera.up.y = 0;
               camera.up.z = 1;
            camera.lookAt({x:0,y:0,z:0});
        }
        //初始化場景函數
        function initScene(){
            scene = new THREE.Scene();
        }
        //初始光函數
        function initLight(){
            light = new THREE.DirectionalLight(0xff0000,1.0,0);
            light.position.set(200,200,200);
            scene.add(light);
        }
        //初始化物體函數        
        function initObj(){
            var geometry = new THREE.Geometry();
            var material = new THREE.LineBasicMaterial({vertexColors:true});
            var color1 = new THREE.Color("#444444"),color2= new THREE.Color("#ff0000");
        
            var p1 = new THREE.Vector3(-500,0,0);
            var p2 = new THREE.Vector3(500,0,0);
            
            geometry.vertices.push(p1);
            geometry.vertices.push(p2);
            geometry.colors.push(color1,color2);
            
            for(var i=0;i<21;i++){
                var line = new THREE.Line(geometry,material,THREE.LinePieces);
                line.position.z=(i*50)-500;                
                scene.add(line);
                
                var line = new THREE.Line(geometry,material,THREE.LinePieces);
                line.position.x=(i*50)-500;    
                line.rotation.y=90*Math.PI/180;        
                scene.add(line);
            }                        
        }                    
        //整體初始化
        function threeStart(){
            initThree();      
            initScene();
            initLight();
            //對象
            initObj();

　　　　　　　initCamera();

　　　　　　　　renderer.clear();
 　　　　　　renderer.render(scene, camera);
 }

對應著代碼，我解釋一下：

1，變數：renderer   渲染器

　　首先我們的最終目標是要將我們代碼畫的物體渲染到網頁上！

　　渲染的實現就是 ：

renderer.render(scene, camera);

2. 變數 ： camera   相機  （廢話，我們tm要你翻譯？）

　　這玩意叫相機，就相當於我們的眼睛。它是代替我們在3D世界裡面看的東西。它有視野大小，視野最近/最遠，位置坐標的定義。一般情況，我們移動它位置和方向來控制我們的視野。

3.變數：scene    場景 （這就是我們看到的一切）

　　場景裡面主要有2個東西，

　　①物體，用three畫的\載入的模型等，一般情況，我會將所要的物體全部放到initObj()裡面。

　　②光，沒有光，那麼物體確實存在在那兒，但是你看不到~~

　　這些物體和光都需要在渲染前放到場景內。

　　scene.add(light);
　　scene.add(line);　　

總結：

　　一個3d效果的流程：

　　①初始化渲染器 

　　initThree();

　　②初始化場景

　　initScene();

　　③初始化物體、光 add到場景中

　　initLight();

　　initObj();

　　④把我們的眼睛（相機）給放好位置（初始化）（相機初始位置最終渲染前就行）

　　initCamera();

　　⑤最後把場景和相機放到渲染器中，咔咔咔咔咔咔~~噗    頁面就出來了。

　　renderer.render(scene, camera);

　　哈哈哈哈哈哈哈，詳細的那些相機~~光啊~~~什麼的建議看webgl官網或者這個大神的博客：http://blog.csdn.net/birdflyto206/article/category/6132005

　　下一次，我主要這個樓宇項目的起步。