二、Live2d 简介与使用

已于 2024-12-24 20:37:55 修改
阅读量4.5k 收藏 10
点赞数 16
分类专栏： 禅与Live2d 文章标签： c++ web ui node.js 前端
于 2024-04-08 16:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47560078/article/details/136989185
版权
本文介绍了Live2D技术，用于将2D图像转化为动态角色，并详细阐述了如何在Web上使用L2Dwidget.min.js库集成Live2D模型，包括编译、运行、源代码解析、模型更换、人物交互等功能。此外，还探讨了Live2D在Desktop端的应用，涉及OpenGL和D3D11项目构建。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

When you cry for missing the sun, you will miss the stars again.

当你为错过太阳而哭泣时，你也要再错过群星了。

——泰戈尔

一、Live2d 简介

Live2D是一种基于2D图像的动态角色技术，它能够将静态的2D角色转化为具有丰富表情和动作的实时交互角色。通过使用Live2D，开发者可以为游戏、动画、虚拟主播等应用创建出生动活泼的角色。

Live2D的核心技术是基于多层次的2D绘制，通过对角色进行分割并赋予不同部位独立的动作能力，从而实现角色的自由变形和动态效果。这种技术使得角色能够根据用户的操作或者外部输入实时响应，展现出更加真实的表情和动作。

除了基本的动作表现，Live2D还提供了丰富的特效功能，如光影效果、粒子效果等，使得角色在交互过程中更加生动有趣。同时，Live2D还支持与其他引擎和平台的集成，方便开发者将其应用到各种不同的项目中。

二、Live2d Web

L2Dwidget.min.js 是一个基于 WebGL 技术的开源库，用于在网页上实现可爱的 Live2D 角色模型。Live2D 是一种二维动画技术，可以将静态的插图转化为具有动态效果的角色模型。

L2Dwidget.min.js 提供了一些简单易用的接口，使得开发者可以轻松地将 Live2D 模型嵌入到网页中。它支持鼠标交互、触摸事件和设备重力感应等功能，使得用户可以与 Live2D 模型进行互动。

使用 L2Dwidget.min.js，你可以通过引入相应的 JavaScript 文件和配置文件，将 Live2D 模型添加到你的网页中。你可以自定义模型的大小、位置、动作等属性，并且可以根据需要添加额外的特效和动画效果。

网上很多文章都有介绍使用 L2Dwidget.min.js 实现看板娘效果，我们也来实现一个简单的 demo，

1、编译 L2Dwidget.min.js

git clone https://github.com/xiazeyu/live2d-widget.js.git

把源代码克隆下来，进入根目录，准备安装依赖，

# 使用 cnpm i 有问题
npm i

# 模块打包
yarn add webpack webpack-cli --dev
yarn webpack

模块打包完成后不会自动退出，可以直接在 ./lib 目录下看到已经生成了  L2Dwidget.0.min.js 和  L2Dwidget.min.js，

2、运行效果

启动一个 node server 来代理 html 入口，

npm install -g serve
serve .

访问 localhost:3000，然后点击 dev.html，

可以看到右下角成功显示了看板娘，

3、源代码解析

我们来看下 dev.html 里面都有些什么，

<!-- dev.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Live2d Test Env</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <script src="lib/L2Dwidget.min.js"></script>
  <script type="text/javascript">
    L2Dwidget.init();
  </script>
  </body>
</html>

页面引入了 L2Dwidget.min.js 库，并且做了初始化  L2Dwidget.init(); ，默认加载的是 live2d-widget-model-shizuku 这个模型，在 src/config/defaultConfig.js 中可以看到默认配置如下，

/**
 * @description The storage of configs. Intend to unify serverJs and clientJs's config
 */

/**
 * Default settings for defaulter
 * @type {Object}
 */

const defaultConfig = {
  model: {
    jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json',
    scale: 1,
  },
  display: {
    superSample: 2,
    width: 200,
    height: 400,
    position: 'right',
    hOffset: 0,
    vOffset: -20,
  },
  mobile: {
    show: true,
    scale: 0.8,
    motion: true,
  },
  name: {
    canvas: 'live2dcanvas',
    div: 'live2d-widget',
  },
  react: {
    opacity: 1,
  },
  dev: {
    border: false
  },
  dialog: {
    enable: false,
    script: null
  }
}

