babylonJs 水材质

babylonjs 3.0(及以上提供了水材质),我们可以通过代码实现特别好看的水材质.

需要单独导入特殊材质文件,materials.js(最后会提供源代码)

<script src="./babylon.js"></script>
<script src="./babylonjs.materials.js"></script>

创建基础场景

let engine = new BABYLON.Engine(canvas, true)let scene = new BABYLON.Scene(engine)let camera = new BABYLON.ArcRotateCamera('ArcRotateCamera', 0, 1, 10, new BABYLON.Vector3(0, 0, 0), scene)camera.setTarget(BABYLON.Vector3.Zero())camera.attachControl(canvas, false)camera.lowerRadiusLimit = 10let light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene)let ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene)engine.runRenderLoop(function () {scene.render()
})window.addEventListener("resize", function () {engine.resize()
})

生成一个ground,作为水底

let ground = BABYLON.Mesh.CreateGround('ground1', 20, 20, 2, scene)let groundMaterial=new BABYLON.StandardMaterial("groundMaterial",scene)
groundMaterial.diffuseTexture=new BABYLON.Texture("1.jpg",scene)
ground.material=groundMaterial

生成水面片,并创建水材质


let water=BABYLON.Mesh.CreateGround('ground1', 20, 20, 2, scene)//生成水let waterialMaterial=new BABYLON.WaterMaterial("WaterMaterial",scene)water.material=waterialMaterial

水材质的样子有点奇怪,接下来我们来调整它的属性

 //设置水面的纹理贴图waterialMaterial.bumpTexture = new BABYLON.Texture("waterbump.png", scene)//设置风力,决定了水波运动速度waterialMaterial.windForce = 30//设置风向xwaterialMaterial.windDirection.x=0.2//设置风向ywaterialMaterial.windDirection.y=0.3//设置水的波浪高度waterialMaterial.waveHeight =1//设置水纹理高度waterialMaterial.bumpHeight = 1//设置波浪的长度waterialMaterial.waveLength = 1//设置波浪运行速度waterialMaterial.waveSpeed=30//设置水的颜色waterialMaterial.waterColor=new BABYLON.Color3(0,0,0.5)waterialMaterial.colorBlendFactor=0//增加地板到水材质中,才能正常显示水waterialMaterial.addToRenderList(ground)waterialMaterial.material = water

展示效果
全部代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template</title><style>* {padding: 0;margin: 0;}body {overflow: hidden;}canvas {width: 100vw;height: 100vh;}</style>
</head><body><canvas id="canvas"></canvas></body></html><script src="./babylon.js"></script>
<script src="./babylonjs.materials.js"></script><script>let engine = new BABYLON.Engine(canvas, true)let scene = new BABYLON.Scene(engine)let camera = new BABYLON.ArcRotateCamera('ArcRotateCamera', 0, 1, 500, new BABYLON.Vector3(0, 0, 0), scene)camera.setTarget(BABYLON.Vector3.Zero())camera.attachControl(canvas, false)camera.lowerRadiusLimit = 10let light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene)engine.runRenderLoop(function () {scene.render()})window.addEventListener("resize", function () {engine.resize()})//生成水底let ground = BABYLON.Mesh.CreateGround('ground1', 512, 512, 32, scene)//生成水底材质let groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene)groundMaterial.diffuseTexture = new BABYLON.Texture("1.jpg", scene)ground.material = groundMaterial//生成水面片let water = BABYLON.Mesh.CreateGround('ground1', 512, 512, 32, scene)//生成水let waterialMaterial = new BABYLON.WaterMaterial("WaterMaterial", scene)water.material = waterialMaterial//设置水面的纹理贴图waterialMaterial.bumpTexture = new BABYLON.Texture("waterbump.png", scene)//设置风力,决定了水波运动速度waterialMaterial.windForce = 30//设置风向xwaterialMaterial.windDirection.x=0.2//设置风向ywaterialMaterial.windDirection.y=0.3//设置水的波浪高度waterialMaterial.waveHeight =1//设置水纹理高度waterialMaterial.bumpHeight = 1//设置波浪的长度waterialMaterial.waveLength = 1//设置波浪运行速度waterialMaterial.waveSpeed=30//设置水的颜色waterialMaterial.waterColor=new BABYLON.Color3(0,0,0.5)waterialMaterial.colorBlendFactor=0//增加地板到水材质中,才能正常显示水waterialMaterial.addToRenderList(ground)waterialMaterial.material = water</script>

码云地址 https://gitee.com/wyYym/babylon

联系方式 QQ:1684430131

babylonJs 水材质相关推荐

UE4材质篇--水材质
一个重要矢量的表达式-Fresnel 定义:菲涅尔(Fresnel) 表达式根据表面法线与摄像机方向的标量积来计算衰减.当表面法线正对着摄像机时,输出值为0.当表面法线垂直于摄像机时,输出值为1.结果 ...
虚幻引擎水材质制作_UE5
ps:先把之前记录的扔上来,事后再补充和整理. 水材质法线颜色:菲涅尔深度模拟法线:通过点乘模拟光影效果叠加在颜色上勾选直射光源的大气太阳光选项后光的方向可以转换为节点中的向量点乘顶点 ...
我的世界手机版javaui材质包_VortexShader1.0水材质包下载_我的世界VortexShader1.0水模组材质包下载 v1.0.0.35545...
水材质包是一款第一人称视角的模拟类游戏,玩家们能够来尝试各种不同的玩法,让你在游戏中创造各种各样不同的景观.游戏中玩家们可以面对许许多多有趣的生物进行互动,也能够逐渐探索这个世界背后的秘密. 水材质包 ...
【UE】简易的水材质
引擎版本:4.26 效果步骤 1. 创建一个材质,命名为"M_Water" 2. 打开"M_Water",将混合模式设为半透明, 光照模式设为表面半透明体积, ...
【Babylonjs】材质
五.材质使用材质可以使你能够覆盖物体网格的颜色和纹理,它们需要在被光线照射下才能被看到.一种材质可以用来覆盖你所希望改变的物体的网格. 对光线的反应不管材质是颜色还是质地,它对光的反应都有不同的方 ...
cr材质库怎么安装_cr5.0安装没有材质库
回答: sketchup材质库怎么安装?sketchup在使用软件的过程中,常常因为设计的需要,需要导入原来软件中没有的材质库,比如:亮光木材.抛光砖以及磨砂玻璃等材质库.那么,sketchup材质库 ...
室外建筑表现3Dmax和vray常用材质参数设置
一．木纹材质调整方法: 1．木纹材质的肌理调整: A．使用过度色通道贴图后加入凹凸通道贴图,使木纹有凹凸感,肌理更明显凹凸通道强度通常为30% B．材质球的高光强度(specular level: ...
A3D8的水–WaterMaterial for Alternativa3D 8
2019独角兽企业重金招聘Python工程师标准>>> 更多内容可看:cls技术站国外牛人写了一个 Alternativa3D 8 的水材质, 本人一向秉着"能偷懒的时 ...
Windows 8 Directx 开发学习笔记（九）材质定义及混合光照效果实现
在真实环境中,同一个物体在不同光源照射下的颜色并不一样,因为物体本身并没有颜色,而是它会反射不同颜色的光.物体对不同颜色光的吸收率.反射率,加上光泽度.透明度等其他物理属性组合在一起,定义了这个物体的 ...

babylonJs 水材质

babylonJs 水材质

babylonJs 水材质相关推荐

最新文章

热门文章