Sr viz dev

GEMstack/onboard/visualization/sr_viz/threeD/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

GEMstack/onboard/visualization/sr_viz/threeD/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

GEMstack/onboard/visualization/sr_viz/threeD/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

GEMstack/onboard/visualization/sr_viz/threeD/legacy/README.md

@@ -0,0 +1,77 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+You need to have **Node.js** - ```18.x``` or newer. A good way to install different versions of Node.js is using Node Version Manager ([nvm](https://github.com/nvm-sh/nvm)).
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

GEMstack/onboard/visualization/sr_viz/threeD/legacy/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

GEMstack/onboard/visualization/sr_viz/threeD/legacy/components/AxesReference.vue

@@ -0,0 +1,88 @@
+<template>
+    <div ref="axesContainer"></div>
+</template>
+
+<script setup>
+import * as THREE from "three";
+
+const props = defineProps({
+    camera: Object,
+});
+
+const axesContainer = ref(null);
+let scene, axesCamera, axesRenderer, axesHelper;
+let xLabel, yLabel, zLabel;
+
+onMounted(() => {
+    initAxes();
+    animate();
+    axesContainer.value.addEventListener("contextmenu", handleContextMenu);
+});
+
+function handleContextMenu(event) {
+    event.preventDefault();
+}
+
+function initAxes() {
+    scene = new THREE.Scene();
+
+    axesCamera = new THREE.OrthographicCamera(-50, 50, 50, -50, 1, 500);
+    axesCamera.position.set(5, 5, 5);
+    axesCamera.lookAt(0, 0, 0);
+
+    axesRenderer = new THREE.WebGLRenderer({ alpha: true });
+    axesRenderer.setSize(400, 400);
+    axesContainer.value.appendChild(axesRenderer.domElement);
+
+    axesHelper = new THREE.AxesHelper(20);
+    scene.add(axesHelper);
+
+    xLabel = createLabel("X", 0xff0000, [22, 0, 0]);
+    yLabel = createLabel("Y", 0x00ff00, [0, 22, 0]);
+    zLabel = createLabel("Z", 0x0000ff, [0, 0, 22]);
+
+    scene.add(xLabel, yLabel, zLabel);
+}
+
+function createLabel(text, color, position) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = 128;
+    canvas.height = 128;
+
+    ctx.fillStyle = "#" + color.toString(16).padStart(6, "0");
+    ctx.font = "48px Arial";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+
+    const texture = new THREE.CanvasTexture(canvas);
+    const material = new THREE.SpriteMaterial({
+        map: texture,
+        transparent: true,
+    });
+    const sprite = new THREE.Sprite(material);
+    sprite.scale.set(10, 10, 1);
+    sprite.position.set(...position);
+
+    return sprite;
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+    if (props.camera) {
+        axesCamera.position.copy(props.camera.position);
+        axesCamera.lookAt(
+            props.camera.position
+                .clone()
+                .add(props.camera.getWorldDirection(new THREE.Vector3()))
+        );
+    }
+    axesRenderer.render(scene, axesCamera);
+}
+
+onBeforeUnmount(() => {
+    axesRenderer.dispose();
+    axesContainer.value.removeEventListener("contextmenu", handleContextMenu);
+});
+</script>