1

我正在阅读 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();
});
4

1 回答 1

1

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

我拿了你的操场示例，然后重新格式化（在操场代码中，你只给出createScene函数；它为你完成其余的脚手架代码。我还修复了.Zero()它抱怨的语法错误，只需使用new BABYLON.Vector3(0,0,0) （我不知道为什么.Zero()很糟糕，但(0,0,0)字符数相同。）

那时它仍然什么也没做。然后我改变了找到游乐场演示图像的路径： http ://www.babylonjs-playground.com/#1XQWKQ#9

所以“数据/图像/天空盒”不是您的图像所在的位置。请记住，您必须通过 Web 服务器为它们提供服务。如果它仍然不起作用，请尝试通过提供完整路径进行故障排除（有关示例，请参见http://www.babylonjs-playground.com/#1XQWKQ#10 ）。如果它们在另一台服务器上，那么您可能会遇到 CORS 问题（最好的解决方案：将它们与您的 html 文件放在同一台服务器上！）。

于 2015-06-15T10:10:30.707 回答