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;

我建议创建两架飞机

Babylonjs在彼此顶部加载两个图像，第二个图像是透明的

1 个答案: