webgl學習總結畫線面及場景和物體動

WebGL是在瀏覽器中實現三維效果的一套規範。是瀏覽器中的3D引擎，是利用js代碼來實現加載3D模型，渲染、輸出等功能，從而實如今瀏覽器和微信中瀏覽三維文件的效果。

three.js是基於WebGL的開源圖形庫，裏面提供了大量的WebGL的圖形函數，直接使用three.js可更快的開發一個web3D項目。

Web3D又稱網絡三維，是一種在虛擬現實技術的基礎上，將現實世界中有形的物品，經過互聯網進行虛擬的三維應用展現，並可互動瀏覽操做的一種虛擬現實基礎。

3Dview框架是基於three.js圖形庫，實現的3D文件加載，360度瀏覽、平移、爆炸、刨切、批註、文件樹、動畫等功能的一個瀏覽控件。

3Dview的基本架構：

                    用戶                                                    服務器端後臺                                               viewer加載

上傳ics、obj等三維渲染模型文件             服務器自動轉換爲web可加載格式             加載文件，並實現瀏覽各類功能

three.js學習：

1.三大組建，

場景（scene）、相機（camera）、渲染器（renderer）

關鍵句：有了這三樣東西，咱們纔可以使用相機講場景渲染到網頁上去。

二、畫線條與畫平面

若是不報錯但沒有效果的時候，注意新版本有的地方的方法是寫法是不同的。

好比：

1.THREE.LinePieces 換成 THREE.LineSegments

2.camera.lookAt(0, 0, 0)的寫法

這時候能夠參考https://threejs.org/docs/#api 參考最新的api文檔的定義。

<script src="three.js-dev/build/three.js"></script>

 <script>
        //渲染器
        var renderer;
        function initThree() {
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias : true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF, 1.0);
        }
       //相機
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            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(0,0,0);
        }
        //場景
        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }
         //光
        var light;
        function initLight() {
            light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
            light.position.set(100, 100, 200);
            scene.add(light);
        }
 //立方體
        var cube;
        //初始化 畫線條
//        function initObject() {
//           //聲明一個幾何體geometry vertices變量用來存放點
//            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點的顏色決定
//           // vertor3D表示3D世界的點,點有THREE.Vector3表示，必須被放到THREE.Geometry
//            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.LineSegments );
//            scene.add(line);
//        }
        //初始化 畫平面
        function initObject() {
            var geometry = new THREE.Geometry();
            geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
            geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

            for ( var i = 0; i <= 20; i ++ ) {

                var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                line.position.z = ( i * 50 ) - 500;
                scene.add( line );

                var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                line.position.x = ( i * 50 ) - 500;
                line.rotation.y = 90 * Math.PI / 180;
                scene.add( line );

            }
        }

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene, camera);
        }

    </script>

　　

三、讓場景動起來：與靜態區別加了requestAnimationFrame（animation）函數,傳遞callback參數。 camera.position.x =camera.position.x +1;相機向右移動

第一種相機動
//物體設置

var mesh;
function initObject() {
    var geometry = new THREE.CylinderGeometry( 100,150,400);
    var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
    mesh = new THREE.Mesh( geometry,material);
    mesh.position = new THREE.Vector3(0,0,0);
    scene.add(mesh);
}

function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    animation();
}

function animation()
{
    //renderer.clear();
    camera.position.x =camera.position.x +1;
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
}

　　第二種 物體動

 function animation()
       {
           mesh.position.x -=1;
            renderer.render(scene, camera);
          requestAnimationFrame(animation);
      }

四、性能

FPS表示：上一秒的幀數，這個值越大越好，通常都爲60左右。點擊上面的圖，就會變成下面的另外一個視圖。參數0 

MS表示渲染一幀須要的毫秒數，這個數字是越小越好。再次點擊又能夠回到FPS視圖中。參數1

關鍵代碼

添加<script src="three.js-dev/examples/js/libs/stats.min.js"></script>

 var stats;
在定義渲染器renderer的initThree函數裏添加
 //性能
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.getElementById('canvas-frame').appendChild(stats.domElement);