[x3d-public] Documentation in X3D, Specifications in X3D

[John Carlson]

Now the question is, can Text take multiple fonts for displaying a single
text?  Do we want this?

On Mon, Jul 28, 2025 at 11:08 AM John Carlson <yottzumm at gmail.com> wrote:

> Maybe some could try this prompt generated by AI:  maybe expand it to
> create a PROTO:
>
> You are asking about a very advanced and complex feature for X3D. Native
> X3D specifications do not include nodes for rich text editing, such as
> multi-line selection, cut, copy, and paste, directly within the 3D scene.
>
> The example you've pointed to, pp3.x3d, demonstrates a sophisticated,
> custom-built solution that simulates this functionality using a combination
> of sensors, scripts, and programmatic manipulation of the scene graph. It
> is not an "out-of-the-box" feature but rather a scripted application
> running inside the X3D environment.
>
> Here is a breakdown of how such a system is built, based on the techniques
> used in advanced examples like the one you referenced.
> The Concept: Building a Text Editor from Scratch in 3D
>
> To achieve editable 3D text, you must essentially recreate the logic of a
> text editor using X3D's event handling and scripting capabilities. This
> involves capturing all user input (keyboard and mouse) and using a script
> to manually update the text geometry and appearance to reflect typing,
> selection, and other actions.
> Core Components of the Solution
>
>    1.
>
>    *Input Sensing:* The foundation of this system is capturing user input.
>    -
>
>       *Keyboard Input*: A <KeySensor> node is used to capture every key
>       pressed by the user. Its keyPress events are sent to a script for
>       processing.
>       -
>
>       *Mouse Input*: A <PlaneSensor> or <TouchSensor> is placed over the
>       text area. This sensor tracks the mouse's position when the user clicks and
>       drags, which is essential for determining the start and end points of a
>       text selection.
>       2.
>
>    *Scripting (The "Brain")*: A central <Script> node, written in
>    JavaScript (ECMAScript), is the core of the editor. This script receives
>    events from the sensors and performs all the logic:
>    -
>
>       *Text Management*: The script maintains the full text string in a
>       variable. When a key is pressed (e.g., 'a', 'b', 'Backspace', 'Enter'), the
>       script updates this string accordingly. It then updates the string field
>       of one or more <Text> nodes to display the changes in the 3D scene.
>       -
>
>       *Multi-line Handling*: To create multiple rows, the script can
>       either manage multiple <Text>nodes (one per line) or use a single
>       <Text>node. A single node can render multiple lines if its string field
>       is an array of strings (e.g., string='"First line" "Second line"').
>       The script is responsible for breaking the text into lines when the 'Enter'
>       key is pressed or when text wraps.
>       -
>
>       *Caret/Cursor Management*: The script must calculate and display a
>       cursor (often a simple 3D shape like a thin Box or a line). Its
>       position is updated based on typing and mouse clicks.
>       3.
>
>    *Selection Simulation*: This is one of the most complex parts.
>    -
>
>       *Hit-Point Calculation*: When a user clicks, the script uses the
>       coordinates from the <PlaneSensor> to calculate which character in
>       the string was clicked on. This requires knowledge of the font's metrics
>       (character width, line height, etc.).
>       -
>
>       *Visual Highlight*: To show the selection, the text cannot simply
>       be highlighted as in HTML. Instead, the script programmatically creates a
>       visual effect. A common method is to place a semi-transparent colored
>       <Box> or IndexedFaceSet behind the selected portion of the text.
>       The script dynamically resizes and repositions this highlight box as the
>       user drags the mouse.
>       4.
>
>    *Clipboard Integration (Cut, Copy, Paste)*: The script must interact
>    with the web browser's clipboard.
>    -
>
>       *Event Trapping*: The script listens for specific keyPress events
>       from the <KeySensor>, such as 'Ctrl+C' (copy), 'Ctrl+X' (cut), and
>       'Ctrl+V' (paste).
>       -
>
>       *Browser API*: It uses the browser's *navigator.clipboard API* to
>       perform the operations.
>       -
>
>          *Copy*: The script takes the currently selected text (which it
>          manages internally) and uses navigator.clipboard.writeText() to
>          place it on the system clipboard.
>          -
>
>          *Cut*: Performs a copy operation and then removes the selected
>          text from its internal string and updates the 3D <Text> node.
>          -
>
>          *Paste*: The script calls navigator.clipboard.readText() to get
>          text from the clipboard and inserts it into its internal string at the
>          cursor's position, then updates the 3D text.
>
> Summary of the Workflow
>
>    1.
>
>    User clicks in the 3D text area.
>    2.
>
>    The <PlaneSensor> sends the click location to the script.
>    3.
>
>    The script calculates the character position and places a 3D cursor
>    there.
>    4.
>
>    User types a key.
>    5.
>
>    The <KeySensor> sends the key value to the script.
>    6.
>
>    The script updates its internal text string, moves the cursor, and
>    pushes the new string to the stringfield of the visible <Text> node.
>    7.
>
>    User clicks and drags to select text.
>    8.
>
>    The script calculates the start and end of the selection and
>    continuously updates the size and position of a 3D highlight box behind the
>    text.
>    9.
>
>    User presses 'Ctrl+C'.
>    10.
>
>    The script detects this key combination, gets the selected text, and
>    uses navigator.clipboard.writeText() to copy it.
>
> In conclusion, creating a fully functional, multi-line editable text area
> in X3D is a highly complex programming task that requires building an
> entire application from the ground up using X3D's scripting and
> event-handling nodes. The example you linked is a powerful demonstration of
> what can be achieved with this advanced approach.
>
>
>
> On Mon, Jul 28, 2025 at 10:39 AM John Carlson <yottzumm at gmail.com> wrote:
>
>> Now that we have FontLibrary, it seems a lot more likely that we can
>> create documentation and specifications in X3D 4.1 instead of HTML.
>>
>> So the thought is to take our generated content in the archive, and
>> create a 3D library world out of it,  Maybe call it the X3D 3D library
>> world.
>>
>> Maybe we can figure out new ways of interacting with specifications and
>> documentation.
>>
>> The first thing I plan to do is take my textareas in X3DJSONLD 12, and
>> render them in 3D.  Maybe the first task is to create a 3D textarea.
>>
>>
>> See Starcel:
>> https://youtu.be/rJuRTZOE99g
>> <https://youtu.be/rJuRTZOE99g?si=VZnjjvI4Sp_-tWGs>
>>
>> John
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://web3d.org/pipermail/x3d-public_web3d.org/attachments/20250728/f42a28d5/attachment-0001.html>