991 lines
30 KiB
JavaScript
991 lines
30 KiB
JavaScript
"use strict";
|
|
|
|
var l2dviewer;
|
|
var l2dmaster;
|
|
function getQueryParam(key, defaultValue = 0) {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const value = urlParams.get(key);
|
|
return value !== null ? value : defaultValue;
|
|
}
|
|
|
|
class l2dViewer{
|
|
|
|
copyright = true
|
|
containers = new Map()
|
|
_l2dModels = new Map()
|
|
|
|
constructor(element){
|
|
if (document.getElementById("viewer")) {
|
|
document.getElementById("viewer").remove();
|
|
}
|
|
|
|
this._element = element
|
|
this._app = new PIXI.Application({
|
|
hello : false,
|
|
width : 1334,
|
|
height : 750,
|
|
backgroundColor : 0x000000
|
|
});
|
|
|
|
globalThis.__PIXI_APP__ = this._app;
|
|
|
|
this._app.view.setAttribute("id", "viewer");
|
|
element.appendChild(this._app.view);
|
|
|
|
this._resizeViwer();
|
|
window.addEventListener('resize', this._resizeViwer.bind(this));
|
|
|
|
let bgcontainer = new PIXI.Container();
|
|
this._app.stage.addChild(bgcontainer);
|
|
this.containers.set('BG', bgcontainer);
|
|
|
|
let modelcontainer = new PIXI.Container();
|
|
this._app.stage.addChild(modelcontainer);
|
|
this.containers.set('Models', modelcontainer);
|
|
|
|
|
|
const show_background = getQueryParam('show_background', 1); // Returns "22" or 0 if not found
|
|
|
|
if(show_background == 0){
|
|
// this.loadBG('./bg/background004_1/manifest.json')
|
|
|
|
}else{
|
|
this.loadBG('./bg/background004_1/manifest.json')
|
|
}
|
|
}
|
|
|
|
_resizeViwer(){
|
|
|
|
|
|
// Example usage with default fallback
|
|
const num1 = getQueryParam('number1', 1); // Returns "22" or 0 if not found
|
|
const num2 = getQueryParam('number2', 1); // Returns "44" or 0 if not found
|
|
|
|
|
|
|
|
let elewidth = this._element.offsetWidth;
|
|
let eleheight = this._element.offsetHeight;
|
|
|
|
let ratio = Math.min(elewidth / 1334, eleheight / 750);
|
|
|
|
let resizedX = (1334*num1) * ratio;
|
|
let resizedY = (750*num2) * ratio;
|
|
|
|
this._app.view.style.width = `${resizedX}px`;
|
|
this._app.view.style.height = `${resizedY}px`;
|
|
}
|
|
|
|
setBGColor(color) {
|
|
this.containers.get('BG').removeChildren();
|
|
this._app.renderer.background.color = color
|
|
}
|
|
|
|
loadBG(src) {
|
|
this.setBGColor(0xFFFFFF);
|
|
|
|
const bg = BGContainer.from(src);
|
|
this.containers.get('BG').addChild(bg);
|
|
|
|
console.log('background updated');
|
|
}
|
|
|
|
addModel(model){
|
|
if(this._l2dModels.has(model.getIndexName())){
|
|
return;
|
|
}
|
|
|
|
this._l2dModels.set(model.getIndexName(), model);
|
|
this.containers.get('Models').addChild(model._Model);
|
|
|
|
|
|
model.setAnchor(.5);
|
|
model.setScale(.33);
|
|
model._Model.position.set(this._app.screen.width/2, this._app.screen.height * 3/4);
|
|
model.pointerEventBind();
|
|
|
|
let foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);
|
|
foreground.width = model._Model.internalModel.width;
|
|
foreground.height = model._Model.internalModel.height;
|
|
foreground.alpha = 0.2;
|
|
foreground.visible = false
|
|
model.setForeground(foreground)
|
|
|
|
console.log('model loaded')
|
|
}
|
|
|
|
removeModel(name) {
|
|
let model = this._l2dModels.get(name)
|
|
if(!model){
|
|
return;
|
|
}
|
|
this.containers.get('Models').removeChild(model);
|
|
model._Model.destroy();
|
|
this._l2dModels.delete(name);
|
|
|
|
console.log('model removed');
|
|
}
|
|
|
|
isModelInList(name){
|
|
return this._l2dModels.has(name);
|
|
}
|
|
|
|
findModel(name){
|
|
return this._l2dModels.get(name);
|
|
}
|
|
|
|
get app(){
|
|
return this._app;
|
|
}
|
|
|
|
}
|
|
|
|
class BGContainer extends PIXI.Container{
|
|
|
|
static from(source){
|
|
const bg = new this();
|
|
bg._init(source);
|
|
return bg;
|
|
}
|
|
|
|
async _init(source){
|
|
let menifest = await fetch(source).then(res => res.json());
|
|
const folder = source.split('manifest.json')[0]
|
|
|
|
const ratio = 1334 / menifest.env.width;
|
|
const scale = (menifest.env.height * ratio - 750) /2;
|
|
|
|
this.name = menifest.env.name;
|
|
|
|
menifest.elements.forEach((element) => {
|
|
const url = folder + menifest.env.images + element.image
|
|
|
|
const sprite = PIXI.Sprite.from(url);
|
|
sprite.name = element.name;
|
|
|
|
sprite.width = element.width * ratio;
|
|
sprite.height = element.height * ratio;
|
|
|
|
sprite.anchor.set(element.pivotX ?? 0.5, element.pivotY ?? 0.5);
|
|
|
|
if(element.blendMode){
|
|
sprite.blendMode = element.blendMode
|
|
}
|
|
|
|
sprite.position.set(element.x, element.y);
|
|
this.addChild(sprite);
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
PIXI.live2d.CubismConfig.setOpacityFromMotion = true
|
|
|
|
class HeroModel{
|
|
|
|
_container = new PIXI.Container()
|
|
|
|
async create(src){
|
|
let settingsJSON = await fetch(src).then(res => res.json());
|
|
settingsJSON.url = src;
|
|
|
|
this._modelsetting = new PIXI.live2d.Cubism4ModelSettings(settingsJSON);
|
|
this._Model = await PIXI.live2d.Live2DModel.from(settingsJSON);
|
|
|
|
this._ParametersValues = {};
|
|
|
|
this._ParametersValues.breath = [...this._Model.internalModel.breath._breathParameters] //Clone
|
|
this._Model.breathing = false
|
|
this._Model.internalModel.breath._breathParameters = [] //不搖頭
|
|
|
|
this._ParametersValues.eyeBlink = [...this._Model.internalModel.eyeBlink._parameterIds] //Clone
|
|
this._Model.eyeBlinking = false
|
|
this._Model.internalModel.eyeBlink._parameterIds = [] //不眨眼
|
|
|
|
this._ParametersValues.parameter = [] //Clone All Parameters Values
|
|
this.getCoreModel()._parameterIds.map((p, index) => {
|
|
let parameter = {}
|
|
parameter.parameterIds = p
|
|
parameter.max = this.getCoreModel()._parameterMaximumValues[index]
|
|
parameter.min = this.getCoreModel()._parameterMinimumValues[index]
|
|
parameter.defaultValue = this.getCoreModel()._parameterValues[index]
|
|
|
|
this._ParametersValues.parameter.push(parameter)
|
|
})
|
|
|
|
this._ParametersValues.PartOpacity = [] //Clone All Part Opacity
|
|
this.getCoreModel()._partIds.map((p, index) => {
|
|
let part = {}
|
|
part.partId = p
|
|
part.defaultValue = this.getCoreModel().getPartOpacityById(p)
|
|
|
|
this._ParametersValues.PartOpacity.push(part)
|
|
})
|
|
}
|
|
|
|
pointerEventBind() {
|
|
|
|
this._Model.autoInteract = false;
|
|
this._Model.eventMode = 'static';
|
|
|
|
|
|
this._Model.focusing = false;
|
|
|
|
this._Model.buttonMode = true;
|
|
|
|
this._Model.on("pointerdown", (e) => {
|
|
this._Model.dragging = true;
|
|
this._Model._pointerX = e.data.global.x - this._Model.x;
|
|
this._Model._pointerY = e.data.global.y - this._Model.y;
|
|
});
|
|
|
|
this._Model.on("pointermove", (e) => {
|
|
if (this._Model.dragging) {
|
|
this._Model.position.x = e.data.global.x - this._Model._pointerX;
|
|
this._Model.position.y = e.data.global.y - this._Model._pointerY;
|
|
}
|
|
});
|
|
|
|
this._Model.on("pointerupoutside", () => (this._Model.dragging = false));
|
|
this._Model.on("pointerup", () => (this._Model.dragging = false));
|
|
|
|
let viewer = document.getElementById('viewer');
|
|
viewer.addEventListener('pointerdown', (e) => {
|
|
if(this._Model.focusing)
|
|
this._Model.focus(e.clientX, e.clientY)
|
|
});
|
|
}
|
|
|
|
setName(char, cost){
|
|
this._ModelName = char;
|
|
this._costume = cost;
|
|
}
|
|
|
|
setAnchor(x, y){
|
|
if(!y) y = x
|
|
this._Model.anchor.set(x, y);
|
|
}
|
|
|
|
setScale(val){
|
|
this._Model.scale.set(val)
|
|
}
|
|
|
|
setAlpha(val){
|
|
this._Model.aplha = val
|
|
}
|
|
|
|
setAngle(val){
|
|
this._Model.angle = val
|
|
}
|
|
|
|
setForeground(Sprite){
|
|
this._Model.addChild(Sprite)
|
|
}
|
|
|
|
setForegroundVisible(bool){
|
|
this._Model.children[0].visible = bool
|
|
}
|
|
|
|
setInteractive(bool){
|
|
this._Model.interactive = bool
|
|
}
|
|
|
|
setLookatMouse(bool){
|
|
this._Model.focusing = bool
|
|
if(!bool){
|
|
this._Model.focus(this._Model.x, this._Model.y)
|
|
}
|
|
}
|
|
|
|
//!!!!
|
|
// setLookat(value){
|
|
|
|
// if(value == 0){
|
|
// this.getFocusController().focus(0, 0)
|
|
// }else{
|
|
|
|
// let bound = this._Model.getBounds()
|
|
// // console.log(bound)
|
|
|
|
// let center = { x: this._Model.x , y: this._Model.y }
|
|
// let r = this._Model.width
|
|
// // let half_h = this._Model.height / 2
|
|
|
|
// let rand = (value - 90) * (Math.PI / 180)
|
|
// let x = center.x + r * Math.cos(rand)
|
|
// let y = (center.y) + r * Math.sin(rand)
|
|
|
|
// let testGraphics = new PIXI.Graphics()
|
|
// testGraphics.beginFill(0xff0000);
|
|
// testGraphics.drawRect(x, y, 10, 10);
|
|
// testGraphics.endFill();
|
|
|
|
// this._container.addChild(testGraphics)
|
|
|
|
// console.log(x, y)
|
|
|
|
// // this.getFocusController().focus(x, y)
|
|
// this._Model.focus(x, y)
|
|
// console.log(this._Model.focus)
|
|
// }
|
|
// }
|
|
|
|
setParameters(id, value){
|
|
this.getCoreModel().setParameterValueById(id, value)
|
|
}
|
|
|
|
setPartOpacity(id, value){
|
|
this.getCoreModel().setPartOpacityById(id, value)
|
|
}
|
|
|
|
setBreathing(bool){
|
|
this._Model.breathing = bool
|
|
if(!this._Model.breathing){
|
|
this._Model.internalModel.breath._breathParameters = []
|
|
return
|
|
}
|
|
|
|
this._Model.internalModel.breath._breathParameters = [...this._ParametersValues.breath]
|
|
}
|
|
|
|
setEyeBlinking(bool){
|
|
this._Model.eyeBlinking = bool
|
|
if(!this._Model.eyeBlinking){
|
|
this._Model.internalModel.eyeBlink._parameterIds = []
|
|
return
|
|
}
|
|
|
|
this._Model.internalModel.eyeBlink._parameterIds = [...this._ParametersValues.eyeBlink]
|
|
}
|
|
|
|
loadExpression(index){
|
|
this.getExpressionManager().setExpression(index)
|
|
}
|
|
|
|
executeMotionByName = (name, type = '') => {
|
|
let index = this._getMotionByName(type, name)
|
|
this.loadMotion(type, index, 'FORCE')
|
|
}
|
|
|
|
_getMotionByName = (type, name) => {
|
|
let motions = this._modelsetting?.motions
|
|
return motions[type].findIndex(motion => motion.Name == name)
|
|
}
|
|
|
|
loadMotion = (group, index, priority) => {
|
|
this._Model.motion(group, index, priority)
|
|
}
|
|
|
|
|
|
getAnchor(){
|
|
return this._Model.anchor
|
|
}
|
|
|
|
getScale(){
|
|
return this._Model.scale
|
|
}
|
|
|
|
getAlpha(){
|
|
return this.aplha
|
|
}
|
|
|
|
getAngle(){
|
|
return this._Model.angle
|
|
}
|
|
|
|
getIndexName(){
|
|
return `${this._ModelName}_${this._costume}`
|
|
}
|
|
|
|
getSetting(){
|
|
return this._modelsetting
|
|
}
|
|
|
|
getUrl(){
|
|
return this._modelsetting?.url
|
|
}
|
|
|
|
getGroups(){
|
|
return this._modelsetting?.groups
|
|
}
|
|
|
|
getExpressions(){
|
|
return this._modelsetting?.expressions
|
|
}
|
|
|
|
getMotions(){
|
|
return this._modelsetting?.motions
|
|
}
|
|
|
|
getParamById(id){
|
|
return this._ParametersValues.parameter.find(x => x.parameterIds == id)
|
|
}
|
|
|
|
getAllParameters(){
|
|
return this._ParametersValues.parameter
|
|
}
|
|
|
|
getPartOpacityById(id){
|
|
return this._ParametersValues.PartOpacity.find(x => x.partId == id)
|
|
}
|
|
|
|
getAllPartOpacity(){
|
|
return this._ParametersValues.PartOpacity
|
|
}
|
|
|
|
getCoreModel(){
|
|
return this._Model.internalModel.coreModel
|
|
}
|
|
|
|
getMotionManager(){
|
|
return this._Model?.internalModel.motionManager
|
|
}
|
|
|
|
getFocusController(){
|
|
return this._Model?.internalModel.focusController
|
|
}
|
|
|
|
getExpressionManager(){
|
|
return this._Model?.internalModel.motionManager.expressionManager
|
|
}
|
|
|
|
}
|
|
|
|
const setupCharacterSelect = (data) => {
|
|
let select = document.getElementById('characterSelect');
|
|
let inner = `<option>Select</option>`
|
|
|
|
data.Master.map((val) => {
|
|
inner += `<option value="${val.id}">${val.name}</option>`
|
|
})
|
|
|
|
select.innerHTML = inner
|
|
|
|
select.onchange = (e) => {
|
|
if (e.target.selectedIndex == 0) {
|
|
return;
|
|
}
|
|
|
|
let cid = e.target.value;
|
|
let options = data.Master.find(x => x.id == cid)
|
|
setupCostumeSelect(options)
|
|
}
|
|
}
|
|
|
|
const setupCanvasBackgroundOption = (data) => {
|
|
let list = document.getElementById('background-list');
|
|
|
|
data.map((val)=>{
|
|
let btn = document.createElement('button')
|
|
btn.innerHTML = `<img src='./image/${val.thumbnail}'><img>`
|
|
btn.onclick = () => {
|
|
l2dviewer?.loadBG(`./bg/${val.background_src}`)
|
|
}
|
|
|
|
list.append(btn)
|
|
})
|
|
|
|
}
|
|
|
|
const setupCostumeSelect = (options) => {
|
|
let select = document.getElementById('costumeSelect');
|
|
let inner = ``
|
|
|
|
options.live2d.map(val => {
|
|
inner += `<option value="${val.costumeId}">${val.costumeName}</option>`
|
|
})
|
|
|
|
select.innerHTML = inner
|
|
}
|
|
|
|
const toggleTabContainer = (tabid) => {
|
|
let tabcons = document.getElementsByClassName('tab-content')
|
|
Array.from(tabcons).forEach(element => {
|
|
element.classList.remove('shown');
|
|
})
|
|
|
|
let tabbtns = document.getElementsByClassName('tab-btn')
|
|
Array.from(tabbtns).forEach(element => {
|
|
element.classList.remove('btn-selecting');
|
|
})
|
|
|
|
let ele = document.getElementById(tabid)
|
|
ele?.classList.add('shown')
|
|
|
|
let elebtn = document.getElementById(`${tabid}btn`)
|
|
elebtn?.classList.add('btn-selecting')
|
|
}
|
|
|
|
const setupModelSetting = (M) => {
|
|
let info_ModelName = document.getElementById('info-ModelName')
|
|
let info_CostumeName = document.getElementById('info-CostumeName')
|
|
|
|
info_ModelName.innerHTML = M._ModelName
|
|
info_CostumeName.innerHTML = M._costume
|
|
|
|
let backBtn = document.getElementById('back-btn')
|
|
backBtn.onclick = () => {
|
|
toggleTabContainer('Models')
|
|
}
|
|
|
|
Array.from(document.getElementsByClassName('collapsible')).forEach(x => {
|
|
x.classList.remove('active')
|
|
let content = x.nextElementSibling;
|
|
content.style.display = "none";
|
|
})
|
|
|
|
|
|
//SET UP SCALE PARAMETER
|
|
let scale_Range = document.getElementById('scaleRange')
|
|
let scale_Num = document.getElementById('scaleNum')
|
|
scale_Range.value = M.getScale().x
|
|
scale_Num.value = scale_Range.value
|
|
scale_Range.oninput = function(e) {
|
|
scale_Num.value = this.value
|
|
M.setScale(this.value)
|
|
}
|
|
scale_Num.oninput = function(e){
|
|
if(this.value == ""){
|
|
this.value = scale_Range.value
|
|
return
|
|
}
|
|
|
|
if(parseInt(this.value) < parseInt(this.min)){
|
|
this.value = this.min;
|
|
}
|
|
if(parseInt(this.value) > parseInt(this.max)){
|
|
this.value = this.max;
|
|
}
|
|
scale_Range.value = this.value
|
|
M.setScale(this.value)
|
|
}
|
|
|
|
//SET UP ANGLE PARAMETER
|
|
let angle_Range = document.getElementById('angleRange')
|
|
let angle_Num = document.getElementById('angleNum')
|
|
angle_Range.value = M.getAngle()
|
|
angle_Num.value = angle_Range.value
|
|
angle_Range.oninput = function(e){
|
|
angle_Num.value = this.value
|
|
M.setAngle(this.value)
|
|
}
|
|
angle_Num.oninput = function(e){
|
|
if(this.value == ""){
|
|
this.value = angle_Range.value
|
|
return
|
|
}
|
|
|
|
if(parseInt(this.value) < parseInt(this.min)){
|
|
this.value = this.min;
|
|
}
|
|
if(parseInt(this.value) > parseInt(this.max)){
|
|
this.value = this.max;
|
|
}
|
|
angle_Range.value = this.value
|
|
M.setAngle(this.value)
|
|
}
|
|
|
|
//!!!!
|
|
// let test_Range = document.getElementById('test')
|
|
// let test_Num = document.getElementById('testNum')
|
|
// test_Range.value = M.getAngle()
|
|
// test_Num.value = test_Range.value
|
|
// test_Range.oninput = function(e){
|
|
// test_Num.value = this.value
|
|
// M.setLookat(this.value)
|
|
// }
|
|
// test_Num.oninput = function(e){
|
|
// if(this.value == ""){
|
|
// this.value = test_Range.value
|
|
// return
|
|
// }
|
|
|
|
// if(parseInt(this.value) < parseInt(this.min)){
|
|
// this.value = this.min;
|
|
// }
|
|
// if(parseInt(this.value) > parseInt(this.max)){
|
|
// this.value = this.max;
|
|
// }
|
|
// test_Range.value = this.value
|
|
// M.setLookat(this.value)
|
|
|
|
// }
|
|
|
|
//SET UP MOUTHOPEN PARAMETER
|
|
let paramMouthOpenYRange = document.getElementById('paramMouthOpenYRange')
|
|
let paramMouthOpenYNum = document.getElementById('paramMouthOpenYNum')
|
|
let param = M.getParamById('ParamMouthOpenY')
|
|
paramMouthOpenYRange.max = param.max
|
|
paramMouthOpenYRange.min = param.min
|
|
paramMouthOpenYRange.value = M.getCoreModel().getPartOpacityById('ParamMouthOpenY')
|
|
paramMouthOpenYNum.max = param.max
|
|
paramMouthOpenYNum.min = param.min
|
|
paramMouthOpenYNum.value = paramMouthOpenYRange.value
|
|
paramMouthOpenYRange.oninput = function(e){
|
|
paramMouthOpenYNum.value = this.value
|
|
M.getCoreModel().setParameterValueById('ParamMouthOpenY', this.value)
|
|
}
|
|
paramMouthOpenYNum.oninput = function(e){
|
|
if(this.value == ""){
|
|
this.value = paramMouthOpenYRange.value
|
|
return
|
|
}
|
|
|
|
if(parseInt(this.value) < parseInt(this.min)){
|
|
this.value = this.min;
|
|
}
|
|
if(parseInt(this.value) > parseInt(this.max)){
|
|
this.value = this.max;
|
|
}
|
|
paramMouthOpenYRange.value = this.value
|
|
M.getCoreModel().setParameterValueById('ParamMouthOpenY', this.value)
|
|
}
|
|
|
|
//SET UP INTERACTIVE
|
|
let focusingCheckbox = document.getElementById('FocusingCheckbox')
|
|
focusingCheckbox.checked = M._Model.focusing
|
|
focusingCheckbox.onchange = function(e){
|
|
M.setLookatMouse(this.checked);
|
|
}
|
|
|
|
// SET UP BREATH
|
|
let breathingCheckbox = document.getElementById('breathingCheckbox')
|
|
breathingCheckbox.checked = M._Model.breathing
|
|
breathingCheckbox.onchange = function(e){
|
|
M.setBreathing(this.checked);
|
|
}
|
|
|
|
//SET UP EYEBLINKING
|
|
let eyeBlinkingCheckbox = document.getElementById('eyeBlinkingCheckbox')
|
|
eyeBlinkingCheckbox.checked = M._Model.eyeBlinking
|
|
eyeBlinkingCheckbox.onchange = function(e){
|
|
M.setEyeBlinking(this.checked);
|
|
}
|
|
|
|
// SET UP FOREGROUND
|
|
let foregroundCheckbox = document.getElementById('foregroundCheckbox')
|
|
foregroundCheckbox.checked = M._Model.children[0].visible
|
|
foregroundCheckbox.onchange = function(e){
|
|
M.setForegroundVisible(this.checked);
|
|
}
|
|
|
|
//Drag
|
|
let dragCheckbox = document.getElementById('dragCheckbox')
|
|
dragCheckbox.checked = M._Model.interactive
|
|
dragCheckbox.onchange = function(e){
|
|
M.setInteractive(this.checked)
|
|
}
|
|
|
|
|
|
//SET UP EXPRESSTIONS LIST
|
|
let expressionslist = document.getElementById('expressions-list')
|
|
let expressions = M.getExpressions()
|
|
expressionslist.innerHTML = ''
|
|
Array.from(expressions).forEach((exp, index)=>{
|
|
let expbtn = document.createElement("button");
|
|
expbtn.innerHTML = exp['Name']
|
|
expbtn.id = `${exp['Name']}-id`; // 👈 Set your desired ID here
|
|
expbtn.addEventListener('click', ()=>{
|
|
M.loadExpression(index)
|
|
})
|
|
|
|
expressionslist.append(expbtn)
|
|
})
|
|
|
|
// load_list_for_buttons_from_a_div__and_programatically_click_button(expressionslist,2); // facial expressions / emotions
|
|
|
|
//SET UP MOTIONS LIST
|
|
let motionslist = document.getElementById('motion-list')
|
|
let motions = M.getMotions()
|
|
motionslist.innerHTML = ''
|
|
|
|
for (const key in motions) {
|
|
Array.from(motions[key]).forEach((m, index) => {
|
|
|
|
if(m['File'].includes('loop')){
|
|
return
|
|
}
|
|
|
|
let motionbtn = document.createElement("button");
|
|
motionbtn.innerHTML = m['Name']
|
|
motionbtn.id = `${m['Name']}-id`; // 👈 Set your desired ID here
|
|
motionbtn.addEventListener("click", ()=>{
|
|
M.loadMotion(key, index, 'FORCE')
|
|
})
|
|
|
|
motionslist.append(motionbtn)
|
|
// console.log("below is the object")
|
|
// console.log( `${m['Name']}-id` )
|
|
|
|
})
|
|
}
|
|
|
|
|
|
load_list_for_buttons_from_a_div__and_programatically_click_button(motionslist,16);// pose / position
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//SET UP MODEL PARAMETER LIST
|
|
let parameterslist = document.getElementById('parameters-list')
|
|
let parameter = M.getAllParameters()
|
|
parameterslist.innerHTML = ''
|
|
|
|
parameter.map((param) => {
|
|
let p_div = document.createElement("div");
|
|
p_div.className = 'rangeOption'
|
|
p_div.innerHTML += `<p>${param.parameterIds}</p>`
|
|
|
|
let range = document.createElement("input");
|
|
range.type = 'range'
|
|
range.className = 'input-range'
|
|
range.id = `${param.parameterIds}-id`;// modified my yuv.
|
|
range.setAttribute('step', 0.01)
|
|
range.setAttribute('min', param.min)
|
|
range.setAttribute('max', param.max)
|
|
range.value = param.defaultValue
|
|
p_div.append(range)
|
|
|
|
let text = document.createElement("input");
|
|
text.type = 'number'
|
|
text.setAttribute('step', 0.01)
|
|
text.setAttribute('min', param.min)
|
|
text.setAttribute('max', param.max)
|
|
text.value = param.defaultValue
|
|
p_div.append(text)
|
|
|
|
range.addEventListener('input', function(e){
|
|
text.value = this.value
|
|
M.setParameters(param.parameterIds, this.value)
|
|
})
|
|
|
|
text.addEventListener('input', function(e){
|
|
if(this.value == ""){
|
|
this.value = range.value
|
|
return
|
|
}
|
|
|
|
if(parseInt(this.value) < parseInt(this.min)){
|
|
this.value = this.min;
|
|
}
|
|
if(parseInt(this.value) > parseInt(this.max)){
|
|
this.value = this.max;
|
|
}
|
|
range.value = this.value
|
|
M.setParameters(param.parameterIds, this.value)
|
|
})
|
|
|
|
parameterslist.append(p_div)
|
|
})
|
|
|
|
//SET UP MODEL PartOpacity LIST
|
|
let partOpacityList = document.getElementById('partOpacity-list')
|
|
let partOpacity = M.getAllPartOpacity()
|
|
partOpacityList.innerHTML = ''
|
|
|
|
partOpacity.map((param) => {
|
|
let p_div = document.createElement("div");
|
|
p_div.className = 'rangeOption'
|
|
p_div.innerHTML += `<p>${param.partId}</p>`
|
|
|
|
let range = document.createElement("input");
|
|
range.type = 'range'
|
|
range.className = 'input-range'
|
|
range.setAttribute('step', 0.1)
|
|
range.setAttribute('min', 0)
|
|
range.setAttribute('max', 1)
|
|
range.value = param.defaultValue
|
|
p_div.append(range)
|
|
|
|
let text = document.createElement("input");
|
|
text.type = 'number'
|
|
text.setAttribute('step', 0.1)
|
|
text.setAttribute('min', 0)
|
|
text.setAttribute('max', 1)
|
|
text.value = param.defaultValue
|
|
p_div.append(text)
|
|
|
|
range.addEventListener('input', function(e){
|
|
text.value = this.value
|
|
M.setPartOpacity(param.partId, this.value)
|
|
})
|
|
|
|
text.addEventListener('input', function(e){
|
|
if(this.value == ""){
|
|
this.value = range.value
|
|
return
|
|
}
|
|
|
|
if(parseInt(this.value) < parseInt(this.min)){
|
|
this.value = this.min;
|
|
}
|
|
if(parseInt(this.value) > parseInt(this.max)){
|
|
this.value = this.max;
|
|
}
|
|
range.value = this.value
|
|
M.setPartOpacity(param.partId, this.value)
|
|
})
|
|
|
|
partOpacityList.append(p_div)
|
|
})
|
|
|
|
}
|
|
|
|
$(document).ready(async() => {
|
|
|
|
await fetch('./json/live2dMaster.json')
|
|
.then(function (response) {
|
|
if (!response.ok) {
|
|
throw Error(response.statusText);
|
|
}
|
|
return response;
|
|
})
|
|
.then(response => response.json())
|
|
.then(json => {
|
|
l2dmaster = json;
|
|
setupCharacterSelect(l2dmaster);
|
|
|
|
|
|
select_model();
|
|
}).catch(function (error) {
|
|
console.log('failed while loading index.json.');
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
await fetch('./json/bg.json')
|
|
.then(function (response) {
|
|
if (!response.ok) {
|
|
throw Error(response.statusText);
|
|
}
|
|
return response;
|
|
})
|
|
.then(response => response.json())
|
|
.then(json => {
|
|
setupCanvasBackgroundOption(json);
|
|
|
|
select_dress();
|
|
}).catch(function (error) {
|
|
console.log('failed while loading bg.json.');
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
l2dviewer = new l2dViewer(document.getElementById('viewer-place'))
|
|
|
|
document.getElementById('addL2DModelBtn').onclick = async () => {
|
|
let charvalue = document.getElementById('characterSelect');
|
|
let costvalue = document.getElementById('costumeSelect');
|
|
|
|
if(charvalue.selectedIndex == 0 || costvalue.value == ''){
|
|
return
|
|
}
|
|
|
|
let fulldata = l2dmaster.Master.find(x => {return x.id == charvalue.value})
|
|
let costdata = fulldata.live2d.find(y => y.costumeId == costvalue.value)
|
|
|
|
charvalue.selectedIndex = 0
|
|
costvalue.innerHTML = ''
|
|
|
|
if(l2dviewer.isModelInList(`${fulldata.name}_${costdata.costumeName}`)){
|
|
return
|
|
}
|
|
|
|
let M = new HeroModel()
|
|
// await M.setModel(costdata.path)
|
|
await M.create(costdata.path)
|
|
M.setName(fulldata.name, costdata.costumeName)
|
|
l2dviewer.addModel(M)
|
|
|
|
let modelsList = document.getElementById('ModelsList')
|
|
|
|
let infoblock = document.createElement("div");
|
|
infoblock.className = 'modelInfoBlock'
|
|
infoblock.innerHTML += `<h3 class="ModelName">${fulldata.name}</h3>
|
|
<h5 class="CostumeName">【${costdata.costumeName}】</h5>`
|
|
|
|
let removeBtn = document.createElement("button");
|
|
removeBtn.className = "model-remove-btn"
|
|
removeBtn.innerHTML = `<i class="fa-solid fa-xmark"></i>`
|
|
removeBtn.onclick = () => {
|
|
infoblock.remove();
|
|
l2dviewer.removeModel(`${fulldata.name}_${costdata.costumeName}`)
|
|
}
|
|
infoblock.append(removeBtn)
|
|
|
|
let settingBtn = document.createElement("button");
|
|
settingBtn.className = "model-setting-btn"
|
|
settingBtn.id = "model-setting-btn-id";
|
|
|
|
settingBtn.innerHTML = `<i class="fa-solid fa-ellipsis"></i>`
|
|
settingBtn.onclick = () =>{
|
|
toggleTabContainer('ModelSetting')
|
|
setupModelSetting(l2dviewer.findModel(`${fulldata.name}_${costdata.costumeName}`))
|
|
}
|
|
infoblock.append(settingBtn)
|
|
|
|
modelsList.append(infoblock)
|
|
|
|
|
|
do_the_clicking();
|
|
}
|
|
|
|
document.getElementById("colorPicker").onchange = function(e) {
|
|
l2dviewer.setBGColor(String(this.value).replace(/#/, '0x'))
|
|
}
|
|
|
|
// let copyrightCheckbox = document.getElementById("copyrightCheckbox");
|
|
// copyrightCheckbox.checked = l2dviewer.copyright
|
|
// copyrightCheckbox.onchange = function(e){
|
|
// l2dviewer.switchCopyright()
|
|
// }
|
|
|
|
document.getElementById('snapshotBtn').onclick = async() => {
|
|
if(!l2dviewer.app) return;
|
|
const renderer = l2dviewer.app.renderer
|
|
const texture = renderer.generateTexture(l2dviewer.app.stage, {
|
|
region : {
|
|
x : 0,
|
|
y : 0,
|
|
width : renderer.width,
|
|
height : renderer.height
|
|
}
|
|
})
|
|
const iamge = await renderer.extract.image(texture);
|
|
let screenshot = document.createElement('a');
|
|
screenshot.download = 'snapshot.png'
|
|
screenshot.href = iamge.src;
|
|
screenshot.click();
|
|
}
|
|
|
|
document.getElementById('model_snapshotBtn').onclick = async() => {
|
|
let container = l2dviewer.containers.get('Models');
|
|
if(!container || !l2dviewer.app) return;
|
|
const iamge = await l2dviewer.app.renderer.extract.image(container);
|
|
let screenshot = document.createElement('a');
|
|
screenshot.download = 'model_snapshot.png'
|
|
screenshot.href = iamge.src;
|
|
screenshot.click();
|
|
}
|
|
|
|
Array.from(document.getElementsByClassName('collapsible')).forEach(x => {
|
|
x.addEventListener('click', function() {
|
|
this.classList.toggle("active");
|
|
let content = this.nextElementSibling;
|
|
if (content.style.display === "block") {
|
|
content.style.display = "none";
|
|
} else {
|
|
content.style.display = "block";
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
|
|
}) |