3D VM

Experiment into. Visual-Meta handling 3D environments. A use-case is where a 3D graph is embedded in a flat document and the full data describing it is in the Visual-Meta appendix so the user can interact with the graph in the document and extract it in to 3D when in an XR environment.

This is not a final design, just a provocation for a design dialog

Prompt & Data

You are an expert in understanding 3D data and presenting it in HTML.
Parse the data below and present HTML and javascript which would render this as a 3D graph in a web browser. The HTML should also import Three.js for the scene. All HTML and javascript should be together, not in separate replies. The background should be a light grey. Each node is marked with a reference number and all variable for the node follows, before the next node is listed. Provide full HTML for a full web page so that this will render correctly when I copy the text and save it into a HTML document.

There are three components to each node: Location, display, connections and metadata. Only ‘display’ is to be shown, while the metadata needs to be accessible to the web browser.

Environment:
Space = 1.0 units
Coordinates is based on location in X, Y, Z space.
All text faces the user.
If there is a Link field, apply it to the text for that node to make the text clickable.
These nodes are not connected unless specifically indicated.

Nodes:

@node{1
location = {0.3, 0.3, 0.3},
title = {Electronic Literature},
author = {Fabien Benetou},
shape = {sphere},
color = {red},
definition = {definition, if attached},
date created = {19 March 2024},
refers to time = {2002-2014},
url = {http://www.apple.com},
isbn = {UOM:39015073934195},
citation in full = {Fabien Benetou, Electronic Literature, 2024, electronic-literature.pdf},
connects to = {node2, dotted line};