Toolverse
All skills

threejs-geometry

by CloudAI-X

Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
CloudAI-X
Category
Frontend

About this skill

Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.

How to use

  1. Zaimportuj Three.js do swojego projektu i uzyskaj dostęp do klasy geometrii, którą chcesz użyć – na przykład BoxGeometry, SphereGeometry, PlaneGeometry, CircleGeometry, CylinderGeometry, ConeGeometry, TorusGeometry lub TorusKnotGeometry.

  2. Utwórz instancję wybranej geometrii, podając wymagane parametry wymiarów i segmentacji. Na przykład dla sześcianu podaj szerokość, wysokość i głębokość, a dla sfery promień oraz liczbę segmentów szerokości i wysokości.

  3. Stwórz materiał (np. MeshStandardMaterial) i określ jego właściwości wizualne, takie jak kolor lub tekstura.

  4. Połącz geometrię z materiałem, tworząc mesh za pomocą konstruktora Mesh, a następnie dodaj mesh do sceny.

  5. Dla bardziej zaawansowanych przypadków użyj BufferGeometry do ręcznego definiowania wierzchołków i indeksów, co daje pełną kontrolę nad strukturą geometrii i pozwala na tworzenie niestandardowych kształtów.

  6. Jeśli potrzebujesz renderować wiele identycznych geometrii, zastosuj instancjonowanie poprzez InstancedBufferGeometry, aby znacznie zwiększyć wydajność renderowania.

Related skills

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167

frontend-slides

by sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual

Frontend
65135

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209

zustand

by lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Frontend
36126