Three.js官方demo分析（四）--- 海洋

這是今天分析的demo， 這是源碼。

下面是要分析的內容：

1.第一人稱控制器

// 初始化第一人稱控制器，相似cs等第一人稱控制器
        controls = new THREE.FirstPersonControls( camera );
        // 相機的移動速度
        controls.movementSpeed = 500;
        // 鼠標移動查看速度
        controls.lookSpeed = 0.1;

2.初始化場景

// 設置背景顏色
        scene.background = new THREE.Color( 0xaaccff );
        // 指定場景中的霧爲指數霧，參數爲霧的顏色和霧的密度會增加多快
        scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );

3.設置時間相關的對象

// 初始化時間相關的對象
        clock = new THREE.Clock();
        // 每一幀的時間
        var delta = clock.getDelta();
        // 從開始到如今總共的時間
        var time = clock.getElapsedTime() * 10;

4.海浪的波動——海浪的波動實質是將平面翻轉，經過平面寬度和高度分段數，將平面切成不少小片。

geometry = new THREE.PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
        geometry.rotateX( - Math.PI / 2 );

小片的數量等於worldWidth * worldDepth，遍歷小片，以時間和小片序號爲參數，計算小片在y軸的位置並設置。

// 獲取物體的屬性
        var position = geometry.attributes.position;
        // 控制波浪的波動, position.count = worldWidth * worldDepth
        for ( var i = 0; i < position.count; i ++ ) {
            var y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
            position.setY( i, y );
        }
        position.needsUpdate = true;