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;