skills.rest
Iker1211
Iker1211COMMUNITY
Explore all skills by this author →
GitHub

low-poly-medieval-threejs

Configures Three.js scenes for KayKit low-poly medieval assets with lighting, fog, and camera calibration.

1|Updated Mar 31, 2025
Search Tags:#game development#webgl#three.js#lighting#hex grid#low-poly#kaykit
One-click install
npx skills add https://github.com/Iker1211/Resources-Directory --skill low-poly-medieval-threejs-iker1211
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: low-poly-medieval-threejs
Source: https://github.com/Iker1211/Resources-Directory/tree/main/skills/mnt/user-data/outputs/skills/low-poly-medieval-threejs
Command: npx skills add https://github.com/Iker1211/Resources-Directory --skill low-poly-medieval-threejs-iker1211

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Setting up a Three.js scene for low-poly assets is easy to get wrong: default color spaces make KayKit textures look washed out, point lights break the flat-shaded aesthetic, and misconfigured shadow cameras produce broken or missing shadows. This Skill provides a calibrated, copy-ready scene configuration tuned specifically for KayKit medieval asset packs. ## Core Features & Use Cases - Renderer setup: SRGB color space, ACESFilmic tone mapping, and PCFSoft shadow mapping configured for the flat-color KayKit palette. - Lighting recipe: A three-light rig (warm directional sun with shadows, cool fill light, ambient base) designed for low-poly geometry, with guidance on why point and spot lights should be avoided. - Camera and fog calibration: FOV and position presets scaled to hex grid sizes (5x5, 10x10, 20x20), plus exponential fog density formulas matched to grid radius. - KayKit-specific pitfalls: Shared texture atlas handling (never clone materials for InstancedMesh), shadow camera updateProjectionMatrix requirements, and elevation offsets for props on hex tiles. - Use Case: You are building a browser-based strategy game with a hex grid map using KayKit medieval GLTF assets. Use this Skill to configure the renderer, lights, fog, and camera correctly on the first attempt instead of debugging washed-out colors and missing shadows. ## Quick Start Set up my Three.js scene for KayKit medieval low-poly assets with correct lighting, shadows, fog, and camera for a 5x5 hex grid.

Frequently Asked Questions about low-poly-medieval-threejs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Three.js lighting for low-poly assets?▼

Use a warm DirectionalLight (0xffe5b0, intensity 1.6) as the sun with shadows, a cool fill DirectionalLight (0x5580a0, 0.35) on the opposite side, and an AmbientLight (0x8fb0d0, 0.9) as base. Avoid PointLight and SpotLight because large low-poly faces show per-face gradients that break the flat aesthetic.

Why do my KayKit textures look wrong in Three.js?▼

KayKit exports textures in sRGB, so you must set renderer.outputColorSpace = THREE.SRGBColorSpace. Without it, Three.js interprets the textures as linear and colors appear saturated or incorrect. Adding ACESFilmicToneMapping further improves the warm medieval palette.

What tone mapping should I use for low-poly Three.js scenes?▼

ACESFilmicToneMapping with exposure between 0.8 and 1.2 works well for KayKit medieval assets, giving a warm, natural look without blowing out highlights. Combine it with SRGBColorSpace output for colors that match how the assets appear in Blender.

Why are my Three.js shadows not updating after changing the shadow camera?▼

The shadow camera requires calling sun.shadow.camera.updateProjectionMatrix() after modifying left, right, top, bottom, near, or far properties. Without this call, the shadow frustum stays at its old values and shadows render incorrectly or not at all.

Should I clone materials when using InstancedMesh with GLTF assets?▼

No. KayKit assets in the same pack share one or two atlas textures, so sub-meshes from the same GLTF already reference the same GPU texture. Cloning the material duplicates the texture in GPU memory; pass src.material directly to the InstancedMesh constructor.

What camera FOV works best for a hex grid strategy map in Three.js?▼

Use a PerspectiveCamera with FOV between 45 and 52 for an isometric, strategy-map feel; above 60 it looks too much like a first-person view. For a 5x5 KayKit hex grid, position the camera around (0, 12, 16) and scale up to (0, 40, 55) for a 20x20 grid.

Related Skills

Explore More Software Engineering Skills→
Iker1211Iker1211

beautiful-3d-world

Composes flat hexagonal low-poly 3D worlds from KayKit Medieval Hexagon Pack assets.

Community
Advanced
Iker1211Iker1211
1

ontological-layer-composer

Defines a data-driven layer grammar for composing 3D hex worlds in Three.js.

Community
Intermediate
RosyGameStudioRosyGameStudio

linear-fog

Integrate distance-based fog effects into SDL3 GPU rendering pipelines.

Official
Intermediate
mbadozmbadoz
2

3d-pixel-web

Build Three.js 3D websites with pixel art aesthetics and voxel-style geometry.

Community
Advanced