@voxel-tool/solid

SolidJS 3D 查看器组件（基于 @voxel-tool/viewer + Three.js）。真 3D 立方体 + 深度缓冲 + 面剔除 + 正交等距相机 + OrbitControls。

import { VoxViewer } from '@voxel-tool/solid';

<VoxViewer /> Props

属性	类型	默认值	说明
src	ArrayBuffer | Uint8Array	null	.vox 二进制；传入后组件内部调用 parseVox 解析
model	{ size, voxels }	null	已解析模型（来自 parseVox 的 models[0]）
palette	Array<[r,g,b,a]>	null	256 项调色板；与 model 配套
background	string	'#16181e'	画布背景色
width	number	480	画布宽度（px）
height	number	480	画布高度（px）

src 与 model 二选一；两者都给时优先用 model。

交互

• 左键拖拽：旋转视角
• 滚轮：缩放
• 右键拖拽：平移

组件自动取景（Box3 包围盒居中 + 缩放进可视范围），左下角显示「体素数 · 面数」。

示例

import { createSignal } from 'solid-js';
import { VoxViewer } from '@voxel-tool/solid';
import { parseVox } from '@voxel-tool/core';

export function App() {
  const [data, setData] = createSignal<任何>(null);
  const onFile = async (e: any) => {
    const buf = new Uint8Array(await e.currentTarget.files[0].arrayBuffer());
    setData(parseVox(buf));
  };
  return (
    <div>
      <input type="file" accept=".vox" onChange={onFile} />
      <VoxViewer model={data()?.models[0]} palette={data()?.palette} width={640} height={480} />
    </div>
  );
}

详见 组件示例 · Solid。