使用babylonjs显示图像

Question

我是 Babylonjs 的新手，我想使用 BabylonJs 显示/显示图像，而且我想使用带有碰撞检测的键盘（如左箭头键、右箭头键、上箭头键和下箭头键）移动图像，我也想要禁用所有鼠标事件。

我写了下面的代码来显示图像，但我认为这不是正确的方法..

  var playerMaterial = new BABYLON.StandardMaterial("ground", scene);
    playerMaterial.diffuseTexture = new BABYLON.Texture("/images/mail.png", scene);
    playerMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    player.material = playerMaterial;
    player.position.y = 1;
    player.position.x = -84;
    player.size = 20;

有人可以帮我怎么做吗（如果你能分享源代码，可能会有更好的帮助）？

谢谢拉维兰詹
​

Answer 1

假设您还有相机和光源，您的代码看起来基本上是正确的。这里是一个游乐场入口。

并且，对于后代，这是该代码：

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("textures/grass.jpg", scene);
materialPlane.specularColor = new BABYLON.Color3(0, 0, 0);
materialPlane.backFaceCulling = false;//Allways show the front and the back of an element

//Creation of a plane
var plane = BABYLON.Mesh.CreatePlane("plane", 120, scene);
plane.rotation.x = Math.PI / 2;
plane.material = materialPlane;

我从他们的一个演示开始，然后删除了大部分内容以获得最小的示例。我留在backFaceCulling = false（否则图像只能从一个方向可见），并添加到您的specularColor设置中。

另一种方法是将 替换diffuseTexture为emissiveTexture：

materialPlane.emissiveTexture = new BABYLON.Texture("textures/grass.jpg", scene);

然后你可以注释掉灯光，它仍然可见。（事实上​​，如果你让光线对着它，它就会曝光过度。）

（我建议为您的键盘控制和碰撞检测问题开始一个新问题。或者浏览巴比伦示例和教程视频。）