NotionNext 문서

Appearance

Live2D 펫 플러그인 ​

이전 원문: Live2D 펫 플러그인 게시일: 2023-6-30 마지막 편집: 2024-9-7 원래 분류: 🧷 외부 확장

소개 ​

Live2D는 비디오 게임과 웹 UI에서 자주 사용하는 2D 캐릭터 렌더링 기술입니다. 연속 이미지와 캐릭터 모델링을 통해 3D 모델처럼 보이는 2D 이미지를 만들 수 있습니다. 애니메이션 스타일의 어드벤처 게임이나 웹 장식에 잘 어울립니다.

Live2D 펫 위젯을 켜면 페이지 구석에 움직이는 캐릭터가 표시되고, 마우스 위치에 반응해 움직입니다.

Untitled

활성화 설정 ​

현재 모든 테마가 펫 위젯을 지원합니다.

기본 설정은 blog.config.js에 있으며, 기본값은 활성화 상태입니다.

JavaScript
// 플로팅 위젯
  WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 펫 위젯 표시 여부
  WIDGET_PET_LINK:
      process.env.NEXT_PUBLIC_WIDGET_PET_LINK ||
      'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 위젯 모델 주소 @see https://github.com/xiazeyu/live2d-widget-models
  WIDGET_PET_SWITCH_THEME: true, // 펫 위젯을 클릭하면 블로그 테마를 전환합니다.

환경 변수 NEXT_PUBLIC_WIDGET_PET으로 직접 켜고 끌 수도 있습니다.

모델 전환 ​

WIDGET_PET_LINK는 애니메이션 모델의 로드 주소를 지정합니다. 현재 기본 모델은 teacup dog, wanko, 입니다.

💡 모델마다 높이가 다르므로 코드에서 height를 조정해야 할 수 있습니다. 그렇지 않으면 표시가 어색할 수 있습니다.

HTML
> <canvas id="live2d" className='cursor-pointer' width="280" **height="250"** onClick={handleClick} alt='테마 전환' title='테마 전환' />
> ```


## 모델 미리보기

예를 들어 `live2d-widget-model-chitose` 모델을 사용하려면 `WIDGET_PET_LINK` 값을 다음처럼 설정합니다.

```Bash
https://cdn.jsdelivr.net/npm/live2d-widget-model-chitose/assets/chitose.model.json

아래는 자주 쓰는 모델 예시입니다.

모델주소
black cat, hijikihttps://cdn.jsdelivr.net/npm/live2d-widget-model-hijiki/assets/hijiki.model.json
white cat, tororohttps://cdn.jsdelivr.net/npm/live2d-widget-model-tororo/assets/tororo.model.json
chitosehttps://cdn.jsdelivr.net/npm/live2d-widget-model-chitose/assets/chitose.model.json
epsilonhttps://cdn.jsdelivr.net/npm/live2d-widget-model-epsilon2_1/assets/Epsilon2.1.model.json
gfhttps://cdn.jsdelivr.net/npm/live2d-widget-model-gf/assets/Gantzert_Felixander.model.json
haru 01https://cdn.jsdelivr.net/npm/live2d-widget-model-haru/01/assets/haru01.model.json
haru 02https://cdn.jsdelivr.net/npm/live2d-widget-model-haru/02/assets/haru02.model.json
harutohttps://cdn.jsdelivr.net/npm/live2d-widget-model-haruto/assets/haruto.model.json
hibiki, 권장 높이 900https://cdn.jsdelivr.net/npm/live2d-widget-model-hibiki/assets/hibiki.model.json
izumihttps://cdn.jsdelivr.net/npm/live2d-widget-model-izumi/assets/izumi.model.json
koharuhttps://cdn.jsdelivr.net/npm/live2d-widget-model-koharu/assets/koharu.model.json
ni-jhttps://cdn.jsdelivr.net/npm/live2d-widget-model-ni-j/assets/ni-j.model.json
mikuhttps://cdn.jsdelivr.net/npm/live2d-widget-model-miku/assets/miku.model.json
nicohttps://cdn.jsdelivr.net/npm/live2d-widget-model-nico/assets/nico.model.json
nietzschehttps://cdn.jsdelivr.net/npm/live2d-widget-model-nietzsche/assets/nietzche.model.json
nipsilonhttps://cdn.jsdelivr.net/npm/live2d-widget-model-nipsilon/assets/nipsilon.model.json
nitohttps://cdn.jsdelivr.net/npm/live2d-widget-model-nito/assets/nito.model.json
shizuku, 권장 높이 500https://cdn.jsdelivr.net/npm/live2d-widget-model-shizuku/assets/shizuku.model.json
tsumiki, 권장 높이 500https://cdn.jsdelivr.net/npm/live2d-widget-model-tsumiki/assets/tsumiki.model.json
unitychanhttps://cdn.jsdelivr.net/npm/live2d-widget-model-unitychan/assets/unitychan.model.json
teacup dog, wankohttps://cdn.jsdelivr.net/npm/live2d-widget-model-wanko/assets/wanko.model.json
z16, 권장 높이 500https://cdn.jsdelivr.net/npm/live2d-widget-model-z16/assets/z16.model.json

