简介

1 .
https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/waterMat
2 .需要安装的版本 https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/materialsLibrary/babylon.waterMaterial.js
3 .基础例子 https://playground.babylonjs.com/#1SLLOJ#17

举例

var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 2048, 2048, 16, scene, false);
    var water = new BABYLON.WaterMaterial("water", scene, new BABYLON.Vector2(512, 512));
    // water.backFaceCulling = true;
    water.bumpTexture = new BABYLON.Texture("textures/waterbump.png", scene);
    water.windForce = 5;
    // 水的流速

    water.waveHeight = 1.7;
    // 海浪的高度:但是海浪高了之后就显示出三角形了，过渡不是很流畅

    water.bumpHeight = 0.5;
    // 表示反射和折射的扰动。波光粼粼的感觉.越小就越是原本添加的天空的贴图样式

    water.windDirection = new BABYLON.Vector2(-0.5, -0.5);
    // 风的方向
    
    // water.waterColor = new BABYLON.Color3(0.09, 0.65, 0.91);
    // water.colorBlendFactor = 0.8;
    // 这倆参数可以控制实现不同颜色的水

    water.waveLength=0.5
    // 海浪的波长

    water.addToRenderList(skybox);
    waterMesh.material = water;

截屏2021-12-26 下午4.59.13.png

1 .水下的鱼，以及周围天空盒的东西，以及河底。这里的鱼还是可以动的
2 .这里的水只能从外面看，不能在水里看.水里就露馅了

<!DOCTYPE html>
<!-- 添加小人,使用序列图 -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!-- Link to the last version of BabylonJS -->
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <!-- Link to the last version of BabylonJS loaders to enable loading filetypes such as .gltf -->
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <!-- Link to pep.js to ensure pointer events work consistently in all browsers -->
    <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script> -->
    <!-- <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script> -->
    <!-- <script src="https://cdn.rawgit.com/BabylonJS/Extensions/master/DynamicTerrain/dist/babylon.dynamicTerrain.min.js"></script> -->
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <!-- <script src="https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/materialsLibrary/babylon.waterMaterial.js"></script> -->
    <script src="./water.js"></script>
</head>
<style>
    html, body {
        overflow: hidden;
        width   : 100%;
        height  : 100%;
        margin  : 0;
        padding : 0;
    }

    #renderCanvas {
        width   : 100%;
        height  : 100%;
        touch-action: none;
    }
</style>
<body>
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <script>
        const canvas = document.getElementById("renderCanvas");
        var engine = null;
        // 这里还不能用let，不然就爆炸，获取不到engine
        var scene = null;
        var sceneToRender = null;
        const createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };

        let createScene=async function(){
            // 关键函数都写在这个里面

                var scene = new BABYLON.Scene(engine)
                var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 4, 200, BABYLON.Vector3.Zero(), scene);
                camera.attachControl(canvas, true);
                
                var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

                // 添加天空盒
                let skybox=BABYLON.Mesh.CreateBox('skyBox',1000,scene)
                let skyboxMaterial=new BABYLON.StandardMaterial('skyBoxMaterial',scene)
                skyboxMaterial.backFaceCulling=false
                skyboxMaterial.reflectionTexture=new BABYLON.CubeTexture('https://playground.babylonjs.com/textures/skybox3',scene)
                skyboxMaterial.reflectionTexture.coordinatesMode=BABYLON.Texture.SKYBOX_MODE
                // 又是拼写错误，corrdinatesMode：这个拼错了
                skyboxMaterial.diffuseColor=new BABYLON.Color3(0,0,0)
                skyboxMaterial.specularColor=new BABYLON.Color3(0,0,0)
                skyboxMaterial.disableLighting=true
                skybox.material=skyboxMaterial
                // material最后还给拼错了

                let groundMaterial=new BABYLON.StandardMaterial('mat',scene)
                // groundMaterial.diffuseTexture=new BABYLON.Texture('https://playground.babylonjs.com/textures/grass.dds',scene)
                // 海草版本

                groundMaterial.diffuseTexture=new BABYLON.Texture('https://playground.babylonjs.com/textures/sand.jpg',scene)
                // 沙滩
                groundMaterial.diffuseTexture.vScale=groundMaterial.diffuseTexture.uScale=8

                var ground = BABYLON.Mesh.CreateGround("ground", 512, 512, 32, scene, false);
                ground.position.y = -1;
                ground.material = groundMaterial;
                    
                // Water
                var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 32, scene, false);
                waterMesh.position.y=10
                
                var water = new BABYLON.WaterMaterial("water", scene);
                water.bumpTexture = new BABYLON.Texture("https://playground.babylonjs.com/textures/waterbump.png", scene);

                water.windForce = -5;
                water.waveHeight = 0.4;
                water.windDirection = new BABYLON.Vector2(1, 1);
                water.waterColor = new BABYLON.Color3(0.1, 0.1, 0.6);
                water.colorBlendFactor = 0.3;
                water.bumpHeight = 0.1;
                water.waveLength = 0.1;

                // 把需要透射在水面的东西添加到render层里
                water.addToRenderList(skybox)
                water.addToRenderList(ground)

                // 如果岸边有树，可以添加到这里，如果河上面有飞鸟，可以添加到这里，这时湖面反应的不是单纯黑色的影子，而是有颜色的

                // 水里添加一条鱼
                let fish=await BABYLON.SceneLoader.ImportMeshAsync('',"http://127.0.0.1:8080/source/glb/", "fish.glb", scene)
                // fish.meshes[0].position.y=-1
                console.log('fish',fish)
                for(let i=0;i<fish.meshes.length;i++){
                    fish.meshes[i].position.y-=5
                    water.addToRenderList(fish.meshes[i])
                }

                waterMesh.material = water;
                return scene
        }

    window.initFunction=async function(){
        let asyncEngineCreation=async function(){
            try{
                return createDefaultEngine()
            }catch(e){
                return createDefaultEngine()
            }
        }

        window.engine=await asyncEngineCreation()
        if(!engine){
            throw('engine should not be null')
        }
        window.scene=createScene()
        
    }

    initFunction().then(()=>{
        scene.then((returnedScene)=>{
            sceneToRender=returnedScene
        })
        engine.runRenderLoop(function(){
            if(sceneToRender&&sceneToRender.activeCamera){
                sceneToRender.render()
            }
        })

    })

    window.addEventListener('resize',function(){
        engine.resize()
    })

</script>
</body>
</html>