module.exports = defaultConfig;

在 src/index.js 文件中可以看到配置的说明如下，

// Created by xiazeyu.


// Celebrate for the 3.0 version! //


/**
 * @description The entry point of live2d-widget.
 */


'use strict';

import device from 'current-device';
import { config, configApplyer }from './config/configMgr';
import { EventEmitter } from './utils/EventEmitter';

if (process.env.NODE_ENV === 'development'){
  console.log('--- --- --- --- ---\nLive2Dwidget: Hey that, notice that you are now in DEV MODE.\n--- --- --- --- ---');
}
/**
 * The main entry point, which is ... nothing
 */

class L2Dwidget extends EventEmitter {

  constructor() {
    super();
    this.config = config;
  }

/**
 * The init function
 * @param {Object}   [userConfig] User's custom config 用户自定义设置
 * @param {String}   [userConfig.model.jsonPath = ''] Path to Live2D model's main json eg. `https://test.com/miku.model.json` model主文件路径
 * @param {Number}   [userConfig.model.scale = 1] Scale between the model and the canvas 模型与canvas的缩放
 * @param {Number}   [userConfig.display.superSample = 2] rate for super sampling rate 超采样等级
 * @param {Number}   [userConfig.display.width = 150] Width to the canvas which shows the model canvas的长度
 * @param {Number}   [userConfig.display.height = 300] Height to the canvas which shows the model canvas的高度
 * @param {String}   [userConfig.display.position = 'right'] Left of right side to show 显示位置：左或右
 * @param {Number}   [userConfig.display.hOffset = 0] Horizontal offset of the canvas canvas水平偏移
 * @param {Number}   [userConfig.display.vOffset = -20] Vertical offset of the canvas canvas垂直偏移
 * @param {Boolean}  [userConfig.mobile.show = true] Whether to show on mobile device 是否在移动设备上显示
 * @param {Number}   [userConfig.mobile.scale = 0.5] Scale on mobile device 移动设备上的缩放
 * @param {String}   [userConfig.name.canvas = 'live2dcanvas'] ID name of the canvas canvas元素的ID
 * @param {String}   [userConfig.name.div = 'live2d-widget'] ID name of the div div元素的ID
 * @param {Number}   [userConfig.react.opacity = 0.7] opacity 透明度
 * @param {Boolean}  [userConfig.dev.border = false] Whether to show border around the canvas 在canvas周围显示边界
 * @param {Boolean}  [userConfig.dialog.enable = false] Display dialog 显示人物对话框
 * @param {Boolean}  [userConfig.dialog.hitokoto = false] Enable hitokoto 使用一言API
 * @return {null}
 */

  init(userConfig = {}){
    configApplyer(userConfig);
    this.emit('config', this.config);
    if((!config.mobile.show)&&(device.mobile())){
      return;
    }
    import(/* webpackMode: 'lazy' */ './cLive2DApp').then(f => {
      this.coreApp = f;
      this.live2DMgr = this.coreApp.theRealInit(this);
    }).catch(err => {
      console.error(err);
    });
  }


/**
 * Capture current frame to png file {@link captureFrame}
 * @param  {Function} callback The callback function which will receive the current frame
 * @return {null}
 */

  captureFrame(callback){
    return this.coreApp.captureFrame(callback);
  }

/**
 * download current frame {@link L2Dwidget.captureFrame}
 * @return {null}
 */

  downloadFrame(){
    this.captureFrame(
      function(e){
        let link = document.createElement('a');
        document.body.appendChild(link);
        link.setAttribute('type', 'hidden');
        link.href = e;
        link.download = 'live2d.png';
        link.click();
      }
    );
  }

};

let _ = new L2Dwidget();

export {
  _ as L2Dwidget,
}

4、更换模型

在 https://github.com/xiazeyu/live2d-widget-models.git 这个地址可以看到可以用的model，

use npm install {packagename} The package name is the folder name in packages/ We have:
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

安装模型，

# cnpm install live2d-widget-model-shizuku
cnpm install live2d-widget-model-koharu

