Three.js TextGeometry Wordwrap - 拖动为组

时间:2016-03-25 16:51:01

标签: javascript three.js

我正在使用全景网站,希望能够添加可以拖动到正确位置的文本标签。这是一个值得的球形全景:)接下来的4段是一般的好信息,特别是如果你像我一样被卡住,但真正的问题开始于+++以下

我最初尝试使用常规画布技巧,但画布垂直太大。例如,如果我想说'#34; Hello World"这可能是120px宽和15px高,但是"透明"画布高150像素,与其他文字对象重叠,但不是全景。

另一个问题是,如果我希望它不只是一行,那么例如,如果我想说"你看到这个很酷的流吗?"可以分成2-3行。玩完之后,我在画布和精灵上进行了文字处理,但最终画布问题为我杀了它。

之后我尝试了Sprites,最好不要在视觉上与其他文本对象重叠,但是画布大小仍然太大而在onMouseOver交叉处产生问题,如果它太靠近在一起你很可能开始拖动错误的一个,或者如果你只想平移或倾斜相机以查看全景,你可能会无意中点击超大的画布。

我多次尝试使TextGeometry工作,但总是得到这个错误" THREE.TextGeometry:font参数不是THREE.Font的实例。"直到我终于发现最新版本中的API发生了变化,这使得网络上的所有示例变得毫无用处。在我发现API更改后,我能够让它工作,对于需要它的任何人来说,这是一个小提琴:https://jsfiddle.net/287rumst/1/

++++++++++

在我的应用程序中,使用TextGeometry的前一个示例运行得很好,但仅限于单行。当我循环并完成下一行时,它会成为一个单独拖动的额外对象,当我希望能够单击它来编辑文本,大小,颜色等时,这就成了一个问题。

我不知道如何处理将所有行作为一组拖动的问题。当我将组添加到objects数组时,我希望它能够正常工作,这就是我之前用线条做的事情,但是它不起作用,所以我认为如果可以的话会很好被包裹在一个透明的盒子里,面朝下压在一边,然后用透明的盒子作为拖动手柄。

以下是使用wordwrap的示例:https://jsfiddle.net/ajhalls/73dhu192/

突出的问题是拖动组,并使其从组中心面向摄像机,而不是拖动时的角落。 group.geometry.center()我原本认为会有效,就像单行一样,但又有问题。

0 个答案:

没有答案