Adds support for rendering frames in the Notebook Viewer

Introduces functionality to visualize frames as 3D objects in the Notebook Viewer.

- Adds a `frame_to_threejs` conversion utility for transforming frames into PyThreeJS objects.
- Implements `ThreeFrameObject` for rendering frames in scenes, with axes visualized in red, green, and blue.
- Updates the registration process to include frame objects in the Notebook Viewer.
- Enhances the example notebook to demonstrate frame rendering capabilities.
- Fixes a type annotation issue in `line_to_threejs` and improves the `draw` method's return type annotations for consistency.

These changes enhance the visualization capabilities of the Notebook Viewer and improve type safety in the codebase.

Author: jf---

notebooks/20_geometry.ipynb

@@ -6,7 +6,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "%pip install -q compas_notebook"
+    "# /%pip install -q compas_notebook"
    ]
   },
   {
@@ -20,6 +20,7 @@
     "from compas.geometry import Point\n",
     "from compas.geometry import Pointcloud\n",
     "from compas.geometry import Polyline\n",
+    "from compas.geometry import Frame \n",
     "from compas_notebook.viewer import Viewer"
    ]
   },
@@ -33,7 +34,16 @@
     "\n",
     "point = Point(-1, 2, 3)\n",
     "line = Line([0, 0, 0], point)\n",
-    "polyline = Polyline(cloud.points)"
+    "polyline = Polyline(cloud.points)\n",
+    "\n",
+    "\n",
+    "frame = Frame(point, [1, 0, 0], [0, 1, 0])\n",
+    "\n",
+    "# x_line = Line(frame.point, frame.point+frame.xaxis)\n",
+    "# y_line = Line(frame.point, frame.point+frame.yaxis)\n",
+    "# z_line = Line(frame.point, frame.point+frame.zaxis)\n",
+    "\n",
+    "\n"
    ]
   },
   {
@@ -44,7 +54,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "a55820df515f4eb0a67494e16869aac2",
+       "model_id": "60cefc1deea3458c9e1a390cdd0ea3ba",
        "version_major": 2,
        "version_minor": 0
       },
@@ -61,6 +71,7 @@
     "\n",
     "viewer.scene.add(point, color=Color.red(), pointsize=0.3)\n",
     "viewer.scene.add(line)\n",
+    "viewer.scene.add(frame)\n",
     "viewer.scene.add(polyline, color=Color.blue())\n",
     "viewer.scene.add(cloud, color=Color.green(), pointsize=0.3)\n",
     "\n",
@@ -70,7 +81,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "compas2",
+   "display_name": "compas_opzuid",
    "language": "python",
    "name": "python3"
   },
@@ -84,7 +95,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.12.1"
+   "version": "3.12.12"
   }
  },
  "nbformat": 4,

src/compas_notebook/conversions/geometry.py

@@ -1,3 +1,4 @@
+import re
 import numpy
 import pythreejs as three
 from compas.geometry import Box
@@ -8,9 +9,11 @@
 from compas.geometry import Polyline
 from compas.geometry import Sphere
 from compas.geometry import Torus
+from compas.geometry import Frame
+from compas.geometry import Line
 
 
-def line_to_threejs(line: Point) -> three.BufferGeometry:
+def line_to_threejs(line: Line) -> three.BufferGeometry:
     """Convert a COMPAS line to PyThreeJS.
 
     Parameters
@@ -28,6 +31,39 @@ def line_to_threejs(line: Point) -> three.BufferGeometry:
     return geometry
 
 
+def frame_to_threejs(frame: Frame) -> list[three.BufferGeometry]:
+    """Convert a COMPAS frame to PyThreeJS.
+
+    Parameters
+    ----------
+    frame : :class:`compas.geometry.Frame`
+        The frame to convert.
+
+    Returns
+    -------
+    list[three.BufferGeometry]
+
+    """
+
+    # create lines for each axis
+    _x_line = Line(frame.point, frame.point + frame.xaxis)
+    _y_line = Line(frame.point, frame.point + frame.yaxis)
+    _z_line = Line(frame.point, frame.point + frame.zaxis)
+
+    # convert lines to threejs vertex buffers
+    xline_verts = line_to_threejs(_x_line)
+    yline_verts = line_to_threejs(_y_line)
+    zline_verts = line_to_threejs(_z_line)
+
+    # convert from vertex buffers to line objects
+    xline_lines = three.Line(xline_verts, three.LineBasicMaterial(color="red"))
+    yline_lines = three.Line(yline_verts, three.LineBasicMaterial(color="green"))
+    zline_lines = three.Line(zline_verts, three.LineBasicMaterial(color="blue"))
+
+    result = [xline_lines, yline_lines, zline_lines]
+    return result
+
+
 def point_to_threejs(point: Point) -> three.SphereGeometry:
     """Convert a COMPAS point to PyThreeJS.
 

