feat(web): T-WEB-008/009 管理端界面（歌曲/模型/动作/审核 + VRM 预览）
This commit is contained in:
@@ -0,0 +1,310 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||||
import { VRM, VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
|
||||
|
||||
type PreviewState =
|
||||
| { kind: 'idle' }
|
||||
| { kind: 'loading'; ratio: number | null }
|
||||
| { kind: 'ready'; metaVersion: string }
|
||||
| { kind: 'error'; message: string };
|
||||
|
||||
/** 从 GLTFLoader 的 userData 中安全取出 VRM 实例（three 的 userData 是 any）。 */
|
||||
function extractVrm(userData: Record<string, unknown>): VRM | null {
|
||||
const candidate = userData['vrm'];
|
||||
return candidate instanceof VRM ? candidate : null;
|
||||
}
|
||||
|
||||
/** 兜底释放：VRMUtils.deepDispose 之外的几何/材质/贴图。 */
|
||||
function disposeObject(root: THREE.Object3D): void {
|
||||
root.traverse((object) => {
|
||||
const mesh = object as THREE.Mesh;
|
||||
if (mesh.geometry) mesh.geometry.dispose();
|
||||
const material = mesh.material;
|
||||
if (!material) return;
|
||||
const list: THREE.Material[] = Array.isArray(material) ? material : [material];
|
||||
for (const item of list) {
|
||||
for (const value of Object.values(item)) {
|
||||
if (value instanceof THREE.Texture) value.dispose();
|
||||
}
|
||||
item.dispose();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
interface VrmPreviewProps {
|
||||
fileUrl: string | null;
|
||||
name: string;
|
||||
/** 非 VRM 且无法用 GLTFLoader 解析时给出提示（如 fbx）。 */
|
||||
unsupportedReason?: string | null;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* VRM 3D 预览：GLTFLoader + VRMLoaderPlugin。
|
||||
* - 处理 VRM 0.x / 1.0（vrm.meta.metaVersion）
|
||||
* - 处理「未选择 / 加载中 / 加载失败」状态
|
||||
* - 鼠标拖拽旋转 + 滚轮缩放（自实现，未引入 OrbitControls）
|
||||
* - requestAnimationFrame 循环中调用 vrm.update(delta)
|
||||
* - 卸载时释放 renderer / geometry / material / texture
|
||||
*/
|
||||
export function VrmPreview({ fileUrl, name, unsupportedReason = null, height = 420 }: VrmPreviewProps) {
|
||||
const mountRef = useRef<HTMLDivElement | null>(null);
|
||||
const [state, setState] = useState<PreviewState>({ kind: 'idle' });
|
||||
const [reloadKey, setReloadKey] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const mount = mountRef.current;
|
||||
if (!mount) return;
|
||||
|
||||
if (!fileUrl) {
|
||||
setState({ kind: 'idle' });
|
||||
return;
|
||||
}
|
||||
if (unsupportedReason) {
|
||||
setState({ kind: 'error', message: unsupportedReason });
|
||||
return;
|
||||
}
|
||||
|
||||
setState({ kind: 'loading', ratio: null });
|
||||
|
||||
const width = Math.max(1, mount.clientWidth);
|
||||
const height2 = Math.max(1, mount.clientHeight || height);
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x14181f);
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(30, width / height2, 0.1, 1000);
|
||||
|
||||
let renderer: THREE.WebGLRenderer;
|
||||
try {
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
|
||||
} catch (cause) {
|
||||
// 无 WebGL 支持时不要让整个页面崩溃
|
||||
const detail = cause instanceof Error ? cause.message : String(cause);
|
||||
setState({ kind: 'error', message: `当前浏览器无法创建 WebGL 上下文：${detail}` });
|
||||
return;
|
||||
}
|
||||
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
renderer.setSize(width, height2, false);
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
mount.appendChild(renderer.domElement);
|
||||
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 1.6));
|
||||
const keyLight = new THREE.DirectionalLight(0xffffff, 2.2);
|
||||
keyLight.position.set(1, 2, 1.5);
|
||||
scene.add(keyLight);
|
||||
const rimLight = new THREE.DirectionalLight(0x88bbff, 1.0);
|
||||
rimLight.position.set(-1.2, 1.2, -1.5);
|
||||
scene.add(rimLight);
|
||||
|
||||
const grid = new THREE.GridHelper(4, 8, 0x2a3340, 0x1e2530);
|
||||
scene.add(grid);
|
||||
|
||||
// 轨道参数（自实现的 drag rotate / wheel zoom）
|
||||
const orbit = { theta: 0, phi: Math.PI / 2.2, radius: 3, targetY: 1 };
|
||||
const updateCamera = (): void => {
|
||||
const sinPhi = Math.sin(orbit.phi);
|
||||
camera.position.set(
|
||||
orbit.radius * sinPhi * Math.sin(orbit.theta),
|
||||
orbit.targetY + orbit.radius * Math.cos(orbit.phi),
|
||||
orbit.radius * sinPhi * Math.cos(orbit.theta),
|
||||
);
|
||||
camera.lookAt(0, orbit.targetY, 0);
|
||||
};
|
||||
updateCamera();
|
||||
|
||||
let dragging = false;
|
||||
let lastX = 0;
|
||||
let lastY = 0;
|
||||
|
||||
const onPointerDown = (event: PointerEvent): void => {
|
||||
dragging = true;
|
||||
lastX = event.clientX;
|
||||
lastY = event.clientY;
|
||||
renderer.domElement.setPointerCapture(event.pointerId);
|
||||
};
|
||||
const onPointerMove = (event: PointerEvent): void => {
|
||||
if (!dragging) return;
|
||||
const dx = event.clientX - lastX;
|
||||
const dy = event.clientY - lastY;
|
||||
lastX = event.clientX;
|
||||
lastY = event.clientY;
|
||||
orbit.theta -= dx * 0.01;
|
||||
orbit.phi = Math.min(Math.PI - 0.15, Math.max(0.15, orbit.phi - dy * 0.01));
|
||||
updateCamera();
|
||||
};
|
||||
const onPointerUp = (event: PointerEvent): void => {
|
||||
dragging = false;
|
||||
if (renderer.domElement.hasPointerCapture(event.pointerId)) {
|
||||
renderer.domElement.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
};
|
||||
const onWheel = (event: WheelEvent): void => {
|
||||
event.preventDefault();
|
||||
orbit.radius = Math.min(20, Math.max(0.4, orbit.radius * (1 + event.deltaY * 0.001)));
|
||||
updateCamera();
|
||||
};
|
||||
|
||||
const canvas = renderer.domElement;
|
||||
canvas.addEventListener('pointerdown', onPointerDown);
|
||||
canvas.addEventListener('pointermove', onPointerMove);
|
||||
canvas.addEventListener('pointerup', onPointerUp);
|
||||
canvas.addEventListener('pointercancel', onPointerUp);
|
||||
canvas.addEventListener('wheel', onWheel, { passive: false });
|
||||
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
const w = Math.max(1, mount.clientWidth);
|
||||
const h = Math.max(1, mount.clientHeight || height);
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(w, h, false);
|
||||
});
|
||||
resizeObserver.observe(mount);
|
||||
|
||||
const clock = new THREE.Clock();
|
||||
let rafId = 0;
|
||||
let vrm: VRM | null = null;
|
||||
let disposed = false;
|
||||
let loadedModel: THREE.Object3D | null = null;
|
||||
|
||||
const tick = (): void => {
|
||||
rafId = requestAnimationFrame(tick);
|
||||
const delta = clock.getDelta();
|
||||
if (vrm) vrm.update(delta);
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
rafId = requestAnimationFrame(tick);
|
||||
|
||||
const loader = new GLTFLoader();
|
||||
loader.register((parser) => new VRMLoaderPlugin(parser));
|
||||
|
||||
loader.load(
|
||||
fileUrl,
|
||||
(gltf) => {
|
||||
if (disposed) {
|
||||
disposeObject(gltf.scene);
|
||||
return;
|
||||
}
|
||||
const bag: Record<string, unknown> = gltf.userData;
|
||||
const loadedVrm = extractVrm(bag);
|
||||
const root: THREE.Object3D = loadedVrm ? loadedVrm.scene : gltf.scene;
|
||||
loadedModel = root;
|
||||
vrm = loadedVrm;
|
||||
|
||||
if (loadedVrm) {
|
||||
// VRM 0.x 面向 +Z，需要转 180°；1.0 不需要。
|
||||
VRMUtils.rotateVRM0(loadedVrm);
|
||||
}
|
||||
scene.add(root);
|
||||
|
||||
// 按包围盒自动取景：兼容米制与厘米制模型
|
||||
const box = new THREE.Box3().setFromObject(root);
|
||||
if (!box.isEmpty()) {
|
||||
const size = box.getSize(new THREE.Vector3());
|
||||
const center = box.getCenter(new THREE.Vector3());
|
||||
const maxDim = Math.max(size.x, size.y, size.z) || 1;
|
||||
orbit.targetY = center.y;
|
||||
orbit.radius = maxDim * 1.9;
|
||||
grid.position.y = box.min.y;
|
||||
updateCamera();
|
||||
}
|
||||
|
||||
const meta = loadedVrm ? loadedVrm.meta.metaVersion : null;
|
||||
setState({ kind: 'ready', metaVersion: meta === '1' ? '1.0' : meta === '0' ? '0.x' : '非 VRM（glTF）' });
|
||||
},
|
||||
(event) => {
|
||||
if (disposed) return;
|
||||
const ratio = event.total > 0 ? event.loaded / event.total : null;
|
||||
setState({ kind: 'loading', ratio });
|
||||
},
|
||||
(error: unknown) => {
|
||||
if (disposed) return;
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
setState({ kind: 'error', message: `模型加载失败：${message}` });
|
||||
},
|
||||
);
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
cancelAnimationFrame(rafId);
|
||||
resizeObserver.disconnect();
|
||||
canvas.removeEventListener('pointerdown', onPointerDown);
|
||||
canvas.removeEventListener('pointermove', onPointerMove);
|
||||
canvas.removeEventListener('pointerup', onPointerUp);
|
||||
canvas.removeEventListener('pointercancel', onPointerUp);
|
||||
canvas.removeEventListener('wheel', onWheel);
|
||||
|
||||
if (loadedModel) {
|
||||
scene.remove(loadedModel);
|
||||
if (vrm) {
|
||||
try {
|
||||
VRMUtils.deepDispose(vrm.scene);
|
||||
} catch {
|
||||
disposeObject(loadedModel);
|
||||
}
|
||||
} else {
|
||||
disposeObject(loadedModel);
|
||||
}
|
||||
}
|
||||
scene.clear();
|
||||
renderer.dispose();
|
||||
if (canvas.parentNode === mount) mount.removeChild(canvas);
|
||||
};
|
||||
}, [fileUrl, unsupportedReason, reloadKey, height]);
|
||||
|
||||
const hasModel = fileUrl !== null && fileUrl !== '';
|
||||
|
||||
return (
|
||||
<div className="vrm-panel">
|
||||
<div className="vrm-panel-head">
|
||||
<div>
|
||||
<strong>3D 预览</strong>
|
||||
<span className="muted">{name || '未选择模型'}</span>
|
||||
</div>
|
||||
{hasModel ? (
|
||||
<button type="button" className="btn btn-ghost btn-sm" onClick={() => setReloadKey((v) => v + 1)}>
|
||||
重新加载
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="vrm-stage" style={{ height }}>
|
||||
<div className="vrm-canvas" ref={mountRef} />
|
||||
{state.kind === 'idle' ? (
|
||||
<div className="vrm-overlay">
|
||||
<p>尚未选择模型</p>
|
||||
<p className="muted">在左侧列表点击「预览」以加载 VRM。</p>
|
||||
</div>
|
||||
) : null}
|
||||
{state.kind === 'loading' ? (
|
||||
<div className="vrm-overlay">
|
||||
<span className="spinner" aria-hidden="true" />
|
||||
<p>加载模型中… {state.ratio !== null ? `${Math.round(state.ratio * 100)}%` : ''}</p>
|
||||
</div>
|
||||
) : null}
|
||||
{state.kind === 'error' ? (
|
||||
<div className="vrm-overlay vrm-overlay-error">
|
||||
<p>⚠ {state.message}</p>
|
||||
<button type="button" className="btn btn-ghost btn-sm" onClick={() => setReloadKey((v) => v + 1)}>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="vrm-panel-foot">
|
||||
<span className="muted">
|
||||
拖拽旋转 · 滚轮缩放
|
||||
{state.kind === 'ready' ? ` · VRM 版本：${state.metaVersion}` : ''}
|
||||
</span>
|
||||
{fileUrl ? (
|
||||
<a className="ext-link" href={fileUrl} target="_blank" rel="noreferrer noopener">
|
||||
模型文件
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user