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>
网友评论