src/compas_notebook/scene/__init__.py

@@ -13,6 +13,7 @@
 from compas.geometry import Cone
 from compas.geometry import Cylinder
 from compas.geometry import Line
+from compas.geometry import Frame
 from compas.geometry import Point
 from compas.geometry import Pointcloud
 from compas.geometry import Polygon
@@ -46,6 +47,7 @@
 from .meshobject import ThreeMeshObject
 
 from .groupobject import ThreeGroupObject
+from .frameobject import ThreeFrameObject
 
 
 @plugin(category="drawing-utils", pluggable_name="clear", requires=["pythreejs"])
@@ -75,6 +77,7 @@ def register_scene_objects():
     register(Cone, ThreeConeObject, context="Notebook")
     register(Cylinder, ThreeCylinderObject, context="Notebook")
     register(Graph, ThreeGraphObject, context="Notebook")
+    register(Frame, ThreeFrameObject, context="Notebook")
     register(Line, ThreeLineObject, context="Notebook")
     register(Point, ThreePointObject, context="Notebook")
     register(Pointcloud, ThreePointcloudObject, context="Notebook")
@@ -86,20 +89,20 @@ def register_scene_objects():
     register(Mesh, ThreeMeshObject, context="Notebook")
     register(list, ThreeGroupObject, context="Notebook")
 
-
-__all__ = [
-    "NotebookScene",
-    "ThreeBoxObject",
-    "ThreeCapsuleObject",
-    "ThreeConeObject",
-    "ThreeCylinderObject",
-    "ThreeGraphObject",
-    "ThreePointObject",
-    "ThreePointcloudObject",
-    "ThreePolygonObject",
-    "ThreePolyhedronObject",
-    "ThreePolylineObject",
-    "ThreeSceneObject",
-    "ThreeSphereObject",
-    "ThreeTorusObject",
-]
+# # yuck java
+# __all__ = [
+#     "NotebookScene",
+#     "ThreeBoxObject",
+#     "ThreeCapsuleObject",
+#     "ThreeConeObject",
+#     "ThreeCylinderObject",
+#     "ThreeGraphObject",
+#     "ThreePointObject",
+#     "ThreePointcloudObject",
+#     "ThreePolygonObject",
+#     "ThreePolyhedronObject",
+#     "ThreePolylineObject",
+#     "ThreeSceneObject",
+#     "ThreeSphereObject",
+#     "ThreeTorusObject",
+# ]

src/compas_notebook/scene/frameobject.py

@@ -0,0 +1,25 @@
+import pythreejs as three
+from compas.scene import GeometryObject
+
+from compas_notebook.conversions.geometry import frame_to_threejs
+
+from .sceneobject import ThreeSceneObject
+
+
+class ThreeFrameObject(ThreeSceneObject, GeometryObject):
+    """Scene object for drawing frames"""
+
+    def draw(self):
+        """Draw the frame associated with the scene object as a set of lines: x-axis in red, y-axis in green, z-axis in blue.
+
+        Returns
+        -------
+        list[three.Line]
+            List of pythreejs objects created.
+
+        """
+
+
+        self._guids = frame_to_threejs(self.geometry)
+
+        return self.guids

src/compas_notebook/scene/lineobject.py

@@ -9,8 +9,8 @@
 class ThreeLineObject(ThreeSceneObject, GeometryObject):
     """Scene object for drawing line."""
 
-    def draw(self):
-        """Draw the line associated with the scene object.
+    def draw(self)-> list[three.Line]:
+        """Draw the frame associated with the scene object.
 
         Returns
         -------