Three dynamic_sea实例

基础环境搭建:

拷贝water.jpg图片至textures文件夹下
创建dynamic_sea:

1. 创建dynamic_sea网格模型：

    const geometry = new THREE.PlaneGeometry(20000, 20000)
    planeGeometry.rotateX(-Math.PI / 2)
    const texture = new THREE.TextureLoader().load('textures/water.jpg')
    const material = new THREE.MeshBasicMaterial({
        map: texture
    })
    const dynamic_sea = new THREE.Mesh(geometry, material)
    //dynamic_sea.rotation.x = -Math.PI / 2
    scene.add(dynamic_sea)

2. 设置纹理平铺方式，实现海面颜色差异：

.wrapS : number .wrapT : number
定义纹理贴图在水平/垂直方向上将如何包裹
默认值THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素，其它的两个选项分别是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。
请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……）时才起作用，宽度、高度无需相等，但每个维度的长度必须都是2的幂。
.repeat : Vector2
纹理在每一个方向U和v的表面上重复了多少次，如果repeat在任何一个方向上都大于1，相应的Wrap参数也应该设置为THREE.RepeatWrapping或THREE.mirrredrepeatwrapped以实现所需的平铺效果。

    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
    texture.repeat.set(5, 5)

设置个颜色：

3. 设置海浪上下起伏效果：

.usage : Usage
为优化目的定义数据存储的预期使用模式，对应于WebGLRenderingContext.bufferData()的使用参数，默认是StaticDrawUsage。
相关Usage Constants链接
.needsUpdate : Boolean
该标志位指明当前 attribute 已经被修改过，且需要再次送入 GPU 处理。当开发者改变了该队列的值，则标志位需要设置为 true。

.initMeshes()
    const positions = planeGeometry.attributes.position
    positions.usage = THREE.DynamicDrawUsage
    for (let i = 0; i < positions.count; i++) {
        const y = 35 * Math.sin(i / 2)
        positions.setY(i, y)
    }
    ......
.render()
    const time = clock.getElapsedTime() * 10
    const positions = planeGeometry.attributes.position
    for (let i = 0; i < positions.count; i++) {
        const y = 35 * Math.sin(i / 5 + (time + i) / 7)
        positions.setY(i, y)
    }
    positions.needsUpdate = true

4. 导入及使用第一人称控制器：

.update ( delta : Number ) : undefined
delta: Time delta value.更新控制器，常被用在动画循环中。

    import...
    ...
    controls = new FirstPersonControls(camera, renderer.domElement)
    controls.movementSpeed = 200
    controls.lookSpeed = 0.01   
    ...
    const delta = clock.getDelta()
    controls.update(delta)
    ...

5. 加上背景色和雾化效果，设置网格模型长宽段数：

    planeGeometry = new THREE.PlaneGeometry(20000, 20000, 127, 127)