使用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

假设您还有一个相机和光源，那么您的代码看起来基本上是正确的。这是a playground entry。

对于后人来说，代码是这样的：

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设置中。

另一种方法是用emissiveTexture替换diffuseTexture

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

然后，您可以注释掉灯光，但它仍然可见。(事实上，如果让灯光指向它，它将被过度曝光。)

(我建议您针对键盘控制和碰撞检测问题开始一个新问题。或者学习巴比伦示例和教程视频。)