Threejs Lighting

This covers the full Three.js lighting toolkit from basic ambient and directional lights through spotlights, point lights, and RectAreaLight for soft illumination. You get detailed shadow configuration including map sizes, bias settings, and frustum tuning for each light type, plus environment-based lighting with HDR maps. The shadow optimization section is genuinely helpful, showing you how to fix acne artifacts and balance quality versus performance. If you're setting up realistic lighting or debugging why your shadows look wrong, the concrete examples for each light's shadow camera setup will save you time. The IBL section gets cut off but the fundamentals are solid.

skills.sh installs: 17.2K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/threejs-skills --skill threejs-lighting --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Lighting

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

Quick Start

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(4, 3, 8);

// A single directional light: intensity is a plain multiplier, no distance falloff
const dirLight = new THREE.DirectionalLight(0xffffff, 3);
dirLight.position.set(5, 10, 5);
scene.add(dirLight);

const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(20, 20),
  new THREE.MeshStandardMaterial({ color: 0x808080 })
);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

const mesh = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: 0x3a76c4 })
);
scene.add(mesh);

SKILL.md on GitHub