岩浆材料

作者: skoll | 来源:发表于2022-01-02 18:47 被阅读0次

岩浆材料
【亲子】2022年环球自然日展板准备材料2
岩浆
岩浆
《岩浆》
岩浆
岩浆
第一百六十八章初雪与珍妮
岩浆石头
岩浆蛋糕

1 .虽然这里是岩浆，但是这里要学会的仅仅是这种形式，如果足够熟练的话，通过材质和一些属性，能实现的效果可不仅仅是岩浆
2 .源文件地址 https : //github.com/BabylonJS/Babylon.js/blob/master/dist/preview%20release/materialsLibrary/babylon.lavaMaterial.js
3 .就比如这个岩浆，感觉完全可以和水一样，之前的水好像都没有水花，浪打起来的时候，而且浪的实现也不是有节奏的，感觉都不如sin函数实现的好.
4 .看起来这个好像还能实现不同颜色的。
5 .一个正常的岩浆图，开了点云之后，可以实现类似于像素，可以说只要控制好点云粒子的大小，什么都可以里面变像素风

截屏2021-12-30 下午10.26.54.png
6 .如果换别的图好像还不行，纹理那里好像会渲染黑色的上来，岩浆里面是可以的，但是别的就很违和了

截屏2021-12-30 下午10.33.54.png

截屏2021-12-30 下午10.32.13.png

截屏2021-12-30 下午10.36.19.png

但是绿的和鬼一样,又有点像鬼吹灯里面的盗墓场景
1 .漫反射纹理决定岩浆的颜色，噪波纹理决定岩浆的变形
2 .海浪那个为啥不用这个呢。
3 .默认情况下，材质受灯光影响。如果您愿意，可以依靠 unlit 属性取消此操作。

全部代码

<!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="./fire.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, 100, BABYLON.Vector3.Zero(), scene);
                camera.attachControl(canvas, true);
                
                var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

                let ground=new BABYLON.Mesh.CreateGround('ground',500,500,100,scene)

                let lavaMaterial=new BABYLON.LavaMaterial('lave',scene)
                // lavaMaterial.diffuseTexture=new BABYLON.Texture('http://127.0.0.1:8080/source/image/lave1.jpg')

                lavaMaterial.diffuseTexture=new BABYLON.Texture('http://127.0.0.1:8080/source/image/lave3.jpg')
                lavaMaterial.noiseTexture=new BABYLON.Texture('http://127.0.0.1:8080/source/image/lave1noise.png')
                lavaMaterial.speed=0.2
                //岩浆滚动的速度<感觉这个速度大小正好

                // 在加一层颜色，岩浆自然就是红色了,这里实验草，我给他来一个绿色的
                lavaMaterial.fogColor=new BABYLON.Color3(0, 1, 0.38)
                lavaMaterial.unlit = true;

                ground.material=lavaMaterial
        

                
                scene.debugLayer.show();


                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>