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

[John Carlson]

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/18ec4a6b/attachment-0001.html>