commonJS fix

docs/.vitepress/config.ts

@@ -28,8 +28,7 @@ export default defineConfig({
   base: "/three-viewport-gizmo/",
   head: [["link", { rel: "icon", href: "./assets/three-viewport-gizmo.svg" }]],
   title: "Three Viewport Gizmo",
-  description:
-    "A three.js completely customizable 3D view helper for any camera setup",
+  description: "A three.js customizable 3D view helper for any camera setup",
   appearance: "force-dark",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -67,4 +66,17 @@ export default defineConfig({
       },
     ],
   },
+  vite: {
+    build: {
+      commonjsOptions: {
+        include: [/oh-vue-icons/],
+      },
+    },
+    optimizeDeps: {
+      include: ["oh-vue-icons"],
+    },
+    ssr: {
+      noExternal: ["oh-vue-icons"],
+    },
+  },
 });

docs/.vitepress/theme/style.css

@@ -6,10 +6,10 @@
   --vp-c-indigo-soft: rgba(230, 66, 66, 0.16) !important;
 
   /* Purple to orange tones */
-  --vp-c-purple-1: #fb8982 !important;#ffb891 !important;
-  --vp-c-purple-2: #e25656 !important;#e77c5c !important;
-  --vp-c-purple-3: #cc4343 !important;#dd633e !important;
-  --vp-c-purple-soft: rgba(230, 66, 66, 0.16) !important;t: rgba(255, 136, 100, 0.16) !important;
+  --vp-c-purple-1: #fb8982 !important;
+  --vp-c-purple-2: #e25656 !important;
+  --vp-c-purple-3: #cc4343 !important;
+  --vp-c-purple-soft: rgba(230, 66, 66, 0.16) !important;
 }
 
 .VPNavBarMenu a:nth-of-type(2) {
@@ -49,4 +49,3 @@ svg {
 .VPHero .image {
   aspect-ratio: 1;
 }
-

docs/public/samples/config.html

@@ -55,7 +55,7 @@
       document.body.appendChild(renderer.domElement);
 
       // Viewport Gizmo
-      const gizmo = new ViewportGizmo(camera, renderer, {
+      let gizmo = new ViewportGizmo(camera, renderer, {
         size: Math.min(width, height) * 0.8,
         placement: "center-center",
       });

docs/public/samples/resizable-grid.html

@@ -124,7 +124,7 @@
     <script type="module">
       import * as THREE from "three";
       import { OrbitControls } from "three/addons/controls/OrbitControls.js";
-      import { gizmo } from "three-viewport-gizmo";
+      import { ViewportGizmo } from "three-viewport-gizmo";
       import { loadThreeModel } from "./common/threeModel.js";
 
       // Initialize Gird

docs/public/samples/responsive.html

@@ -52,7 +52,7 @@
 
       const renderer = new THREE.WebGLRenderer({ antialias: true });
       renderer.setPixelRatio(window.devicePixelRatio);
-      renderer.setClearColor(0x333333, 1);
+      renderer.setClearColor(0x333333, 0);
       renderer.setSize(window.innerWidth, window.innerHeight);
       document.body.appendChild(renderer.domElement);
 
@@ -64,7 +64,7 @@
           lineWidth: 15,
           sphere: {
             enabled: true,
-            color: 0x222222,
+            color: 0x333333,
             opacity: 0.6,
             hoverOpacity: 0.2,
           },

package.json

@@ -27,6 +27,7 @@
     "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@types/node": "^20.11.28",
     "@types/three": "^0.162.0",
     "@vitejs/plugin-vue": "^5.1.4",