Babylonjs загружают два изображения поверх друг друга, второе изображение прозрачно

Question

Я использую babylonjs для загрузки двух изображений. Один из них представляет собой стандартное jpg-изображение, а второе - это png-изображение с прозрачным фоном. Когда я загружаю оба изображения, то изображение jpg не отображается через область, которая должна быть прозрачной. Кто-нибудь знает, как я могу это сделать.

var createScene = function() { 
    var scene = new BABYLON.Scene(engine); 

    //Create a light 
    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(-60, 60, 80), scene); 

    //Create an Arc Rotate Camera - aimed negative z this time 
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI/2, 1.0, 210, BABYLON.Vector3.Zero(), scene); 
    camera.attachControl(canvas, true); 

    //Creation of a repeated textured material 
    var materialPlane = new BABYLON.StandardMaterial("texturePlane", scene); 
    materialPlane.diffuseTexture = new BABYLON.Texture("images/art.jpg", scene); 
    //materialPlane.emissiveTexture = new BABYLON.Texture('images/scodix1.png', scene); 
    //materialPlane.useAlphaFromDiffuseTexture 
    materialPlane.specularColor = new BABYLON.Color3(0, 0, 0); 
    materialPlane.backFaceCulling = false; //Allways show the front and the back of an element 

    var spotPlain = new BABYLON.StandardMaterial("texture", scene, true); 

    spotPlain.emissiveTexture = new BABYLON.Texture("images/scodix1.png", scene); 
    spotPlain.anisotropicFilteringLevel = 50; 
    //materialPlane.emissiveTexture = new BABYLON.Texture('images/transparent.png', scene); 
    //materialPlane.useAlphaFromDiffuseTexture 
    spotPlain.specularColor = new BABYLON.Color3(0, 0, 0); 
    spotPlain.backFaceCulling = false; //Allways show the front and the back of an element 

    //Creation of a plane 
    //var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene); 
    var plane = BABYLON.MeshBuilder.CreatePlane("plane", { 
    width: 261, 
    height: 153 
    }, scene); 
    plane.rotation.x = Math.PI/2; 
    plane.material = materialPlane; 
    plane.material = spotPlain; 

    return scene; 
}; 

var scene = createScene(); 
engine.runRenderLoop(function() { 
    scene.render(); 
}); 

Answer 1

вы перезаписать материал здесь: plane.material = materialPlane; plane.material = spotPlain;

Предлагаю создать два самолета