cloudai-x

cloudai-x/threejs-skills

10 resources in this repository

GitHub
🎯10
1,817

🎯Skills10

🎯threejs-animation🎯Skill

Helps you add movement to 3D scenes built with Three.js, a JavaScript library for 3D graphics in web pages. It covers moving objects, playing animations that come with 3D models, posing character skeletons, blending facial shapes, and switching smoothly between animations.

threejs-animation
🎯threejs-fundamentals🎯Skill

A reference for starting 3D scenes in the browser with Three.js, a popular JavaScript 3D library. It covers setting up the scene, camera, lights and drawing loop, and arranging and moving objects.

threejs-fundamentals
🎯threejs-shaders🎯Skill

Helps you write shaders for Three.js, a JavaScript library for 3D graphics in the browser. Shaders are small programs that move shapes and color each pixel, used for effects like waves, glows and dissolves.

threejs-shaders
🎯threejs-geometry🎯Skill

Shows how to build 3D shapes with three.js, a library for 3D graphics in the web browser. It covers ready-made shapes, 3D text, custom shapes, and drawing thousands of copies quickly.

threejs-geometry
🎯threejs-interaction🎯Skill

Helps your AI assistant make 3D scenes built with three.js respond to the user. It covers clicking on 3D objects, moving the camera with a mouse, touch or keyboard, dragging objects, and on-screen handles for moving, turning and resizing them.

threejs-interaction
🎯threejs-materials🎯Skill

A guide for choosing and setting up materials in three.js, which control how 3D objects look on a web page: color, shine, glass, metal or cartoon style. It includes ready code examples and common fixes.

threejs-materials
🎯threejs-postprocessing🎯Skill

Helps you add screen effects like glow, background blur, soft shadows in corners and outlines to 3D scenes made with Three.js. It shows the right setup and order so the effects look correct.

threejs-postprocessing
🎯threejs-lighting🎯Skill

Helps you light 3D scenes made with Three.js, from sun and lamp lights to shadows and lighting taken from a photo of a real place. It also shows how to fix shadow glitches and keep scenes running fast.

threejs-lighting
🎯threejs-loaders🎯Skill

Shows how to load 3D models, images and lighting backgrounds into three.js, a library for 3D graphics in web pages. It covers common file formats, smaller compressed files, loading progress and freeing memory.

threejs-loaders
🎯threejs-textures🎯Skill

Explains how to put images on 3D objects in three.js, a library for 3D graphics in web pages. It covers loading images, getting colors right, tiling and placing them, using video or drawn images, and saving memory.

threejs-textures