在 node_modules 目录下可以看到 live2d-widget-model-koharu文件夹，在使用的时候，指定model的json位置即可，

<script type="text/javascript">
    //L2Dwidget.init();
    L2Dwidget.init({
        model: {
    jsonPath: 'node_modules/live2d-widget-model-koharu/assets/koharu.model.json',
    scale: 1,
  },
  display: {
    superSample: 2,
    width: 200,
    height: 400,
    position: 'right',
    hOffset: 0,
    vOffset: -20,
  },
  mobile: {
    show: true,
    scale: 0.8,
    motion: true,
  },
  name: {
    canvas: 'live2dcanvas',
    div: 'live2d-widget',
  },
  react: {
    opacity: 1,
  },
  dev: {
    border: false
  },
  dialog: {
    enable: false,
    script: null
  }
    });
  </script>

5、人物自动说话

在README-SCRIPT.md文件中有介绍，人物可以每 10 秒钟显示一条一言，用的是一言接口，只需要配置 dialog 属性即可，

L2Dwidget.init({
  dialog: {
    // 开启对话框
    enable: true,
    script: {
      // 每空闲 10 秒钟，显示一条一言
      'every idle 10s': '$hitokoto$',
      // 当触摸到星星图案
      'hover .star': '星星在天上而你在我心里 (*/ω＼*)',
      // 当触摸到角色身体
      'tap body': '哎呀！别碰我！',
      // 当触摸到角色头部
      'tap face': '人家已经不是小孩子了！'
    }
  }
});

6、手动调用对话框

L2Dwidget.min.js 中只提供了自动说话的信息框，没有手动调用的接口，因此需要修改源代码新增接口，在 src/index.js 中添加如下代码，

import { alertText } from './dialog';

/**
 * 弹出对话框
 */
alert(text){
        alertText(text);
}

修改后，

//代码省略
import device from 'current-device';
import { config, configApplyer }from './config/configMgr';
import { EventEmitter } from './utils/EventEmitter';
import { alertText } from './dialog';

//代码省略

/**
 * download current frame {@link L2Dwidget.captureFrame}
 * @return {null}
 */

  downloadFrame(){
    this.captureFrame(
      function(e){
        let link = document.createElement('a');
        document.body.appendChild(link);
        link.setAttribute('type', 'hidden');
        link.href = e;
        link.download = 'live2d.png';
        link.click();
      }
    );
  }

/**
 * 弹出对话框
 */

  alert(text){
        alertText(text);
  }
//代码省略

此时只需要执行yarn webpack重新编译就可以，使用示例如下，

// js
L2Dwidget.alert("123456789~");

注意，必须配置 dialog: {enable: true} 开启对话功能，

7、更多模型

https://mx.paul.ren/about

8、补充：Cubism 4 SDK for Web

Cubism 4 SDK for Web 是由 Live2D 开发的一款用于在 Web 环境下实现 Live2D 角色模型的软件开发工具包（SDK）。它是基于 WebGL 技术的，可以将静态的插图转化为具有动态效果的角色模型。除了使用 L2Dwidget.min.js 实现看板娘，也可以使用 SDK 实现。

三、Live2d Desktop

Cubism 4 SDK for Native 是由 Live2D 开发的一款用于在本地应用程序中实现 Live2D 角色模型的软件开发工具包（SDK）。它适用于各种平台，如 Windows、macOS、iOS 和 Android 等。

Cubism 4 SDK for Native 提供了一系列功能和工具，使得开发者可以更加灵活地创建、渲染和控制 Live2D 模型。它支持多种图形 API，如 OpenGL、DirectX 和 Metal，并且提供了丰富的 API 接口，方便开发者进行定制化开发。

使用 Cubism 4 SDK for Native，开发者可以通过加载模型文件、纹理文件和动作数据文件，将 Live2D 模型嵌入到本地应用程序中。SDK 提供了丰富的参数设置和动作控制接口，可以实现模型的移动、旋转、表情变化等交互效果。同时，SDK 还支持用户自定义的着色器和特效，以及模型的物理运动模拟。

1、SDK 下载

# 需要下载 sdk for native
https://www.live2d.com/zh-CHS/download/cubism-sdk/

