Question

我正在阅读babylonjs的教程，而且我一直在把头发拉过很多东西。我是第一个环境教程，我正试图让我的天空盒渲染。假设文件路径是正确的，问题是什么？

var canvas,
    createScene,
    engine;

// Get the canvas element from our HTML below
canvas = document.querySelector("#renderCanvas");
// Load the BABYLON 3D engine
engine = new BABYLON.Engine( canvas, true );

// Here begins a function that we will 'call' just after it's built
createScene = function () {

    var scene = new BABYLON.Scene( engine );

    // this is how to set or change the background color
    // the .clearColor method is used with the new BABYLON.Color3();
    scene.clearColor = new BABYLON.Color3( 0.5, 0.8, 0.5 );
    // there are also preset colors like blue, red, yellow you can add by saying BABYLON.Color3.Blue();

    // ambient color is used to help determine what things will ultimately look like.
    scene.ambientColor = new BABYLON.Color3( 0.3, 0.3, 0.3 );

    // when there is no ambient color on the scene, ambient colors on textures and ambient colors of your objects will have no effect.

    var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
    var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3.Zero(), scene);
    light0.diffuse = new BABYLON.Color3(1, 1, 1);
    light0.specular = new BABYLON.Color3(1, 1, 1);
    light0.groundColor = new BABYLON.Color3(0, 0, 0);

    // skybox
    var skybox = BABYLON.Mesh.CreateBox( 'skyBox', 100.0, scene );
    console.log( skybox );
    var skyboxMaterial = new BABYLON.StandardMaterial('skyBox', scene);
    skyboxMaterial.backFaceCulling = false;
    skybox.material = skyboxMaterial;

    // infanite distance makes the sky box follow the camera's position
    skybox.infiniteDistance = true;

    // here, we remove all light relection from the shape
    skyboxMaterial.diffuseColor = new BABYLON.Color3( 0, 0, 0 );
    skyboxMaterial.specularColor = new BABYLON.Color3( 0, 0, 0 );

    // now we apply the texture to the box
    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture( 'data/images/skybox', scene );
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

    scene.activeCamera = camera;
    scene.activeCamera.attachControl( canvas );

    return scene;
}; // End of createScene function

// -------------------------------------------------------------
// Now, call the createScene function that you just finished creating
var scene;

scene = createScene();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop( function () {
    scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener( 'resize', function () {
    engine.resize();
});

Answer 1

图片的路径错误（或图片不存在，图片名称不正确，不是jpeg等）。

我带了你的playground example，然后重新格式化（在游乐场代码中你只提供了createScene函数;它为你完成了其余的脚手架代码。我还修复了.Zero()语法只是使用new BABYLON.Vector3(0,0,0)（我不知道为什么.Zero()不好，但(0,0,0)是相同的字符数。）

那时它仍然没有做任何事情。然后我改变了路径，找到了游乐场演示图像的工作原理： http://www.babylonjs-playground.com/#1XQWKQ#9

所以＆＃34;数据/图像/天空盒＆＃34;不是你的图像的地方。请记住，您必须通过Web服务器提供服务。如果仍然无法通过提供完整路径尝试排除故障（请参阅http://www.babylonjs-playground.com/#1XQWKQ#10示例）。如果他们在另一台服务器上，那么你可能会遇到CORS问题（最好的解决方案：将它们保存在与html文件相同的服务器上！）。

来自地狱的巴比伦天空盒

1 个答案: