fix: render issues

src/components/md-token-viewer.tsx

@@ -1,19 +1,17 @@
-import { customElement, noShadowDOM } from "solid-element";
 import {
   createSignal,
   onMount,
   onCleanup,
-  Show,
+  Show, createEffect,
 } from "solid-js";
 import * as THREE from "three";
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
 
 export interface TokenViewerProps {
-  stlUrl: string;
+  stlUrl: string | null;
 }
 
-customElement("md-token-viewer", {}, (props, { element }) => {
+export default function MdTokenViewer(props: TokenViewerProps) { 
-  noShadowDOM();
 
   const [viewerRef, setViewerRef] = createSignal<HTMLDivElement | null>(null);
   const [isLoaded, setIsLoaded] = createSignal(false);
@@ -60,6 +58,7 @@ customElement("md-token-viewer", {}, (props, { element }) => {
       });
 
       mesh = new THREE.Mesh(geometry, material);
+      mesh.rotateX(Math.PI);
       scene?.add(mesh);
 
       // 调整相机
@@ -82,6 +81,7 @@ customElement("md-token-viewer", {}, (props, { element }) => {
   // 初始化 Three.js 场景
   onMount(() => {
     const viewerEl = viewerRef();
+    console.log("Viewer element:", viewerEl);
     if (!viewerEl) return;
 
     // 创建场景
@@ -164,12 +164,6 @@ customElement("md-token-viewer", {}, (props, { element }) => {
     };
     animate();
 
-    // 加载 STL 模型
-    const stlUrl = element.getAttribute("stl-url");
-    if (stlUrl) {
-      loadSTL(stlUrl);
-    }
-
     // 清理函数
     onCleanup(() => {
       if (animationId) cancelAnimationFrame(animationId);
@@ -185,6 +179,12 @@ customElement("md-token-viewer", {}, (props, { element }) => {
       if (scene) scene.clear();
     });
   });
+  
+  createEffect(() => {
+    if (props.stlUrl) {
+      loadSTL(props.stlUrl);
+    }
+  });
 
   return (
     <div
@@ -208,4 +208,4 @@ customElement("md-token-viewer", {}, (props, { element }) => {
       </Show>
     </div>
   );
-});
+}

src/components/md-token.tsx

@@ -10,6 +10,7 @@ import {
 import { resolvePath } from "./utils/path";
 import { traceImage, type TracedLayer } from "./utils/image-tracer";
 import { generateSTL, type ExtrusionSettings } from "./utils/stl-generator";
+import MdTokenViewer from "./md-token-viewer";
 
 export interface TokenProps {
   size?: number; // 模型整体尺寸 (mm), 默认 50
@@ -182,7 +183,7 @@ customElement("md-token", { size: 50, defaultThickness: 2 }, (props, { element }
                 <h4 class="text-sm font-semibold mb-2 text-gray-700">
                   3D 模型预览
                 </h4>
-                <md-token-viewer stl-url={stlUrl()!} />
+                <MdTokenViewer stlUrl={stlUrl()}/>
               </div>
             </Show>
           </div>

src/components/utils/stl-generator.ts

@@ -63,6 +63,7 @@ export async function generateSTL(
     // 创建挤压几何体
     const extrudeSettings: THREE.ExtrudeGeometryOptions = {
       depth: layerSetting.thickness,
+      curveSegments: 36,
       bevelEnabled: false,
     };