SDK 解压后的目录是这样子，主要分为三大模块，

1、Core => Live2DCubismCore 的动态链接库

2、Framework => 基本的框架，用于模型的读取和配置

3、Samples => 示例与脚本

2、基于 OpenGL 运行项目

OpenGL（Open Graphics Library）是一个跨平台的图形编程接口，用于渲染二维和三维图形。它由一系列函数和状态机组成，可以在各种操作系统和硬件平台上使用。

OpenGL 提供了一套标准化的接口，使得开发者可以利用硬件加速来创建高性能的图形应用程序。它支持各种图形效果，如光照、阴影、纹理映射等，并且可以处理复杂的几何变换和投影操作。

OpenGL 是一个底层的图形库，它提供了对图形硬件的直接访问，因此具有很高的灵活性和可定制性。开发者可以使用 OpenGL 来创建各种类型的图形应用程序，包括游戏、计算机辅助设计（CAD）、数据可视化等。

OpenGL 的工作原理是通过定义一系列的状态和操作来描述图形对象，并将其发送到图形硬件进行处理和渲染。开发者可以使用 OpenGL 的函数来设置状态、加载纹理、执行变换等操作，从而实现所需的图形效果。

这里以 Win10  为例使用脚本生成 OpenGL 项目，脚本路径为，

\CubismSdkForNative-4-r.7\Samples\OpenGL\Demo\proj.win.cmake\scripts

在此之前我们需要下载对应版本的 glew 和 glfw，因为 OpenGL 需要用到这两个库，

# 发布版本
https://github.com/nigels-com/glew/releases/download/glew-2.2.0/glew-2.2.0.zip
# 发布版本 
https://github.com/glfw/glfw/releases/download/3.3.8/glfw-3.3.8.zip

下载好放到 thirdParty 路径下，

\CubismSdkForNative-4-r.7\Samples\OpenGL\thirdParty

当然，如果网络畅通的话可以直接使用 scripts 中的脚本一键安装，脚本源代码如下，

@echo off

set GLEW_VERSION=2.2.0
set GLFW_VERSION=3.3.8

set SCRIPT_PATH=%~dp0

cd %SCRIPT_PATH%/..

::::::::::::::::
:: Setup GLEW ::
::::::::::::::::

:: Download and extract the archive.
echo - Setup GLEW %GLEW_VERSION%
echo Downloading...
curl -fsSL -o glew.zip ^
  "https://github.com/nigels-com/glew/releases/download/glew-%GLEW_VERSION%/glew-%GLEW_VERSION%.zip"
if %errorlevel% neq 0 pause & exit /b %errorlevel%
echo Extracting...
powershell "$progressPreference = 'silentlyContinue'; expand-archive -force glew.zip ."
if %errorlevel% neq 0 pause & exit /b %errorlevel%
ren glew-%GLEW_VERSION% glew
del glew.zip

::::::::::::::::
:: Setup GLFW ::
::::::::::::::::

echo.

:: Download and extract the archive.
echo - Setup GLFW %GLFW_VERSION%
echo Downloading...
curl -fsSL -o glfw.zip ^
  https://github.com/glfw/glfw/releases/download/%GLFW_VERSION%/glfw-%GLFW_VERSION%.zip
if %errorlevel% neq 0 pause & exit /b %errorlevel%
echo Extracting...
powershell "$progressPreference = 'silentlyContinue'; expand-archive -force glfw.zip ."
if %errorlevel% neq 0 pause & exit /b %errorlevel%
ren glfw-%GLFW_VERSION% glfw
del glfw.zip

echo.
pause

安装好依赖库好，我们执行开头说的脚本，proj_msvc2022.bat，

可以看到项目已经生成，点击 Demo.sln 打开项目，

# 项目路径
\CubismSdkForNative-4-r.7\Samples\OpenGL\Demo\proj.win.cmake\build\proj_msvc2022_x64_mt

直接运行即可，

注：如果报错：can't create glfw Window，要么是虚拟机没开OpenGL，要么是第三库没有安装好，

3、基于 D3D11 运行项目

D3D11（Direct3D 11）是微软公司开发的一种图形编程接口，用于在 Windows 平台上实现高性能的三维图形渲染。它是 DirectX 11 的一部分，是 Direct3D 的最新版本。

