Prototype of a particle visualizer.

source/titfront/package.json

@@ -22,6 +22,7 @@
     "react-feather": "^2.0.10",
     "react-icons": "^5.4.0",
     "tailwind-merge": "^3.0.1",
+    "three": "^0.173.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {
@@ -34,6 +35,7 @@
     "@types/node": "^22.10.10",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
+    "@types/three": "^0.173.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "3.0.4",
     "async-mutex": "^0.5.0",

source/titfront/src/components/App.tsx

@@ -16,15 +16,15 @@ import {
 import { BottomMenu, LeftMenu, MenuItem } from "./MainMenu";
 import { PythonShell } from "./PythonShell";
 import { TreeView, MockData } from "./TreeView";
-import { Viewer } from "./Viewer";
+import { ViewerComponent } from "./Viewer";
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 export const App: FC = () => {
   const leftIconSize = 24;
   const bottomIconSize = 16;
   return (
-    <div className="h-screen w-screen flex flex-row select-none text-sm">
+    <div className="h-screen w-screen flex flex-row select-none text-sm transition-none">
       <LeftMenu>
         <MenuItem
           name="Configuration"
@@ -49,8 +49,8 @@ export const App: FC = () => {
           group={1}
         />
       </LeftMenu>
-      <div className="flex-1 flex flex-col">
-        <Viewer />
+      <div className="flex-grow flex flex-col">
+        <ViewerComponent />
         <BottomMenu>
           <MenuItem
             name="Python shell"

source/titfront/src/components/Python.tsx

@@ -64,9 +64,7 @@ export type PyRunCode = (expression: string, onResponse: PyCallback) => void;
  * @returns A function to run Python code.
  */
 export function usePython(): PyRunCode {
-  const runCode = useContext(PyConnectionContext);
-  assert(runCode !== null, "runCode is null!");
-  return runCode;
+  return useContext(PyConnectionContext)!;
 }
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -116,8 +114,7 @@ export const PyConnectionProvider: FC<{ children: ReactNode }> = ({
       );
 
       // Invoke the callback.
-      const callback = pendingRequests.current.get(requestID);
-      assert(callback !== undefined, `No callback for request ${requestID}`);
+      const callback = pendingRequests.current.get(requestID)!;
       if (status === "success") {
         callback(result);
       } else {

source/titfront/src/components/ViewOrientation.tsx

@@ -0,0 +1,137 @@
+/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ *\
+ * Part of the Tit Solver project, under the MIT License.
+ * See /LICENSE.md for license information. SPDX-License-Identifier: MIT
+\* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+import { FC, useEffect, useState } from "react";
+import { Euler, Quaternion, Vector3 } from "three";
+
+import { useViewer } from "./Viewer";
+import { cn } from "../utils";
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+type Axis = "x" | "y" | "z";
+type AxisSpec = {
+  unit: Vector3;
+  colorCn: string;
+  darkerColorCn: string;
+  borderColorCn: string;
+};
+const axes: Record<Axis, AxisSpec> = {
+  x: {
+    unit: new Vector3(+1, 0, 0),
+    colorCn: "bg-red-500/50 hover:bg-red-500/75",
+    darkerColorCn: "bg-red-500/25 hover:bg-red-500/50",
+    borderColorCn: "border-red-500/50",
+  },
+  y: {
+    unit: new Vector3(0, +1, 0),
+    colorCn: "bg-green-500/50 hover:bg-green-500/75",
+    darkerColorCn: "bg-green-500/25 hover:bg-green-500/50",
+    borderColorCn: "border-green-500/50",
+  },
+  z: {
+    unit: new Vector3(0, 0, -1),
+    colorCn: "bg-blue-500/50 hover:bg-blue-500/75",
+    darkerColorCn: "bg-blue-500/25 hover:bg-blue-500/50",
+    borderColorCn: "border-blue-500/50",
+  },
+};
+
+export const Orientation: FC = () => {
+  const viewer = useViewer();
+  const [rotation, setRotation] = useState<Euler | null>(null);
+
+  useEffect(() => {
+    const controls = viewer?.controls;
+    if (!controls) return;
+    const setRotationFromControls = () =>
+      setRotation(
+        new Euler(
+          viewer.controls.getPolarAngle() - Math.PI / 2,
+          viewer.controls.getAzimuthalAngle(),
+          0
+        )
+      );
+    setRotationFromControls();
+    controls.addEventListener("change", setRotationFromControls);
+    return () => {
+      controls.removeEventListener("change", setRotationFromControls);
+    };
+  }, [viewer]);
+
+  if (!viewer || !rotation) return null;
+
+  const q = new Quaternion().setFromEuler(rotation);
+  const OrientAxis = (axis: "x" | "y" | "z") => {
+    const { unit, colorCn, darkerColorCn, borderColorCn } = axes[axis];
+    const e = new Vector3().copy(unit).applyQuaternion(q);
+    e.y *= -1;
+
+    const baseZ = 20;
+    const diamPx = 30;
+    const distPx = 45;
+    const angleRad = Math.atan2(e.y, e.x);
+    const angledDistPx = distPx * Math.hypot(e.x, e.y) - diamPx / 2;
+
+    const Circle = (sign: number) => (
+      <button
+        className={cn(
+          "absolute flex items-center justify-center",
+          "rounded-full",
+          sign > 0
+            ? cn("text-gray-700 font-black", colorCn)
+            : cn("border-4", darkerColorCn, borderColorCn)
+        )}
+        style={{
+          width: diamPx,
+          height: diamPx,
+          zIndex: Math.round(baseZ * (1 - sign * e.z)),
+          transform: `
+            translate(-50%, -50%)
+            translate(${sign * e.x * distPx}px, ${sign * e.y * distPx}px)
+          `,
+        }}
+      >
+        {sign > 0 ? axis.toUpperCase() : ""}
+      </button>
+    );
+
+    const Line = (sign: number) =>
+      Math.abs(angledDistPx) > 2 && (
+        <div
+          className={cn("absolute", colorCn)}
+          style={{
+            width: angledDistPx,
+            height: 4,
+            zIndex: Math.round(baseZ * (1 - sign * 0.5 * e.z)),
+            transform: `
+            translate(-50%, -50%)
+            rotate(${angleRad}rad)
+            translate(${sign * 50}%, 0)
+          `,
+          }}
+        />
+      );
+
+    return (
+      <>
+        {Circle(+1)}
+        {Line(+1)}
+        {Line(-1)}
+        {Circle(-1)}
+      </>
+    );
+  };
+
+  return (
+    <div className="absolute top-20 right-20">
+      {OrientAxis("x")}
+      {OrientAxis("y")}
+      {OrientAxis("z")}
+    </div>
+  );
+};
+
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~