天空图像
创建天空盒需要六个jpeg图像，所有这些图像应该是正方形且尺寸相同，最好是2的幂，例如1024px x 1024px。每个图像的名称应该有一个公共部分，后跟_px，_nx，_py，_ny，_pz或_nz给出的位置，对应于它是在正（p）还是负（n）x，y或z轴上。
示例图片：
请注意，图像在框的边缘无缝匹配：
可以通过搜索天空盒图像在网络上找到Skybox图像。通常，这些是网箱形式的单个图像，您需要将它们分成单独的图像并保存每个图像。
我自己嫌比较麻烦直接从Babylon上拽的，Babylon有六个，只要改改文件名就OK了
https://www.babylonjs-playground.com/textures/
图片文件名（就是下面的六个）
一般地，图像以下列方式引用
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("图片文件夹名/图片相同的前缀名", scene);
可运行完整代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<title>天空盒</title>
<body>
<style>
html,
boby {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#canvas {
width: 100%;
height: :100%;
touch-action: none;
}
</style>
</body>
</head>
<canvas id="canvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function() {
let canvas = document.getElementById('canvas');
let engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene);
light.diffuse = new BABYLON.Color3(1, 0, 0);
var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {
size: 1000.0
}, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(
"https://www.babylonjs-playground.com/textures/TropicalSunnyDay", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
return scene;
}
let scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
window.addEventListener('resize', function() {
engine.resize();
});
});
</script>
</html>
效果：
版权声明：本文为u013172864原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。