D3D11 提供了一套功能强大且灵活的接口，使得开发者可以利用硬件加速来创建复杂的三维图形应用程序。它支持各种图形效果，如光照、阴影、纹理映射等，并且可以处理复杂的几何变换和投影操作。

D3D11 是一个底层的图形库，它直接与图形硬件交互，因此具有很高的性能和可定制性。开发者可以使用 D3D11 来创建各种类型的图形应用程序，包括游戏、计算机辅助设计（CAD）、虚拟现实（VR）等。

D3D11 的工作原理是通过定义一系列的状态和操作来描述图形对象，并将其发送到图形硬件进行处理和渲染。开发者可以使用 D3D11 的接口来设置状态、加载纹理、执行变换等操作，从而实现所需的图形效果。

步骤类同 2，首先到 D3D11 目录下找到 Demo 对应平台的脚本，点击脚本生成项目代码，

然后配置项目的依赖库，在 D3D11 目录下找到 thirdParty 找到安装脚本设置第三方库，这里会下载 DirectX11 库，

最后在 build 目录下找到生成的项目解决方案 Demo.sln，

直接运行项目，

4、补充：虚拟机开启 OpenGL 支持

  1. 在 VirtualBox 中选择您的虚拟机，并点击 "设置"。
  2. 在虚拟机设置窗口中，选择 "显示" 选项卡。
  3. 在 "显示" 选项卡中，确保 "启用 3D 加速" 复选框被选中。
  4. 在 "显卡" 部分，选择 "VBoxVGA" "VBoxSVGA"或 "VMSVGA" 作为显卡控制器。这几个选项都支持 OpenGL 加速。
  5. 点击 "确定" 保存更改并关闭设置窗口。
  6. 启动虚拟机，并在 Windows 10 中安装 VirtualBox Guest Additions。在虚拟机的菜单栏中，选择 "设备" -> "安装增强功能"。

