diff --git a/package.json b/package.json
index 639f5e9..d428a99 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
"dependencies": {
"@google/model-viewer": "^3.4.0",
"three": "^0.160.1",
- "three-orientation-gizmo": "https://github.com/jrj2211/three-orientation-gizmo"
+ "three-orientation-gizmo": "https://github.com/jrj2211/three-orientation-gizmo",
+ "vue": "^3.4.16"
},
"devDependencies": {
"@parcel/optimizer-data-url": "2.11.0",
"@parcel/transformer-inline-string": "2.11.0",
+ "@parcel/transformer-vue": "2.11.0",
"@types/three": "^0.160.0",
"buffer": "^5.5.0||^6.0.0",
"parcel": "^2.11.0"
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..0f016b1
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/ModelViewer.vue b/src/ModelViewer.vue
new file mode 100644
index 0000000..c5615a5
--- /dev/null
+++ b/src/ModelViewer.vue
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/ModelViewerOverlay.vue b/src/ModelViewerOverlay.vue
new file mode 100644
index 0000000..411f7f4
--- /dev/null
+++ b/src/ModelViewerOverlay.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/ModelViewerWrapper.vue b/src/ModelViewerWrapper.vue
new file mode 100644
index 0000000..443a774
--- /dev/null
+++ b/src/ModelViewerWrapper.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app.ts b/src/app.ts
deleted file mode 100644
index fd0bf7c..0000000
--- a/src/app.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {ModelViewerElement} from '@google/model-viewer';
-import {$scene} from "@google/model-viewer/lib/model-viewer-base";
-import {OrientationGizmo} from "./orientation";
-import {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
-import {settings} from "./settings";
-
-export class App {
- element: ModelViewerElement
-
- install() {
- this.element = new ModelViewerElement();
- this.element.setAttribute('alt', 'The CAD Viewer is not supported on this browser.');
- this.element.setAttribute('camera-controls', '');
- this.element.setAttribute('camera-orbit', '30deg 75deg auto');
- this.element.setAttribute('max-camera-orbit', 'Infinity 180deg auto');
- this.element.setAttribute('min-camera-orbit', '-Infinity 0deg auto');
- this.element.setAttribute('interaction-prompt', 'none'); // Quits selected views from gizmo
- // this.element.setAttribute('auto-rotate', ''); // Messes with the gizmo (rotates model instead of camera)
- if (settings.autoplay) this.element.setAttribute('autoplay', '');
- if (settings.arModes) {
- this.element.setAttribute('ar', '');
- this.element.setAttribute('ar-modes', settings.arModes);
- }
- if (settings.shadowIntensity) {
- this.element.setAttribute('shadow-intensity', '1');
- }
- if (settings.background) {
- this.element.setAttribute('skybox-image', settings.background);
- this.element.setAttribute('environment-image', settings.background);
- }
- console.log('ModelViewerElement', this.element)
- document.body.appendChild(this.element);
- // Misc installation
- let scene: ModelScene = this.element[$scene];
- let gizmo = new OrientationGizmo(scene);
- gizmo.install();
-
- function updateGizmo() {
- gizmo.update();
- requestAnimationFrame(updateGizmo);
- }
-
- updateGizmo();
- }
-
- replaceModel(url: string) {
- this.element.setAttribute('src', url)
- }
-}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 22acc79..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,12 +0,0 @@
-html, body, model-viewer {
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
-}
-
-@media (prefers-color-scheme: dark) {
- body {
- background-color: #000;
- }
-}
diff --git a/src/index.html b/src/index.html
index dd755b9..4f3526c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,9 +4,9 @@
Yet Another CAD Viewer
-
+