webgl - babylonjs 天空盒纹理未显示答案

【问题标题】：webgl - babylonjs skybox texture not showingwebgl - babylonjs 天空盒纹理未显示
【发布时间】：2020-05-25 23:23:41
【问题描述】：

我对使用 babylonjs 在 webgl 中制作的天空盒的纹理有疑问。我的整个项目都在网络服务器上，一切似乎都写得很好，但是应该是天空盒的盒子没有显示纹理 - 外面和里面都是黑色的

代码：

var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("skybox/skybox", 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;

【问题讨论】：

我在使用 .png 图像时遇到了类似的问题。我希望使用基础图像，但我认为如果不支持 .png，基础可能也不支持。真可惜。
是的，只支持 .jpg 图像，真可惜。 if (!isEnv && !isDDS && !extensions) { extensions = ["_px.jpg", "_py.jpg", "_pz.jpg", "_nx.jpg", "_ny.jpg", "_nz.jpg"]; }

标签： textures webgl skybox babylonjs

【解决方案1】：

我怀疑你在磁盘上的目录结构对于天空盒不正确。

如果你按照巴比伦游乐场的例子来制作天空盒 http://www.babylonjs-playground.com/#3458P（然后下载完整工作示例的 zip）

您可以在您的情况下看到“skybox/skybox” 表示一个名为“skybox”的目录，其中包含 6 个天空盒文件，即

“skybox”目录包含名为
- skybox_nx.jpg
- skybox_px.jpg
- skybox_ny.jpg
- skybox_py.jpg
- skybox_nz.jpg
- skybox_pz.jpg

【讨论】：

【解决方案2】：

首先检查你的雾，它不会让你看到天空盒，试着去掉它。在我的情况下是：我复制了代码，它对我的场景来说太大了，我没有注意到变化。然后我减少

    var skybox = BABYLON.Mesh.CreateBox("skyBox", 800.0, scene);

到

    var skybox = BABYLON.Mesh.CreateBox("skyBox", 52.5, scene);

问题解决了

【讨论】：

我无法表达这为我节省了多少。谢谢。

【解决方案3】：

代码似乎正确。如果纹理加载正确，您可以使用 F12 栏检查吗？

【讨论】：

【解决方案4】：

我遇到了同样的问题。只需添加一个免费的相机即可解决此问题：

var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 5), scene);
scene.activeCamera = freeCamera;

你应该看到你的天空盒。谢谢

【讨论】：