嗨咿，我是 illumi！

有玩過 Spline 的人應該都知道：如果你沒有會員，匯出的場景會有一個 超大 LOGO 浮水印，

放到正式網站就有點尷尬了。

那怎麼辦？

其實你可以直接 下載 .splinecode 檔案，放到 Next.js 本地，就能免 LOGO 嵌入。

偷偷學不要跟別人說喔！

1. 匯出 Spline .splinecode 檔

打開你的 Spline 專案 → 點選 File → Export → .splinecode，

接著把這個檔案放到 Next.js 專案的 /public/models 資料夾。

例如：

/public/models/bubble.splinecode

這樣我們就能用本地路徑載入，而不是用 Spline 的雲端 embed。

2. 用 dynamic 載入

因為 Next.js 有 SSR（伺服端渲染），

但 Spline 是瀏覽器才跑得動的 WebGL，

所以直接 import 會報錯。

解法就是用 next/dynamic，只在瀏覽器端載入：

import dynamic from "next/dynamic";

const Spline = dynamic(() => import("@splinetool/react-spline"), {
  ssr: false, // 關掉 SSR
});

少了它 Spline 會直接在 build 時炸掉。

3. HTML 結構與容器

return (
    <div
      ref={containerRef}
      className="w-full h-full relative bg-transparent"
      style={{
        isolation: "isolate",
        minHeight: "200px",
      }}
    >

      <Spline scene={scene} onLoad={onLoad} onError={onError} />
    </div>
  );

4. 事件隔離

避免滑鼠拖到 3D 場景就影響外層。

useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const stopEvent = (e: Event) => {
      e.stopPropagation();
    };

    const events = ["mousedown", "mouseup", "mousemove"];
    events.forEach((event) => {
      container.addEventListener(event, stopEvent);
    });

    return () => {
      events.forEach((event) => {
        container.removeEventListener(event, stopEvent);
      });
    };
  }, []);

這樣就完成啦～

瀏覽器打開，你會看到乾淨的 3D 模型，完全沒有浮水印。