threejs-geometry
This skill provides code patterns and implementation examples for creating and manipulating 3D geometries in Three.js. It covers built-in shapes, custom BufferGeometry, path-based shapes, text geometry, instanced rendering, and performance optimization techniques.
Is threejs-geometry safe to install?
Safe to install: our audit of threejs-geometry's source files found 0 shell commands, 1 external URL, no file writes (low risk). Every command and URL listed appears verbatim in the skill's source. The skill includes a code example that fetches a font file from a local path. It does not execute shell commands or write to the file system.
How we audit skills: our security review methodology.
Who is this skill for?
Developers building 3D web applications using the Three.js library who need reference code for geometry generation and mesh optimization.
What can you do with it?
- Creating standard 3D primitives like boxes, spheres, and cylinders.
- Building custom meshes using BufferGeometry and typed arrays.
- Implementing instanced rendering for high-performance object duplication.
- Generating text geometry from JSON font files.
- Optimizing geometry performance through merging and vertex indexing.
How good is this skill?
Quality score: 5/10. The skill provides comprehensive, well-structured code examples for various Three.js geometry tasks. It is highly practical for developers.
What does the skill file contain?
# Three.js Geometry
## Quick Start
```javascript
import * as THREE from "three";
// Built-in geometry
const box = new THREE.BoxGeometry(1, 1, 1);
const sphere = new THREE.SphereGeometry(0.5, 32, 32);
const plane = new THREE.PlaneGeometry(10, 10);
// Create mesh
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(box, material);
scene.add(mesh);
```
## Built-in Geometries
### Basic Shapes
```javascript
// Box - width, height, depth, widthSegments, heightSegments, depthSegments
new THREE.BoxGeometry(1, 1, 1, 1, 1, 1);
// Sphere - radius, widt...Frequently asked questions
Does this skill handle material creation?
No. This skill focuses on geometry. Material creation is covered in the related threejs-materials skill.
How do I optimize large numbers of identical objects?
Use the InstancedMesh class provided in the skill to render many copies of the same geometry efficiently.
Can I create custom shapes from scratch?
Yes. The skill provides examples for creating custom BufferGeometry by defining vertices, indices, normals, and UVs using typed arrays.
Related skills
gsap-timeline
31.3KDevelopers using GSAP for multi-step animations, keyframe sequencing, or complex animation choreography
The gsap-timeline skill provides instructions and patterns for sequencing animations using the GSAP library. It covers timeline creation, the position parameter for timing, label management, nesting, and playback control.
gsap-core
30.9KDevelopers building animations in React, Vue, Svelte, or vanilla JavaScript who need to implement tweens, timelines, or responsive animation logic
The gsap-core skill provides instructions and patterns for using the GreenSock Animation Platform (GSAP) core API. It covers tween methods, easing, stagger, transforms, accessibility via gsap.matchMedia, and best practices for performant animations in JavaScript environments.
vitest
26.2KDevelopers using Vitest for unit testing, mocking, and test configuration in Vite-based projects
The Vitest skill provides documentation and guidance for the Vitest testing framework, covering configuration, test APIs, mocking, coverage, and advanced features like type testing and multi-project workspaces.
fixing-motion-performance
18.0KFrontend developers and UI engineers who need to optimize animation performance and resolve jank in web applications
The fixing-motion-performance skill audits and suggests improvements for UI animation performance. It identifies layout thrashing, inefficient compositor usage, and problematic scroll-linked motion within CSS and JavaScript animation stacks.