470 lines
16 KiB
JavaScript
470 lines
16 KiB
JavaScript
|
import * as THREE from 'three';
|
|||
|
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
|||
|
|
import { VRMLoaderPlugin } from '@pixiv/three-vrm';
|
|||
|
|
|
|||
|
|
function initChatAvatarWidget() {
|
|||
|
|
const widget = document.getElementById('chat-avatar-widget');
|
|||
|
|
const stage = document.getElementById('chat-avatar-stage');
|
|||
|
|
const canvas = document.getElementById('chat-avatar-canvas');
|
|||
|
|
const speech = document.getElementById('chat-avatar-speech');
|
|||
|
|
const status = document.getElementById('chat-avatar-status');
|
|||
|
|
|
|||
|
|
if (!widget || !stage || !canvas || !speech || !status || window.chatAvatarWidgetInitialized) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const avatarPresets = [
|
|||
|
|
{
|
|||
|
|
label: '暗夜系',
|
|||
|
|
speech: '这套暗系角色会更接近你刚才给我的参考方向。',
|
|||
|
|
url: 'https://cdn.jsdelivr.net/gh/madjin/vrm-samples@master/vroid/beta/Darkness_Shibu.vrm',
|
|||
|
|
twist: -0.2,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '冷灰系',
|
|||
|
|
speech: '这一套更偏高冷一些，但还是偏可爱，不如暗夜系成熟。',
|
|||
|
|
url: 'https://cdn.jsdelivr.net/gh/madjin/vrm-samples@master/vroid/beta/Sendagaya_Shino.vrm',
|
|||
|
|
twist: -0.08,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '甜酷系',
|
|||
|
|
speech: '这套会更明艳一些，适合后面继续往甜辣路线改。',
|
|||
|
|
url: 'https://cdn.jsdelivr.net/gh/madjin/vrm-samples@master/vroid/beta/Victoria_Rubin.vrm',
|
|||
|
|
twist: -0.12,
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const expressions = [
|
|||
|
|
{ label: '冷淡', preset: 'neutral', speech: '现在先用冷感表情看整体质感。' },
|
|||
|
|
{ label: '浅笑', preset: 'happy', speech: '带一点笑意以后，气质会柔一点。' },
|
|||
|
|
{ label: '慵懒', preset: 'relaxed', speech: '这种神态更适合成熟一点的虚拟人物。' },
|
|||
|
|
{ label: '惊讶', preset: 'surprised', speech: '表情系统后面还能接聊天互动和动作触发。' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const state = {
|
|||
|
|
collapsed: false,
|
|||
|
|
dragging: false,
|
|||
|
|
dragStartX: 0,
|
|||
|
|
manualRotateY: -0.18,
|
|||
|
|
hoverYaw: 0,
|
|||
|
|
hoverPitch: 0,
|
|||
|
|
waveUntil: 0,
|
|||
|
|
modelIndex: 0,
|
|||
|
|
expressionIndex: 0,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
let scene = null;
|
|||
|
|
let camera = null;
|
|||
|
|
let renderer = null;
|
|||
|
|
let clock = null;
|
|||
|
|
let mixerRoot = null;
|
|||
|
|
let avatarSlot = null;
|
|||
|
|
let loader = null;
|
|||
|
|
let currentVrm = null;
|
|||
|
|
let currentArmBones = null;
|
|||
|
|
let resizeObserver = null;
|
|||
|
|
let speechTimer = null;
|
|||
|
|
const sparkles = [];
|
|||
|
|
|
|||
|
|
function setSpeech(text) {
|
|||
|
|
speech.textContent = text;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function setStatus(text, isError = false) {
|
|||
|
|
status.textContent = text;
|
|||
|
|
status.style.display = text ? 'block' : 'none';
|
|||
|
|
status.style.background = isError ? 'rgba(153, 27, 27, 0.84)' : 'rgba(15, 23, 42, 0.55)';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getHumanoidBone(humanoid, name) {
|
|||
|
|
return humanoid.getRawBoneNode?.(name) ?? humanoid.getNormalizedBoneNode?.(name) ?? null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fitAvatarToStage(vrmScene) {
|
|||
|
|
const box = new THREE.Box3().setFromObject(vrmScene);
|
|||
|
|
const size = box.getSize(new THREE.Vector3());
|
|||
|
|
const targetHeight = 1.96;
|
|||
|
|
const targetWidth = 1.22;
|
|||
|
|
const scale = Math.min(
|
|||
|
|
targetHeight / Math.max(size.y, 0.001),
|
|||
|
|
targetWidth / Math.max(size.x, 0.001)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
vrmScene.scale.setScalar(scale);
|
|||
|
|
vrmScene.updateMatrixWorld(true);
|
|||
|
|
|
|||
|
|
const scaledBox = new THREE.Box3().setFromObject(vrmScene);
|
|||
|
|
const scaledCenter = scaledBox.getCenter(new THREE.Vector3());
|
|||
|
|
const floorY = -1.02;
|
|||
|
|
|
|||
|
|
vrmScene.position.set(
|
|||
|
|
-scaledCenter.x,
|
|||
|
|
floorY - scaledBox.min.y - 0.03,
|
|||
|
|
-scaledCenter.z
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function collectArmBones(vrm) {
|
|||
|
|
const humanoid = vrm.humanoid;
|
|||
|
|
if (!humanoid) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
leftUpperArm: getHumanoidBone(humanoid, 'leftUpperArm'),
|
|||
|
|
leftLowerArm: getHumanoidBone(humanoid, 'leftLowerArm'),
|
|||
|
|
rightUpperArm: getHumanoidBone(humanoid, 'rightUpperArm'),
|
|||
|
|
rightLowerArm: getHumanoidBone(humanoid, 'rightLowerArm'),
|
|||
|
|
neck: getHumanoidBone(humanoid, 'neck'),
|
|||
|
|
spine: getHumanoidBone(humanoid, 'spine'),
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resetExpressions() {
|
|||
|
|
if (!currentVrm?.expressionManager) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
['neutral', 'happy', 'relaxed', 'surprised', 'angry', 'sad'].forEach((name) => {
|
|||
|
|
currentVrm.expressionManager.setValue(name, 0);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applyExpression() {
|
|||
|
|
const expression = expressions[state.expressionIndex];
|
|||
|
|
if (!expression) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resetExpressions();
|
|||
|
|
|
|||
|
|
if (currentVrm?.expressionManager && expression.preset !== 'neutral') {
|
|||
|
|
currentVrm.expressionManager.setValue(expression.preset, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setSpeech(`${avatarPresets[state.modelIndex].label} ${expression.label}：${expression.speech}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadAvatar(index) {
|
|||
|
|
const preset = avatarPresets[index];
|
|||
|
|
if (!preset || !loader || !avatarSlot) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setStatus(`正在加载 ${preset.label}...`);
|
|||
|
|
setSpeech(preset.speech);
|
|||
|
|
|
|||
|
|
if (currentVrm?.scene) {
|
|||
|
|
avatarSlot.remove(currentVrm.scene);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
currentVrm = null;
|
|||
|
|
currentArmBones = null;
|
|||
|
|
|
|||
|
|
loader.load(
|
|||
|
|
preset.url,
|
|||
|
|
(gltf) => {
|
|||
|
|
const vrm = gltf.userData.vrm;
|
|||
|
|
if (!vrm) {
|
|||
|
|
setStatus('模型加载成功，但未识别到 VRM 数据。', true);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
currentVrm = vrm;
|
|||
|
|
currentVrm.scene.rotation.y = Math.PI + preset.twist;
|
|||
|
|
fitAvatarToStage(currentVrm.scene);
|
|||
|
|
avatarSlot.add(currentVrm.scene);
|
|||
|
|
currentArmBones = collectArmBones(currentVrm);
|
|||
|
|
state.expressionIndex = 0;
|
|||
|
|
applyExpression();
|
|||
|
|
setStatus('');
|
|||
|
|
},
|
|||
|
|
undefined,
|
|||
|
|
(error) => {
|
|||
|
|
console.error('VRM 角色加载失败', error);
|
|||
|
|
setStatus('二次元角色加载失败，可能是外部模型资源被拦截了。', true);
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function buildScene() {
|
|||
|
|
scene = new THREE.Scene();
|
|||
|
|
clock = new THREE.Clock();
|
|||
|
|
|
|||
|
|
camera = new THREE.PerspectiveCamera(28, 1, 0.1, 100);
|
|||
|
|
camera.position.set(0, 0.4, 4.35);
|
|||
|
|
camera.lookAt(0, -0.02, 0);
|
|||
|
|
|
|||
|
|
renderer = new THREE.WebGLRenderer({
|
|||
|
|
canvas,
|
|||
|
|
alpha: true,
|
|||
|
|
antialias: true,
|
|||
|
|
powerPreference: 'high-performance',
|
|||
|
|
});
|
|||
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
|
|||
|
|
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
|||
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|||
|
|
renderer.toneMappingExposure = 0.88;
|
|||
|
|
|
|||
|
|
scene.add(new THREE.HemisphereLight('#f5ecf7', '#8098cb', 1.15));
|
|||
|
|
|
|||
|
|
const keyLight = new THREE.DirectionalLight('#fff6fb', 1.45);
|
|||
|
|
keyLight.position.set(2.4, 4.2, 4.2);
|
|||
|
|
scene.add(keyLight);
|
|||
|
|
|
|||
|
|
const fillLight = new THREE.DirectionalLight('#f0d6ff', 0.72);
|
|||
|
|
fillLight.position.set(-2.8, 1.6, 3.1);
|
|||
|
|
scene.add(fillLight);
|
|||
|
|
|
|||
|
|
const rimLight = new THREE.DirectionalLight('#c4cfff', 0.56);
|
|||
|
|
rimLight.position.set(-2.4, 2.2, -2.4);
|
|||
|
|
scene.add(rimLight);
|
|||
|
|
|
|||
|
|
mixerRoot = new THREE.Group();
|
|||
|
|
scene.add(mixerRoot);
|
|||
|
|
|
|||
|
|
const pedestal = new THREE.Mesh(
|
|||
|
|
new THREE.CylinderGeometry(0.94, 1.1, 0.22, 36),
|
|||
|
|
new THREE.MeshToonMaterial({ color: '#eadce8' })
|
|||
|
|
);
|
|||
|
|
pedestal.position.set(0, -1.12, 0);
|
|||
|
|
mixerRoot.add(pedestal);
|
|||
|
|
|
|||
|
|
const ring = new THREE.Mesh(
|
|||
|
|
new THREE.TorusGeometry(0.78, 0.04, 12, 38),
|
|||
|
|
new THREE.MeshToonMaterial({ color: '#d7b2d3' })
|
|||
|
|
);
|
|||
|
|
ring.position.set(0, -0.98, 0);
|
|||
|
|
ring.rotation.x = Math.PI / 2;
|
|||
|
|
mixerRoot.add(ring);
|
|||
|
|
|
|||
|
|
avatarSlot = new THREE.Group();
|
|||
|
|
mixerRoot.add(avatarSlot);
|
|||
|
|
|
|||
|
|
const sparkleMaterialA = new THREE.MeshToonMaterial({ color: '#fff4b0' });
|
|||
|
|
const sparkleMaterialB = new THREE.MeshToonMaterial({ color: '#ffffff' });
|
|||
|
|
|
|||
|
|
for (let i = 0; i < 18; i++) {
|
|||
|
|
const sparkle = new THREE.Mesh(
|
|||
|
|
new THREE.OctahedronGeometry(0.045, 0),
|
|||
|
|
i % 2 === 0 ? sparkleMaterialA : sparkleMaterialB
|
|||
|
|
);
|
|||
|
|
const angle = (Math.PI * 2 * i) / 18;
|
|||
|
|
const radius = 1.08 + (i % 3) * 0.16;
|
|||
|
|
sparkle.position.set(Math.cos(angle) * radius, -0.12 + (i % 5) * 0.32, Math.sin(angle) * radius * 0.5);
|
|||
|
|
sparkle.userData.baseY = sparkle.position.y;
|
|||
|
|
sparkle.userData.speed = 0.9 + (i % 4) * 0.18;
|
|||
|
|
mixerRoot.add(sparkle);
|
|||
|
|
sparkles.push(sparkle);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resizeStage() {
|
|||
|
|
if (!renderer || !camera) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const width = Math.max(stage.clientWidth, 1);
|
|||
|
|
const height = Math.max(stage.clientHeight, 1);
|
|||
|
|
renderer.setSize(width, height, false);
|
|||
|
|
camera.aspect = width / height;
|
|||
|
|
camera.updateProjectionMatrix();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updatePose(elapsed) {
|
|||
|
|
if (!currentArmBones) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const spineLean = Math.sin(elapsed * 1.1) * 0.012;
|
|||
|
|
const neckTurn = state.hoverYaw * 0.18 + Math.sin(elapsed * 0.7) * 0.05;
|
|||
|
|
const neckNod = state.hoverPitch * 0.08;
|
|||
|
|
|
|||
|
|
if (currentArmBones.spine) {
|
|||
|
|
currentArmBones.spine.rotation.z = spineLean;
|
|||
|
|
currentArmBones.spine.rotation.x = 0.04;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (currentArmBones.neck) {
|
|||
|
|
currentArmBones.neck.rotation.y = neckTurn;
|
|||
|
|
currentArmBones.neck.rotation.x = neckNod;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const baseLeftArmZ = 1.22;
|
|||
|
|
const baseRightArmZ = -1.22;
|
|||
|
|
const baseUpperArmX = 0.12;
|
|||
|
|
const baseLowerArmZ = 0.08;
|
|||
|
|
|
|||
|
|
if (currentArmBones.leftUpperArm) {
|
|||
|
|
currentArmBones.leftUpperArm.rotation.z = baseLeftArmZ + Math.sin(elapsed * 1.2 + 0.3) * 0.02;
|
|||
|
|
currentArmBones.leftUpperArm.rotation.x = baseUpperArmX;
|
|||
|
|
currentArmBones.leftUpperArm.rotation.y = -0.1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (currentArmBones.leftLowerArm) {
|
|||
|
|
currentArmBones.leftLowerArm.rotation.z = baseLowerArmZ;
|
|||
|
|
currentArmBones.leftLowerArm.rotation.x = -0.06;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const isWaving = elapsed < state.waveUntil;
|
|||
|
|
if (currentArmBones.rightUpperArm) {
|
|||
|
|
currentArmBones.rightUpperArm.rotation.z = isWaving
|
|||
|
|
? -0.54 - Math.sin(elapsed * 10.5) * 0.22
|
|||
|
|
: baseRightArmZ - Math.sin(elapsed * 1.15) * 0.02;
|
|||
|
|
currentArmBones.rightUpperArm.rotation.x = isWaving ? 0.32 : baseUpperArmX;
|
|||
|
|
currentArmBones.rightUpperArm.rotation.y = isWaving ? 0.22 : 0.1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (currentArmBones.rightLowerArm) {
|
|||
|
|
currentArmBones.rightLowerArm.rotation.z = isWaving
|
|||
|
|
? -0.58 - Math.cos(elapsed * 10.5) * 0.18
|
|||
|
|
: -baseLowerArmZ;
|
|||
|
|
currentArmBones.rightLowerArm.rotation.x = isWaving ? -0.18 : -0.06;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function animate() {
|
|||
|
|
const elapsed = clock.getElapsedTime();
|
|||
|
|
clock.getDelta();
|
|||
|
|
|
|||
|
|
mixerRoot.rotation.y = state.manualRotateY + Math.sin(elapsed * 0.42) * 0.08;
|
|||
|
|
mixerRoot.position.y = Math.sin(elapsed * 1.3) * 0.03;
|
|||
|
|
|
|||
|
|
sparkles.forEach((sparkle, index) => {
|
|||
|
|
sparkle.rotation.x += 0.016 + index * 0.0005;
|
|||
|
|
sparkle.rotation.y += 0.024 + index * 0.0007;
|
|||
|
|
sparkle.position.y = sparkle.userData.baseY + Math.sin(elapsed * sparkle.userData.speed + index) * 0.05;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (currentVrm) {
|
|||
|
|
updatePose(elapsed);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
renderer.render(scene, camera);
|
|||
|
|
window.requestAnimationFrame(animate);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function bindPointer() {
|
|||
|
|
const updateHover = (event) => {
|
|||
|
|
const rect = stage.getBoundingClientRect();
|
|||
|
|
if (!rect.width || !rect.height) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
state.hoverYaw = ((event.clientX - rect.left) / rect.width - 0.5) * 2;
|
|||
|
|
state.hoverPitch = ((event.clientY - rect.top) / rect.height - 0.5) * 2;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
stage.addEventListener('pointerdown', (event) => {
|
|||
|
|
state.dragging = true;
|
|||
|
|
state.dragStartX = event.clientX;
|
|||
|
|
stage.setPointerCapture(event.pointerId);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
stage.addEventListener('pointermove', (event) => {
|
|||
|
|
updateHover(event);
|
|||
|
|
|
|||
|
|
if (!state.dragging) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const deltaX = event.clientX - state.dragStartX;
|
|||
|
|
state.dragStartX = event.clientX;
|
|||
|
|
state.manualRotateY += deltaX * 0.011;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const releasePointer = () => {
|
|||
|
|
state.dragging = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
stage.addEventListener('pointerup', releasePointer);
|
|||
|
|
stage.addEventListener('pointercancel', releasePointer);
|
|||
|
|
stage.addEventListener('pointerleave', () => {
|
|||
|
|
state.hoverYaw *= 0.7;
|
|||
|
|
state.hoverPitch *= 0.7;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function scheduleSpeech() {
|
|||
|
|
const idleLines = [
|
|||
|
|
'现在这版已经是实打实的二次元角色资源，不再是代码拼图。',
|
|||
|
|
'如果这条路对味，下一步就能做成“每个用户自己的形象”。',
|
|||
|
|
'后面还可以接换装、亲密度、称号和专属动作。',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let idleIndex = 0;
|
|||
|
|
clearInterval(speechTimer);
|
|||
|
|
speechTimer = window.setInterval(() => {
|
|||
|
|
if (state.dragging || state.collapsed) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
idleIndex = (idleIndex + 1) % idleLines.length;
|
|||
|
|
setSpeech(idleLines[idleIndex]);
|
|||
|
|
}, 6400);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function init() {
|
|||
|
|
buildScene();
|
|||
|
|
resizeStage();
|
|||
|
|
bindPointer();
|
|||
|
|
scheduleSpeech();
|
|||
|
|
|
|||
|
|
loader = new GLTFLoader();
|
|||
|
|
loader.crossOrigin = 'anonymous';
|
|||
|
|
loader.register((parser) => new VRMLoaderPlugin(parser));
|
|||
|
|
|
|||
|
|
loadAvatar(state.modelIndex);
|
|||
|
|
animate();
|
|||
|
|
|
|||
|
|
if (typeof ResizeObserver !== 'undefined') {
|
|||
|
|
resizeObserver = new ResizeObserver(() => resizeStage());
|
|||
|
|
resizeObserver.observe(stage);
|
|||
|
|
} else {
|
|||
|
|
window.addEventListener('resize', resizeStage);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.chatAvatarWidgetInitialized = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.chatAvatarWidget = {
|
|||
|
|
cycleModel: () => {
|
|||
|
|
state.modelIndex = (state.modelIndex + 1) % avatarPresets.length;
|
|||
|
|
loadAvatar(state.modelIndex);
|
|||
|
|
},
|
|||
|
|
cycleExpression: () => {
|
|||
|
|
state.expressionIndex = (state.expressionIndex + 1) % expressions.length;
|
|||
|
|
applyExpression();
|
|||
|
|
},
|
|||
|
|
triggerWave: () => {
|
|||
|
|
if (!clock) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
state.waveUntil = clock.getElapsedTime() + 2.2;
|
|||
|
|
setSpeech('现在这个动作只是演示，后面可以接聊天触发和专属姿态。');
|
|||
|
|
},
|
|||
|
|
toggleCollapsed: () => {
|
|||
|
|
state.collapsed = !state.collapsed;
|
|||
|
|
widget.classList.toggle('is-collapsed', state.collapsed);
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
window.toggleChatAvatarWidgetPanel = () => {
|
|||
|
|
window.chatAvatarWidget.toggleCollapsed();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
init();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('聊天虚拟形象初始化失败', error);
|
|||
|
|
setStatus('二次元角色初始化失败，可能是本地依赖或外部模型资源加载失败。', true);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (document.readyState === 'loading') {
|
|||
|
|
document.addEventListener('DOMContentLoaded', initChatAvatarWidget, { once: true });
|
|||
|
|
} else {
|
|||
|
|
initChatAvatarWidget();
|
|||
|
|
}
|