javascript - Three.js TextGeometry Wordwrap-arrastre como grupo

Question

Estoy trabajando en un sitio panorámico y quiero poder agregar una etiqueta de texto que se pueda arrastrar a la ubicación correcta. Es un panorama esférico por lo que vale :) Los próximos 4 párrafos son una buena información en general, especialmente si estás atrapado como yo, pero la verdadera pregunta comienza debajo de +++

Originalmente traté de usar el truco normal de lienzo, pero el lienzo era demasiado grande en sentido vertical. Por ejemplo, si quisiera decir "Hello World" que podría tener 120 px de ancho y 15 px de alto, pero el lienzo "transparente" tendría 150 px de alto, lo que superpondría a otros objetos de texto, pero no al panorama.

El otro problema era si quería que fuera más que una sola línea, así que, por ejemplo, si quería decir "¿Viste esta buena transmisión?" eso podría dividirse en 2-3 líneas. Después de jugar con él, obtuve palabras para trabajar tanto en el lienzo como en los sprites, pero finalmente el problema del lienzo me mató.

Después de eso probé Sprites, que era mejor sobre no superponer visualmente los otros objetos de texto, pero el tamaño del lienzo todavía era demasiado grande, lo que creaba problemas en el onMouseOver y donde si estaba demasiado cerca era probable que comenzaras a arrastrar el incorrecto. , o si solo quería girar / inclinar la cámara para ver el panorama, puede hacer clic inadvertidamente en el lienzo de gran tamaño.

Lo intenté varias veces para que TextGeometry funcionara, pero siempre obtuve este error "THREE.TextGeometry: el parámetro font no es una instancia de THREE.Font". hasta que finalmente descubrí que la API había cambiado en la última versión, lo que hacía inútiles todos los ejemplos en la web. Después de enterarme del cambio en la API, pude hacerlo funcionar, aquí hay un violín para cualquiera que lo necesite: https://jsfiddle.net/287rumst/1/

++++++++++

En mi aplicación, este ejemplo anterior usando TextGeometry funciona bien, pero solo cuando es una sola línea. Cuando recorro y hago la siguiente línea, se convierte en un objeto extra que arrastras individualmente, lo que se convierte en un problema cuando quiero poder hacer clic en él para editar el texto, el tamaño, el color, etc.

No estoy seguro de qué hacer con el problema de arrastrar todas las líneas como un grupo. Esperaba que funcionara cuando agregué el grupo a la matriz de objects , que es como lo hice antes con las líneas, pero no funciona, así que pensé que sería genial si pudiera envolverse en una caja transparente con las caras presionadas contra el costado y luego use la caja transparente como la manija para arrastrar.

Aquí está el ejemplo de cómo funciona con wordwrap: https://jsfiddle.net/ajhalls/73dhu192/

Los problemas pendientes arrastrarían al grupo y provocarían que se enfrentara a la cámara desde el centro del grupo, en lugar de la esquina al ser arrastrados. group.geometry.center() Hubiera pensado que funcionaría, como lo hace cuando es una sola línea, pero nuevamente tiene problemas.