Javascript threejs-显示二维图像

另一个问题。我基本上是想在按下一个键时在屏幕上显示2D图像。我已经到处搜索过了，但我找不到一种方法来让我的图像正确显示，有些方法根本无法使用。有时我会设法让图像显示出来，它要么显示在我的3d环境容器后面（html格式），要么导致整个3d窗口消失，即使图像不比它大。 我还没有真正弄乱图像，所以我不确定我需要什么。

---

我不想在3D空间中显示图像，只想在屏幕上弹出一个图像，比如菜单或其他东西。

你也可以使用

THREE.Sprite

，非常容易实现，即使它是在3D空间中创建的，它也总是面向相机

下面是一个来自的快速实现示例：

记住缩放精灵以匹配您的图像尺寸（当然，除了将

camera.position.z

设置为足够高之外）：

---

请添加您的代码您可以在场景中添加一个平面并在按键上更新纹理Hey man，尝试了您的解决方案将精灵添加到场景中但仍然看不到，有什么建议吗？@ToBe如果您发布一个JSFIDLE，如果您的精灵看起来没有渲染，我可以帮助您，它可能只是1x1 px大。创建

sprite

sprite对象后，尝试设置其大小（即

sprite.scale.set（128128,1）；

）。“默认值为Vector3（1,1,1）”（）。精灵的大小如果1,1,1也可以作为常规可见（除非禁用了大小衰减），则它可能与渲染器设置相关，例如摄影机设置（fov）和旋转。如果相机指向图像的反面（表示图像在后面），则它将无法工作。尝试将相机放置在离图像+z“远”的位置，假设图像位置为（0,0,0），比方说camera.position.set（0,0,10）；确保摄影机旋转也设置为0,0,0，以指向负z轴。

var map = new THREE.TextureLoader().load( "sprite.png" );
var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff } );
var sprite = new THREE.Sprite( material );
scene.add( sprite );

sprite.scale.set(imageWidth,imageHeight,1);