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 }) => {
-  noShadowDOM();
+export default function MdTokenViewer(props: TokenViewerProps) { 
 
   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>
   );
-});
+}