快速生成2D卡通人物的AI工具：开启Live2D角色创作的新时代
这里汇聚了前沿的技术分享与实用的开发技巧，带你探索从创意到企业的技术创业之路。
01-27 2540
随着这一创新工具的推出，我们正见证着Live2D角色创作进入了一个全新的阶段。它不仅极大地简化了角色设计的过程，也为广大创作者提供了一种全新的表达方式。对于那些渴望将脑海中的构思迅速转化为现实的人来说，这无疑是一大福音。现在就访问项目主页，开始探索无限可能吧！t=O83A项目主页https://human3daigc.github.io/Textoon_webpage/
血小板live2d模型
01-31
血小板的live2d模型，没有js文件，只是模型.
Unity--Cubism Live2D模型使用
最新发布
red_redemption的博客
03-08 1256
模型导入到LIVE2D场景之后，会出现这样的问题，因为Editor里的图层顺序安排，在unity里并不适用，要在RenderController里设置后-前 Order，这样部件的排序（大概率是SDK做的Order）就可以改掉unity的展示问题。梳理一下自己的需求，视线追踪要实现，自由切换表情，，，（这个可能还要结合一下语音内容什么的，已经有动作了，表情要怎么处理，，，这个还得考虑）但加上也是可以的，只不过和Clip的动画会有一些出入，比如覆盖clip里规定 的各个参数变化，眼睛一直保持某个状态不变等。
Live2D的简单使用
热门推荐
随风吹笛
01-26 2万+
看了下Live2D，研究了下使用，再次简单的总结下，以便后来查看。 官方网站：http://www.live2d.com/en/ SDK：https://live2d.github.io/#unity 导入后里面有个Samples文件夹，里面是官方示例，每个例子有Description，描述这个例子是做什么的。 Animation是动画的示例，使用的是Animator的方式做的。 Edi
live2d的介绍
qq_45793174的博客
05-28 569
有关live2d的介绍1.安装hexo-helper-live2d2.安装live2d3.配置_config.yml 1.安装hexo-helper-live2d 首先进入Hexo博客根目录安装live2d插件 $ npm install --save hexo-helper-live2d 2.安装live2d 在hexo的配置文件_config.yml中添加如下配置 首先进入Hexo博客根目录安装live2d插件 $ npm install <live2d-widget-model> 3
Live2d技术
ding7530的博客
07-17 770
　　保存一些关于Live2d技术的博文或模型资源，有空研究研究。 　　什么是 live2d？：https://baike.baidu.com/item/Live2D/8496493 　　　　1.https://www.zhangxinxu.com/wordpress/2018/05/live2d-web-webgl-js/ 　　　　2.https://www.wikimoe.com...
探索未来互动新体验：Live2D AI 项目详解
gitblog_00082的博客
04-23 1174
探索未来互动新体验：Live2D AI 项目详解 项目地址:https://gitcode.com/gh_mirrors/li/live2d_ai 项目简介 是一个开源项目，旨在利用人工智能技术和实时渲染技术，将二维（2D）动漫角色转化为可以与用户互动的生动模型。通过这个项目，开发者和爱好者可以创建自己的交互式2D角色应用，为游戏、教育、娱乐等领域带来全新的用户体验。 技术解析 1. Live2D...
个人收集的Live2D模型.zip
05-10
个人收集的Live2D模型 个人收集的Live2D模型 个人收集的Live2D模型 个人收集的Live2D模型 个人收集的Live2D模型 个人收集的Live2D模型 个人收集的Live2D模型 个人收集的Live2D模型 个人收集的Live2D...
renpy-live2d：RenPy的Live2D模块
02-02
8. **调试与优化**：在实际开发过程中，调试Live2D与RenPy的集成问题是很常见的。开发者需要学会使用RenPy的调试工具，并对性能进行优化，确保在不同设备上的流畅运行。 总之，RenPy-live2d为RenPy开发者提供了将...
html集成live2D,demo
07-13
HTML集成Live2D技术是一种将二维动画角色与网页交互结合的方式，它允许用户在网页上与生动活泼的2D角色进行互动。Live2D是一种基于日本Cubism框架的实时三维渲染技术，它通过数学算法将2D图像转化为可动态操控的3D...
live2d模型x9.zip
12-06
《Live2D模型资源探索与应用》 在数字艺术领域，Live2D技术因其独特的表现力和互动性，被广泛应用于游戏、动画、社交媒体等众多场景。本资源包"live2d模型x9.zip"提供了九个不同角色的Live2D模型，包括hiyori_movie...
live2d.zip
07-22
Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像 ，这是live2d简单的 demo ，下载即可用
live2d(2d动画制作软件)v2.1.3官方安装版汉化特别版
07-25
Live2D是一款神奇的免费动画制作软件，通过将 各部分平面图片通过3D组合调节运动，只需几张绘图就可以产生超级流畅的动态效果。需要的朋友们可以下载试试吧！ Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一 种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商
Live2d 查看工具
12-17
Live2dViewer 专用于查看Live2d的软件亲测可用(〃'▽'〃)
JS、live2d，在web页面上的live2d动画萌娘
03-06
在web页面生成一个live2d动画，Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。
vue项目引入live2d-高度自定义方法
07-29
vue项目引入live2d-高度自定义方法
纯干货！live2d动画制作简述以及踩坑
weixin_33772645的博客
10-11 5634
本文来自网易云社区，转载务必请注明出处。1. 概述live2d是由日本Cybernoids公司开发，通过扭曲像素位置营造伪3d空间感的二维动画软件。官网下载安装包直接安装可以得到两种软件，分别是Cubism Modeler和Cubism Animator，最后我们还需要安装第三个软件Viewer用作预览调戏等。由于还是由2d图形制作，所以对动画师要求比较高，除去原画绘制能力，动画师还需要具有一定三...
Live2D模型
Jacob_Yu的博客
12-25 8284
把以下代码添加到 html 即可： <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({ "model": { ...
Live2D WebGL实现
weixin_30851867的博客
02-19 1348
demo预览：http://www.kakinuma.date/l2d.html 官方：http://www.live2d.com/en/ sdk下载：https://link.zhihu.com/?target=http%3A//app2.live2d.com/cubism/sdk/bowiuex/webgl/Live2D_SDK_WebGL_2.0.05_1_en.zip sdk目录： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

金汐脉动 | PulseTide

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值