简介
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>
海的表现
截屏2021-12-26 下午5.12.44.png
1 .https://www.ibm.com/resources/cloud/mayflower-ship-experience/#/experience/harbor
截屏2021-12-26 下午5.16.16.png
2 .有个这样的，但是现在这个网站好像被黑了，点击过去是博彩网站，真离谱啊。技术网站都有人黑
截屏2021-12-26 下午5.24.09.png
3 .https://www.mnnqns-stagnantpools.leoramaen.com/#
截屏2021-12-26 下午5.31.42.png
4 .这种卡通分格的也是https://playground.babylonjs.com/#TWQZAU#1。原来的题目写的是乐高分格
网友评论