javascript - threejs - 显示二维图像

标签 javascript image three.js

另一个threejs问题。当我按下一个键时,我基本上是想在屏幕上显示一个二维图像。我四处搜索,但找不到让我的图像正确显示的方法,而且有些方法我根本无法工作。在我确实设法显示图像的时候,它要么显示在我的 3d 环境容器后面(在 html 中),要么导致整个 3D 窗口消失,即使图像并不比它大。 我并没有真正弄乱图像,所以我不确定我需要什么。 我并不是要在 3D 空间中显示图像,只是要在屏幕上弹出图像,例如菜单或其他内容。

最佳答案

您还可以使用 THREE.Sprite,非常容易实现,即使它是在 3D 空间中创建的,它也始终面向相机。

这是来自 documentation 的快速实现示例:

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 以匹配您的图像尺寸(当然,除了将 camera.position.z 设置为足够高的值之外):

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

关于javascript - threejs - 显示二维图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36668836/

相关文章:

javascript - 禁用链接几秒钟

excel - 插入图片到Excel VBA,方法图片失败

Javascript 精度缓解

javascript - 发射光源不影响其他物体的着色 Three.js

javascript - 在 jsx 中呈现列表时的多次返回

javascript - 同一字段中的数字和文本

javascript - 在文本框的按键事件上更新 DIV 的 InnerHTML

bash - 如何从 gdalinfo 输出中提取特定信息?

jquery - 如何使用 jQuery 单击图像来查找图像的名称?

three.js - 如何使用 THREE.js 围绕行星旋转一些卫星?