前面我们学习了如何画一堆房子(如下图),显然这单调的绿色大地,看上去效果并不好。
babylon.js中,可以用图片模拟出地势高低不同的效果,比如下面这张图片:
颜色越深的地方,表示地势越低(即:盆地),而颜色越浅的地方,地势越高(即:高山),可以参考下面的代码:
const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 200, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(4, 1, 0)); //利用图片模拟地势高低不同的groud const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "../assets/img/villageheightmap.png", { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }); return scene; }
在线地址:https://yjmyzz.github.io/babylon_js_study/day07/01.html
再给它加上点草皮贴图:
代码如下:
const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 200, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(4, 1, 0)); const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "../assets/img/villageheightmap.png", { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }); //给largeGround加上材质贴图 const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat"); largeGroundMat.diffuseTexture = new BABYLON.Texture("../assets/img//valleygrass.png"); largeGround.material = largeGroundMat; return scene; }
在线地址:https://yjmyzz.github.io/babylon_js_study/day07/02.html
看上去有点模糊,我们还可以再贴一层,将山谷底部的区域,贴1块相对清晰点的图:
const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 30, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(4, 1, 0)); const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "../assets/img/villageheightmap.png", { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }); const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat"); largeGroundMat.diffuseTexture = new BABYLON.Texture("../assets/img/valleygrass.png"); largeGround.material = largeGroundMat; largeGround.position.y = -0.001; //再画一块相对较小的谷底区域 const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 24, height: 24 }); //将谷底贴个更清晰的图片 const groundMat = new BABYLON.StandardMaterial("groundMat"); groundMat.diffuseTexture = new BABYLON.Texture("../assets/img/villagegreen.png"); groundMat.diffuseTexture.hasAlpha = true; ground.material = groundMat; return scene; }
在线地址:https://yjmyzz.github.io/babylon_js_study/day07/03.html
再将先前画好的房屋导入:
const createScene = () => { const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 30, new BABYLON.Vector3(0, 0, 0)); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(4, 1, 0)); const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "../assets/img/villageheightmap.png", { width: 150, height: 150, subdivisions: 20, minHeight: 0, maxHeight: 10 }); const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat"); largeGroundMat.diffuseTexture = new BABYLON.Texture("../assets/img/valleygrass.png"); largeGround.material = largeGroundMat; largeGround.position.y = -0.001; const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 24, height: 24 }); const groundMat = new BABYLON.StandardMaterial("groundMat"); groundMat.diffuseTexture = new BABYLON.Texture("../assets/img/villagegreen.png"); groundMat.diffuseTexture.hasAlpha = true; ground.material = groundMat; //导入村庄里的房屋 BABYLON.SceneLoader.ImportMeshAsync("", "../assets/glb/", "village.glb"); return scene; }
在线地址:https://yjmyzz.github.io/babylon_js_study/day07/04.html
问题很明显:village.glb中自带了1个绿色的ground,得想办法把它去掉,好在加载glb文件里,可能指定回调函数
BABYLON.SceneLoader.ImportMeshAsync("", "../assets/glb/", "village.glb").then((result) => { //把village.glb中自带的绿色ground设置为不可见 console.log(result); var _ground = result.meshes[1]; _ground.isVisible = false; });
在线地址:https://yjmyzz.github.io/babylon_js_study/day07/05.html
这样就行了,可能有同学会问:
1. 你咋知道meshes[1] 就是这个绿色的ground?
2. 你咋知道有isVisible属性,可以让它消失?
最简单的办法,就是console.log大法:
当然还可以用sandbox 或 playground 在线平台进行分析,大家可以自行试试。此外Mesh对象的各种属性,官方文档上也有详细说明
参考文档:
https://doc.babylonjs.com/features/introductionToFeatures/chap5/hills
标签:const,largeGroundMat,babylon,largeGround,笔记,js,camera,new,BABYLON From: https://www.cnblogs.com/yjmyzz/p/babylon_js_study_7.html