babylonJs 水材质

最新推荐文章于 2024-06-07 11:43:30 发布

杨一鸣d

最新推荐文章于 2024-06-07 11:43:30 发布

阅读量1.2k

点赞数

分类专栏： babylon js 文章标签： webgl

本文链接：https://blog.csdn.net/TMBKK/article/details/109913666

版权

babylon js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 = 10

let 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


    //设置风向x
    waterialMaterial.windDirection.x=0.2

    //设置风向y
    waterialMaterial.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 = 10

    let 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


    //设置风向x
    waterialMaterial.windDirection.x=0.2

    //设置风向y
    waterialMaterial.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

杨一鸣d

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
babylonJs 水材质

babylonJs 水材质babylonjs 3.0(及以上提供了水材质),我们可以通过代码实现特别好看的水材质.需要单独导入特殊材质文件,materials.js(最后会提供源代码)<script src="./babylon.js"></script><script src="./babylonjs.materials.js"></script>2.js...
复制链接

扫一扫

专栏目录