Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Three.js guide for web 3D v1.0.0

Use this resource to build an interactive 3D scene on a web page

New

  • 514 downloads
  • 124 likes
  • 247 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install threejs-3d-web-guide

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent relies on ten reference sheets (fundamentals, geometry, materials, lighting, textures, animation, loaders, shaders, post-processing, interaction) and loads the one it needs. It writes a scene with camera, lights, models and interactions. You get up-to-date, organized Three.js code.

Mostly picked by

Updated November 2, 2026

A lit green cube rotating in a 3D scene on a web page.

Details

Works in
Install guides
Generates with
Three.js
Uses
  • WebGL browser
  • three npm package
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: ten quick-start examples and common patterns
  • Ten reference files in references/, one per area

Good fit for

  • Showing a product in 3D on a page
  • Creating a WebGL background or interactive visualization
  • Loading a GLTF model and making it clickable

Not for

  • Simple background effects an animated gradient can do
  • A full game engine
  • 3D rendering outside the browser

Tags

  • threejs
  • 3d
  • webgl
  • gltf
  • shaders

About

You say

"Show my ring.glb model on the page with soft light, slow rotation and mouse drag to rotate it."

A lit green cube rotating in a 3D scene on a web page.

Skill published by secondsky under the MIT license.

Show more

Prerequisites

You bring
A description of the 3D scene and Your GLB models or textures if needed
Dependencies
WebGL browser and three npm package

How to use it

  1. Describe the scene and provide your models or textures
  2. The agent loads the right references and writes the code
  3. Test in a browser and tune lights and camera

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/threejs-animation.md0.2 KB
  • references/threejs-fundamentals.md11.5 KB
  • references/threejs-geometry.md0.3 KB
  • references/threejs-interaction.md0.2 KB
  • references/threejs-lighting.md0.2 KB
  • references/threejs-loaders.md0.1 KB
  • references/threejs-materials.md0.2 KB
  • references/threejs-postprocessing.md0.1 KB
  • references/threejs-shaders.md0.1 KB
  • references/threejs-textures.md0.2 KB
  • SKILL.md14.4 KB

Origin and licence

Modified by PalateKit

Author
secondsky
Source
github.com/secondsky/claude-skills/tree/88378361314f558fb719aec0af9fd898ab36f0b2/plugins/threejs/skills/threejs
Licence
MIT

Notice

Version modifiée de « threejs » (secondsky, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Which Three.js version?

Examples target r160 and later (January 2024). Check API names if you use a much newer release.

Is a build tool needed?

No, imports are ES modules; a bundler is possible but not required.