ThreeJS-如何以实际大小显示图像精灵?

时间:2018-07-01 14:43:59

标签: javascript button three.js size sprite

我正在尝试为我的3D环境创建一个可单击的按钮。 该连接将是一个.PNG图片,并作为精灵加载到ThreeJS中。

Example button

我已经成功通过将精灵附加到相机本身来将精灵固定在屏幕上的某个位置,并通过在加载精灵材质时使用:“ depthTest:false”将其显示在对象顶部。

现在,我希望以其原始大小显示按钮,即50 x 50像素。 不幸的是,我无法使用Sprite.scale.set()使其正确。结果变得模糊。

我将如何去做这样的事情?

var Loader = new THREE.TextureLoader();
var SMap_001 = Loader.load("button.png");
var SMat_001 = new THREE.SpriteMaterial({
  map: SMap_001,
  depthTest: false
});
var Sprite_001 = new THREE.Sprite(SMat_001);
Sprite_001.scale.set(0.1, 0.1, 1);
camera.add(Sprite_001);
Sprite_001.position.set(0, -0.2, -2);

上面是我加载精灵时的代码示例。

谢谢!

0 个答案:

没有答案