일단 ... 캐릭터가 띄워지는게 되는지, 할수있는지 미지수이다. 

 

AI 를 믿고 시작하자. 

 

 

Live2d 홈페이지에서 무료로 가져다 쓸 캐릭터를 받아왔다. 

https://www.live2d.com/ko/learn/sample/

 

Live2D 샘플 데이터 모음 (무료 배포) | Live2D Cubism

Cubism Editor의 학습 및, Cubism SDK의 런타임 동작 테스트 등에 이용하실 수 있는 샘플 데이터입니다. 본 데이터를 이용하시기 전에『무상 제공 소재의 소프트웨어 라이선스 계약서』혹은『Live2D Cubis

www.live2d.com

 

 

 

여기 무료.. 유료 몇가지 캐릭터들이 제공되는데...

프리버젼이 다운로드되는 캐릭터로 "Momose Hiyori" 를 선택했다.

 

...

매번 변명하게되지만, 내 취향과는 무관하게 무료라서 가져온 녀석이다. 

상업적으로 쓸녀석이 절대 아니기 때문에, 이번플젝에서 사용하고 깃에만 올려둘꺼니깐 뭐.. 문제없을 것 같다.

 

 

다운받아 압축을 풀면 이렇게 생긴 구조로 되어있다. 

저.. hiyori_free_t08.cdi3.json 파일을 사용하는거라고 하는데 ... 먼저 루트폴더에 "public/models" 폴더를 추가하고 그안에 요폴더를 그대로 넣어뒀다 . 

 

문제는...내가 프론트는 저~~~~~~언혀 저~~~~~~언혀 공부를 안해서... "지피티야 해줘"  를 시전하니 아래와 같은 html 파일을 만들어줬다. 

 

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <title>Hiyori Test</title>
  <style>
    html,body{margin:0;height:100%;overflow:hidden;background:#111}
    #app{width:100%;height:100%}
  </style>
</head>
<body>
  <div id="app"></div>

  <script>
    // CDN 순차 로딩 시스템
    async function loadScript(url) {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.onload = () => {
          console.log('✅ 로드 성공:', url);
          resolve();
        };
        script.onerror = () => {
          console.error('❌ 로드 실패:', url);
          reject(new Error(`Failed to load: ${url}`));
        };
        document.head.appendChild(script);
      });
    }

    async function init() {
      try {
        // 1. Pixi.js 로드
        console.log('📦 Pixi.js 로딩 중...');
        await loadScript('https://cdn.jsdelivr.net/npm/pixi.js@6.5.8/dist/browser/pixi.min.js');
        console.log('✅ PIXI 버전:', PIXI.VERSION);

        // 2. Live2D Cubism Core 로드
        console.log('📦 Live2D Cubism Core 로딩 중...');
        await loadScript('https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js');
        console.log('✅ Live2DCubismCore 존재:', typeof Live2DCubismCore);

        // 3. pixi-live2d-display 로드 (여러 CDN 시도)
        console.log('📦 pixi-live2d-display 로딩 중...');
        
        const cdnUrls = [
          'https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.4.0/dist/cubism4.js',
          'https://unpkg.com/pixi-live2d-display@0.4.0/dist/cubism4.js',
          'https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display@v0.4.0/dist/cubism4.js'
        ];

        let loaded = false;
        for (const url of cdnUrls) {
          try {
            console.log('🔄 시도 중:', url);
            await loadScript(url);
            if (PIXI.live2d && PIXI.live2d.Live2DModel) {
              console.log('✅ pixi-live2d-display 로드 성공!');
              loaded = true;
              break;
            }
          } catch (e) {
            console.warn('⚠️ 이 CDN은 실패, 다음 시도:', e.message);
          }
        }

        if (!loaded) {
          throw new Error('모든 CDN에서 pixi-live2d-display 로드 실패');
        }

        console.log('=== 최종 확인 ===');
        console.log('PIXI.live2d:', typeof PIXI.live2d);
        console.log('PIXI.live2d.Live2DModel:', typeof PIXI.live2d.Live2DModel);
        console.log('==================');

        // 4. Pixi 앱 생성
        const app = new PIXI.Application({ 
          backgroundAlpha: 0, 
          resizeTo: window 
        });
        document.getElementById("app").appendChild(app.view);

        // 5. Live2D 모델 로드
        const MODEL_URL = "public/models/hiyori_free_ko/runtime/hiyori_free_t08.model3.json";
        
        console.log('📦 Live2D 모델 로딩 중:', MODEL_URL);
        const model = await PIXI.live2d.Live2DModel.from(MODEL_URL);
        
        console.log('✅ 모델 로드 완료!');

        // 모델 위치 설정 (크기 축소)
        model.anchor.set(0.5, 1);
        model.scale.set(0.15); // 0.5에서 0.2로 축소
        model.position.set(window.innerWidth / 2, window.innerHeight);
        
        app.stage.addChild(model);

        // 클릭 모션
        model.interactive = true;
        model.on("pointertap", () => {
          console.log('👆 캐릭터 클릭!');
          if (model.motion) {
            model.motion("Tap");
          }
        });

        console.log('🎉 모든 설정 완료! 캐릭터를 클릭해보세요!');

      } catch (e) {
        console.error('❌ 초기화 실패:', e);
        document.getElementById('app').innerHTML = 
          `<div style="color:white;padding:20px;font-family:monospace;">
            <h2>❌ 로드 실패</h2>
            <p>${e.message}</p>
            <p>F12를 눌러 Console 탭을 확인하세요.</p>
          </div>`;
      }
    }

    // 페이지 로드 후 초기화
    window.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>

 

 

버전이 꼬여서 몇번 실패했는데 ..

 

증상

  • PIXI.live2d가 undefined
  • Could not find Cubism 4 runtime
  • Live2DModel.from is not a function

원인

  • Pixi v7 ↔ 플러그인 0.4.x 버전 미스매치
  • Cubism Core 미로딩 혹은 순서 꼬임
  • CDN 404/차단/캐시로 파일이 실제로 안 내려옴

해결

  1. 버전 매트릭스 맞추기
    • Pixi v6 + pixi-live2d-display@0.4.x (+ cubism4.js)
    • or Pixi v7 + pixi-live2d-display@0.5.x+
  2. 순서: Pixi → Core → cubism4.js
  3. 폴백: jsDelivr 막히면 unpkg/gh-cdn로 재시도
  4. 강력 새로고침으로 캐시 무력화

 

 

대체 이게 무슨 외계어냠..

아무래도 내가 만들고 싶은 프로젝트를 하려면 프론트는 공부해야겠다. 

 

 

 

녀석...이 프로젝트의 시작을 같이하는구나..

'학원 TEAM 프로젝트 > 심화과정 Team Project(최종)' 카테고리의 다른 글

기록 8 . 캐릭터 클릭을 좀더 자연스럽게 ..  (0) 2025.11.13
기록 7 . 바탕화면에 띄워야해...  (0) 2025.11.13
기록 5-1 . 그래서 버츄얼 비서 프로젝트..잘할수있을까?  (0) 2025.11.12
기록 5 . 프로젝트 기획 뒤짚어 엎기...  (0) 2025.11.12
기록 4-1 . PostgreSQL + Chroma + FastAPI 환경 구성 정리  (0) 2025.11.11

+ Recent posts

티스토리툴바