ASCII Object
载入任意 GLB/glTF 模型、SVG 或图片，让它在带灯光的场景中悬浮，并以 ASCII 字符重绘。字符按形状匹配，既描绘轮廓，也保留明暗。基于 three.js。
演示
拖动以环绕观察物体，切换字符集；打开参数面板，即可通过网址或本地文件载入自己的 GLB/glTF 模型、SVG 或图片。
安装
本地演示保留原有效果，背景替换为 LeiBox 选定的画面。
查看原作者 ↗代码
源码与许可说明请查看原作者页面。
查看原作者 ↗API 参考
| 属性 | 类型 | 默认值 |
|---|---|---|
src要显示的素材网址：支持 GLB/glTF、SVG、PNG、JPEG、WebP 或 GIF，也支持文件输入生成的对象 URL。通过字节识别格式，而不依赖扩展名。Draco 压缩模型会按需加载解码器，二维素材则作为卡片放入同一灯光场景。 | string | |
ascii将物体渲染为 ASCII 字符。关闭后显示原始渲染。 | boolean | true |
cellSize单个字符单元的高度，单位为 CSS 像素。 | number | 10 |
cellAspect字符单元宽度相对于高度的比例（0.35 至 1.25）。 | number | 0.6 |
charset渲染器可使用的字符。每个字符的形状都会与底层画面匹配，让 /、_ 等字符落在相应边缘。空白单元始终可以使用空格。 | string | all 95 printable ASCII characters |
colored使用下方场景颜色为每个字符着色。关闭后使用单色。 | boolean | true |
colorcolored 关闭时使用的字符颜色。 | string | "#ffffff" |
contrast字符选择的明暗对比度。1 保留原始色调，更高的值会加深阴影。 | number | 1.5 |
edgeContrast字符贴合物体边缘和轮廓的程度。1 表示关闭此效果。 | number | 3 |
exposure选择字符前应用的亮度倍数。 | number | 1 |
invert反转物体明暗，使暗部使用更密集的字符。 | boolean | false |
background字符后方的背景色。留空时画布透明。 | string | "" (transparent) |
highlight工作室环境中环形灯的强调色。 | string | "#066aff" |
environmentIntensity工作室环境光亮度。 | number | 1 |
roughness对所有材质应用的粗糙度覆盖值（0 至 1）；负值保留素材自身的设置。 | number | -1 |
scale物体最长边的场景单位尺寸。相机距离约为 4 个单位。 | number | 3 |
xOffset物体水平偏移，单位为场景单位。 | number | 0 |
yOffset物体垂直偏移，单位为场景单位。 | number | 0 |
floatIntensity上下漂浮动画的强度（0 关闭）。 | number | 2 |
rotationIntensity闲置摇摆旋转的强度（0 关闭）。 | number | 1 |
floatSpeed漂浮与摇摆动画的速度。 | number | 2 |
orbit允许用户拖动以环绕观察物体。 | boolean | true |
zoom允许用户使用滚轮或双指手势缩放。 | boolean | false |
autoRotate让相机像转台一样环绕物体旋转。 | boolean | false |
autoRotateSpeedautoRotate 开启时的转台速度。 | number | 2 |
fov相机视场角，单位为度。 | number | 65 |
cameraDistance相机到物体中心的距离。 | number | 4.2 |
dracoDecoderPathDraco 解码器的基础网址，仅在模型需要时加载。 | string | "https://www.gstatic.com/draco/versioned/decoders/1.5.7/" |
onLoad素材加载完成后调用。 | () => void | |
onError素材加载失败时调用。 | (error: unknown) => void | |
className应用到包装元素的 CSS 类。 | string |