javascript - 如何将标签添加到 THREE.Mesh？

Question

目标是在将鼠标悬停在网格上时将 Three.Mesh 名称显示为标签。我们如何在 Three.js 中做到这一点

谁能给个示例代码？

Answer 1

接受挑战!

工作代码示例位于: http://stemkoski.github.com/Three.js/Mouse-Tooltip.html

这个目标似乎有三个主要步骤，每个步骤我都分解成较小的示例程序。

(1) 判断鼠标指向哪个场景元素。请参阅:http://stemkoski.github.com/Three.js/Mouse-Over.html

(2) 将要显示的文本呈现为图像(为此我使用了 Canvas 元素)。请参阅:http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

(3) 在鼠标指针的位置绘制一个包含第 (2) 部分中的图像的 Sprite 。请参阅:http://stemkoski.github.com/Three.js/Mouse-Sprite.html

所有这些示例(以及更多)都是我在 http://stemkoski.github.com/Three.js/ 上不断增加的介绍性示例(带有详细注释)集合的一部分。 ，其中我试图通过一系列最小示例展示 Three.js 的可能性。

此外，请注明出处:第 (1) 和 (3) 部分基于 MrDoob 在他的 github 页面上的一些示例，特别是交互式立方体示例:http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html