BabylonJs 场景背景图片答案

【问题标题】：BabylonJs scene background imageBabylonJs 场景背景图片
【发布时间】：2021-11-16 01:00:09
【问题描述】：

我对@987654325@ 很陌生，我目前正在边做边学。

我正在尝试插入一张图片作为我的场景的背景：

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

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

    // 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() {
}

使用下面的代码:

【问题讨论】：

标签： javascript babylonjs

【解决方案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;

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

【讨论】：

好的，但是背景似乎是 2d 的，这让地面看起来很有趣，我在我的问题中发布了它
哦，所以你想把上面上传的图片作为背景吗？然后用移动的物体构建你的游戏？
您还可以在教程中查看 Skybox，并创建一个类似于 Skybox 的环境，其中 3D 图像作为向内的墙壁，以 capet 作为地面。 2 美分
@MarcRasmussen 它是否适用于高度图？还是 3d 图片天空盒？

【解决方案2】：

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

【讨论】：