일부 모델 미리보기 이미지는 원문 스크린샷을 참고하세요.

UntitledUntitledUntitledUntitledUntitled

더 많은 모델 미리보기 ​

아래 링크에서 102개 모델을 온라인으로 미리 볼 수 있습니다.

이 모델들은 아직 CDN이 없고 GitHub 저장소 링크를 사용하므로 로딩 속도와 지역별 접근성에 영향을 받을 수 있습니다. 더 나은 CDN 링크가 있다면 공유해 주세요.

Live2d Cubism 2

일부 모델 주소 ​

모델주소
bilibili 22https://raw.githubusercontent.com/imuncle/live2d/master/model/22/model.default.json
bilibili 22 tallhttps://raw.githubusercontent.com/imuncle/live2d/master/model/22_high/model.json
bilibili 33https://raw.githubusercontent.com/imuncle/live2d/master/model/33/model.default.json
bilibili 33 tallhttps://raw.githubusercontent.com/imuncle/live2d/master/model/33_high/model.default.json
bronyamodel/bronya/model.json
bronya 2model/bronya_1/model.json
harumodel/haru/haru_01.model.json
indexmodel/index/model.json
izumimodel/izumi/izumi.model.json
katoumodel/katou_01/katou_01.model.json
liangmodel/liang/2.json
mikumodel/miku/miku.model.json
murakumomodel/miku/miku.model.json
wankomodel/wanko/wanko.model.json
shizukumodel/shizuku/shizuku.model.json
piomodel/Pio/model.json
plateletmodel/platelet/model.json
platelet minimodel/platelet-2/model.json
remmodel/rem/model.json
Tiamodel/Tia/index.json
penchanmodel/penchan/penchan.model.json
dollsfrontlinemodel/dollsfrontline/95type_405/normal/model.json
dollsfrontline armormodel/dollsfrontline/armor/model1.json
dollsfrontline commandmodel/dollsfrontline/command/model1.json
toumamodel/touma/touma.model.json

마무리 ​

위 모델들은 Cubism2 버전의 애니메이션 모델입니다. 아래 Cubism3 버전 모델도 체험해 볼 수 있습니다.

상위 버전 모델은 더 풍부하고 세밀한 애니메이션을 지원합니다. AI 대화 인터페이스와 결합하면 개발 가능성이 크지만, 여기서는 미리보기만 제공하고 당장은 지원하지 않습니다.

Live2d Cubism 3

Untitled

참고 ​

https://github.com/imuncle/live2d

live2d-widget-models/packages at master · xiazeyu/live2d-widget-models

The model library for live2d-widget.js. Contribute to xiazeyu/live2d-widget-models development by creating an account on GitHub.

원문 링크 ​

https://docs.tangly1024.com/article/notion-next-plugin-live2d