一个完整的天空需要什么？
1 .时间变化，太阳升起落下，太阳的镜头光晕
2 .晚上有月亮
3 .远处要和地平线连接
4 .增加浑浊度，大气环境
5 .天生的云
1 .这里之前做动态地形的时候，有用天空的动态地形来作为大片的云
2 .这里说的不是那种小的云朵，而是连片的像山一样的云
6 .地平线
先结合天空盒做一下，看原来的天空盒已经可以实现到什么效果了
1 .找不到原来那个文档了，记得是可以让当前底面很好的和天空盒融合起来，现在找不到了
材质的属性
1 .inclination：定义太阳倾角，间隔为[-0.5,0.5]。当倾角不为0时，太阳被称为“倾向”。0的时候太阳在头顶,0.5(初生),-0.5(落下)
手动设置太阳的位置
skyMaterial.useSunPosition = true
skyMaterial.sunPosition = new BABYLON.Vector3(0, 100, 0);
image.png
2 .luminance：定义天空的整体亮度，间隔为[0,1]。0最亮，1最暗。这个是和太阳一起来的
image.png
3 .turbidity：定义雾的数量（散射），与大气中的分子相对。效果就是值越大，看到的太阳散射越大，太阳越不清楚。值越小，看到的太阳越清楚，清楚的有点像月亮
image.png
4 .cameraOffset.y：定义用于获取地平线偏移的偏移向量。设置地平线的高度，0以下会完全是地下，这个时候也需要调整太阳，但是太阳不是最大只能-50么
5 .rayleigh:定义天空外观（灯光强度）0的时候就是黑夜.甚至这个属性可以模拟夜晚逐渐亮起来的月亮
6 .mieDirectionalG:根据Mie散射理论定义雾粒子的数量。https://baike.baidu.com/item/%E7%B1%B3%E6%B0%8F%E6%95%A3%E5%B0%84/3654256
7 .mieCoefficient:定义影响特性的区间[0，0.1]中的系数。方向性。这俩参数看起来还是用来调节太阳的散射的
image.png
8 .azimuth:以[0,1]为间隔定义太阳方位角。方位角是水平平面上两个方向之间的角度
对象方向和参考方向。
<!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="./fur.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 light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene)
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(-3, 0, -42), scene)
camera.setTarget(BABYLON.Vector3.Zero())
camera.attachControl(canvas, true)
let material=new BABYLON.TriPlanarMaterial('terrainMaterial',scene)
// 一种新的定义材质的方式
material.sprcalurPower=64
material.diffuseTextureX=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f4.png')
material.diffuseTextureY=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f4.png')
material.diffuseTextureZ=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f4.png')
// 各个方向的凹凸贴图
material.normalTextureX=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f7.png')
material.normalTextureY=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f7.png')
material.normalTextureZ=new BABYLON.Texture('http://127.0.0.1:8080/source/image/f7.png')
let ground=BABYLON.Mesh.CreateGroundFromHeightMap('ground','http://127.0.0.1:8080/source/image/f10.png',100,100,100,0,10,scene,false)
ground.position.y=-2
ground.material=material
// 天空盒部分
let skyBoxMat=new BABYLON.SkyMaterial('skyMaterial',scene)
skyBoxMat.backFaceCulling=false
let skyBox=BABYLON.Mesh.CreateBox('skyBox',1000,scene)
skyBox.material=skyBoxMat
// 现在已经有了天空，默认是傍晚降落.所以因为用了这个材质，所以整个世界也就有了东西南北
const setSkyConfig=function(prop,from,to){
let keys=[
{frame:0,value:from},
{frame:100,value:to}
]
let animation=new BABYLON.Animation('animation',prop,100,BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT)
animation.setKeys(keys)
scene.stopAnimation(skyBox)
// 先停止skyBox里面的所有动画
scene.beginDirectAnimation(skyBox,[animation],0,100,false,1)
}
// 材质动画，本来是只要改变某个材质，就能改变场景内的样式，但是这里把属性的变化加一个过度，也就是动画。这里其实比较重要的是，一个材质的某个属性，也可以加动画。之前以为仅仅是
// 位置，缩放，颜色这些很刻板的变化属性
// 这里还有一个更骚的操作，就是直接监听dom时间，然后触发响应。键盘这里不用在去调用babylon原来给的了
window.addEventListener('keydown',function(evt){
switch(evt.keyCode){
case 49:setSkyConfig('material.inclination',skyBoxMat.inclination,0);break;
case 50:setSkyConfig('material.inclination',skyBoxMat.inclination,-0.5);break;
case 51:setSkyConfig('material.luminance',skyBoxMat.luminance,0.1);break;
case 52:setSkyConfig('material.luminance',skyBoxMat.luminance,1.0);break;
case 53: setSkyConfig("material.turbidity", skyBoxMat.turbidity, 400); break; // 5
case 54: setSkyConfig("material.turbidity", skyBoxMat.turbidity, 1); break; // 6
case 55: setSkyConfig("material.cameraOffset.y", skyBoxMat.cameraOffset.y, 50); break; // 7
case 56: setSkyConfig("material.cameraOffset.y", skyBoxMat.cameraOffset.y, 0); break; // 8
}
})
// 做一个不会掉下地板的小人视野，来看世界场景内的树，太阳。但是随便就遇到了bug
scene.gravity=new BABYLON.Vector3(0,-0.98,0)
scene.collisionsEnabled=true
camera.checkCollisions=true
camera.ellipsoid=new BABYLON.Vector3(1,1,1)
camera.applyGravity=true
ground.checkCollisions=true
console.log()
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>
其他没用上的属性
1 .checkReadyOnEveryCall:指定是否应在每次调用时检查就绪状态
2 .customShaderNameResolve:自定义回调有助于覆盖材质中使用的默认着色器。(这个看起来是使用新的shader,给当前的天空)
3 .depthFunction:指定应使用的深度函数。0表示默认引擎功能
4 .distance:根据活动场景摄影机定义太阳的距离。中午的时候太阳应该大一点
5 .inspectableCustomProperties:可检查的自定义属性列表（由检查员使用）
6 .separateCullingPass:指定是否应有单独的消隐过程
网友评论