babylonjs - 使用 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环境。

另一种方法是替换 diffuseTexture与 emissiveTexture :

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

然后你可以注释掉灯光，它仍然是可见的。 (事实上​​，如果你让光线指向它，它就会曝光过度。)

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