Three.js官網demo分析（一）

Three.js官方文檔比較精簡，重點介紹api，沒有一個合適的零基礎的教程，但官網的demo十分豐富，遂產生從demo來逐漸學習Three.js的想法。

如下是目前收集到的較好的學習資源：

1. Three.js入門指南：http://www.ituring.com.cn/boo...
2. Three.js官網中文文檔：https://threejs.org/docs/inde...
3. 大牛博客，有不少demo： http://www.wjceo.com/blog/thr...
4. 圖解WebGL&Three.js工做原理： https://www.cnblogs.com/wanbo...
5. Three.js源碼註釋： https://blog.csdn.net/omni360...

好，下面迴歸正題，這是今天要分析的: demo，官網的例子，能夠直接跳到github上查看源碼，我建議直接把three.js整個項目下載下來，能夠直接查看demo的效果，直接打開html文件可能效果有不同，能夠看官網的說法， 也就是須要啓動一個本地的服務器，若是你用的webstorm的話，直接右鍵html文件，就會有個 run 文件的選項，點擊就能夠啓動一個本地服務器來啓動本地的文件。

下面是demo的代碼：

var camera, scene, renderer;
    var mesh;

    init();
    animate();

    function init() {

        // 初始化透視相機，參數(fov : Number, aspect : Number, near : Number, far : Number)
        // fov — 攝像機視錐體垂直視野角度
        // aspect — 攝像機視錐體長寬比
        // near — 攝像機視錐體近端面
        // far — 攝像機視錐體遠端面
        camera = new THREE.PerspectiveCamera( 70, ( window.innerWidth - 600 ) / window.innerHeight, 1, 1000 );
        // position是camera繼承自Object3D的屬性，表示相機對象在三維空間中的位置
        camera.position.z = 400;

        // 初始化場景
        scene = new THREE.Scene();
        // 加載紋理，TextureLoader是一個加載器，load方法加載文件，返回一個新的紋理對象
        var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
        // BoxBufferGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
        var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
        // 材質，map屬性表示貼圖，這裏將以前的texture紋理對象添加進來
        var material = new THREE.MeshBasicMaterial( { map: texture } );
        // Mesh方法表示以三角形組成基本網格來造成物體
        mesh = new THREE.Mesh( geometry, material );
        // 將物體添加到場景中
        scene.add( mesh );

        // 初始化渲染器，antialias表示抗鋸齒, canvas屬性將three.js加載到已有的canvas元素上。
        renderer = new THREE.WebGLRenderer( { antialias: true, canvas: document.getElementById('my-canvas') } );
        // 設置設備像素比。一般用於避免HiDPI設備上繪圖模糊
        renderer.setPixelRatio( window.devicePixelRatio );
        // .setSiZe( width : Integer, height : Integer, updateStyle : Boolean )
        // 設置輸出canvas的大小，將updateStyle設置爲false以阻止對canvas的樣式作改變
        renderer.setSize( window.innerWidth - 600, window.innerHeight );
        // domElement爲自動建立或已有的canvas元素
        document.body.appendChild( renderer.domElement );

        // 監聽瀏覽器尺寸的修改
        window.addEventListener( 'resize', onWindowResize, false );

    }
    // 瀏覽器尺寸改變時的回調，從新設置相機和渲染器參數
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        // 在大多數屬性發生改變以後，你將須要調用.updateProjectionMatrix來使得這些改變生效。
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }
    // 動畫
    function animate() {
        // 每一幀調用一次
        requestAnimationFrame( animate );

        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;

        renderer.render( scene, camera );
    }

對於初始化透視相機中fov — 攝像機視錐體垂直視野角度和視錐體的理解，能夠看看入門指南中的透視相機一章，但視錐體的長寬比都說要和canvas的長寬比同樣，我試了一下，若是不同的話物體就會變形。有點難以理解，其實道理跟圖片要在固定長寬的div填滿且沒有裁剪和空白的情形同樣，若是圖片跟div長寬比不一樣的話就會變形。這裏的視錐體垂直視野角度在照相機距離物體角度固定的狀況下，至關於固定了寬，再根據長寬比算出長，視錐體的面積就固定了，此時視錐體的就至關於一張圖片，而canvas就至關於固定寬高的div，因此此時視錐體拉伸鋪滿。

widthSegments屬性能夠看入門指南中的基本形狀瞭解。

設備像素比能夠看連接

通常狀況下new THREE.WebGLRenderer()會自動建立一個canvas元素，若是想用本身定義的canvas元素的話，能夠傳入canvas屬性，值爲獲取的元素。