Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/threejs-skills
Create 3D scenes, interactive experiences, and visual effects using Three.js.
Passed 22 of 25 test cases with the skill, and 20 of 25 without it.
2 fixed20 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Write code to configure color rendering accuracy on a WebGLRenderer instance. Many tutorials recommend setting renderer.outputEncoding = THREE.sRGBEncoding. Provide the correct output setup.
| Checked | Without skill | With skill |
|---|---|---|
| Sets renderer.outputColorSpace to THREE.SRGBColorSpace. | Missed | Passed |
The instructions your model reads when the skill loads.
Systematically create high-quality 3D scenes and interactive experiences using Three.js best practices.
Use ES module import maps for modern Three.js (r183+):
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
</script>
For production with npm/vite/webpack:
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
test cases passed, vs 20 / 25 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.