Маленький воксельный редактор на WebGL. Под курсором по сетке скользит полупрозрачный призрак куба; клик ставит куб на клетку или на грань уже стоящего куба, а клик с зажатым Shift его убирает.
Перетаскивание вращает камеру вокруг сцены, колесо приближает и отдаляет. Цвета, размер клетки, яркость сетки и число стартовых кубов меняются; по умолчанию палитра строится от акцентного цвета темы.
Скопируйте эти файлы в components/voxel-painter/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { VoxelPainter } from "@/components/voxel-painter/voxel-painter";
export function Editor() {
return (
<div className="h-[640px]">
<VoxelPainter backgroundColor="#66d9e8" cubeColor="#2d5f66" textColor="#2d5f66" rollOverColor="#2d5f66" />
</div>
);
}backgroundColor?Цвет фона сцены
Тип string·По умолчанию "#FC0F49"
textColor?Цвет линий сетки
Тип string·По умолчанию "#7A200B"
cubeColor?Цвет кубов
Тип string·По умолчанию "#7A200B"
rollOverColor?Цвет призрака под курсором
Тип string·По умолчанию "#7A200B"
rollOverOpacity?Прозрачность призрака
Тип number·По умолчанию 0.1
gridSize?Размер сетки в единицах сцены
Тип number·По умолчанию 1000
gridDivisions?Число клеток по стороне
Тип number·По умолчанию 20
gridOpacity?Прозрачность линий сетки
Тип number·По умолчанию 0.3
cubeSize?Размер куба
Тип number·По умолчанию 50
cameraPosition?Начальное положение камеры
Тип { x: number; y: number; z: number }·По умолчанию { x: 500, y: 500, z: 800 }
enablePan?Сдвиг камеры
Тип boolean·По умолчанию false
enableZoom?Приближение колесом
Тип boolean·По умолчанию true
enableRotate?Вращение перетаскиванием
Тип boolean·По умолчанию true
initialCubesCount?Случайных кубов при старте
Тип number·По умолчанию 4
className?Классы контейнера
Тип string·По умолчанию "h-full w-full"