0

我很新BabylonJs，我目前正在边做边学。

我正在尝试插入图像作为场景的背景：

在此处输入图像描述

但是我浏览了整个互联网，但没有描述我如何插入图像作为背景？

如果需要这里是我的代码：

    // Global variables
var canvas, engine, scene, camera,assetsManger;

var CHATROOMS = [];

var CHATCLIENTS = [];
/*
 * Load the scene when the canvas is fully loaded
 */
document.addEventListener("DOMContentLoaded", function () {
    if (BABYLON.Engine.isSupported()) {
        initScene();
        initGame();
    }
}, false);

/**
 * Creates a new BABYLON Engine and initialize the scene
 */
function initScene() {
    // Get canvas
    canvas = document.getElementById("chatCanvas");

    // Create babylon engine
    engine = new BABYLON.Engine(canvas, true);

    // Create scene
    scene = new BABYLON.Scene(engine);

    assetsManger = new BABYLON.AssetsManager(scene);
    // Create the camera
    camera = new BABYLON.TargetCamera("camera", new BABYLON.Vector3(0,4,-10), scene);
    camera.setTarget(new BABYLON.Vector3(0,0,0));
    camera.attachControl(canvas);

    // Create light
    var light = new BABYLON.PointLight("light", new BABYLON.Vector3(0,5,-5), scene);
    engine.runRenderLoop(function () {
        scene.render();
    });
}
function initGame() {
}

使用以下代码在此处输入图像描述：

4

2 回答 2

1

尝试在之前添加以下代码engine.runRenderLoop(function ()。

var ground = BABYLON.Mesh.CreateGround("ground", 25, 25, 25, scene);
//Play around values 25 25 25 to fit to size of scene
var groundMaterial = new BABYLON.StandardMaterial("groundmat", scene);
groundMaterial.emissiveTexture = new BABYLON.Texture("URL_OF_IMAGE", scene);
groundMaterial.emissiveTexture.uScale = 1; //you could try changin this and below value to see replicated image 
groundMaterial.emissiveTexture.vScale = 1;
groundMaterial.emissiveTexture.level = 1; //It is kind of z-index
ground.material = groundMaterial;

更新

var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
groundMaterial.diffuseTexture = new BABYLON.Texture("URL_OF_IMAGE", scene);

为上面的图像生成高度图。（我不确定是否可以为这张图片完成，但值得一试）。您可以检查任何软件或其他东西来创建图像的高度图。

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "URL_OF_HEIGHTMAP_IMAGE", 50, 50, 100, 0, 10, scene, false);
ground = groundMaterial;

让我知道它是否有效。我还没有尝试使用高度图。无法访问任何软件，因此不确定是否可以从上图生成高度图。但是你可以试试。:)

于 2016-01-28T22:48:52.580 回答
0

为了将来参考，您可以使用它Layer来实现这一点，允许您在构造函数中指定图像 URL 并将其作为背景。您还可以将纹理更新为您想要的任何内容（如视频）。

于 2021-11-15T17:00:09.777 回答