当前位置： 首页 > news >正文

网站开发体会网络广告案例

news 2025/8/10 19:16:58
网站开发体会,网络广告案例,厦门企业自助建站,软件定制一条龙When you cry for missing the sun, you will miss the stars again. 当你为错过太阳而哭泣时，你也要再错过群星了。 ——泰戈尔 一、Live2d 简介 Live2D是一种基于2D图像的动态角色技术，它能够将静态的2D角色转化为具有丰富表情和动作的实时交互角色。…

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 offset GLEW_VERSION=2.2.0
set GLFW_VERSION=3.3.8set SCRIPT_PATH=%~dp0cd %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.zipecho.
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。在虚拟机的菜单栏中，选择 "设备" -> "安装增强功能"。

http://www.mmbaike.com/news/96339.html

相关文章：

  • qq电脑版官网入口百度快照seo
  • wordpress网站语言包爱链在线
  • 广汉市 建设局网站津seo快速排名
  • 新手怎么做淘宝店铺怎么做seo
  • wordpress查看需要密码汕头seo管理
  • 南昌网站建设公司特色2021最近比较火的营销事件
  • 免费网站建站w拉新推广渠道
  • 做外贸英文网站网络营销未来有哪些发展趋势
  • 做面包网站站长统计app软件大全
  • 珠海手机建站模板网店关键词怎么优化
  • 网站免费打包ios青岛网站建设维护
  • 国家市场监督管理总局官网入口快速seo优化
  • 银川网站建设一条龙北京百度搜索优化
  • 烟台网站排名优化价格海淀区seo多少钱
  • 哈尔滨开发网站优化是什么梗
  • 电器网站制作价格教育机构加盟
  • 成都室内装修设计培训徐州新站百度快照优化
  • 临沂网站制作策划seo查询软件
  • 网站首页百度收录怎么做搜索引擎优化的方法
  • 微信企业网站 源码站长工具排名分析
  • 广西钦州有人帮做网站的公司吗百度首页登录入口
  • 科技资讯网站开发大纲网络推广外包注意哪些
  • 在什么网站可以做推广线上推广的渠道和方法
  • 重庆今天的新消息网站权重优化
  • 深圳公司网站建设设计百度搜索引擎优化的养成良好心态
  • Wordpress和drupal开发江苏短视频seo搜索
  • 服装网站怎么做的做一个企业网站需要多少钱
  • 青岛做网站找哪家好自己怎么做引流推广
  • 公司网站建设后期维护网站seo教程
  • 虚拟主机网站建设最近新闻有哪些