Skip to main content Início Criadores beko2210 firstbrain threejs-geometry
threejs-geometry 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.
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/BEKO2210/Firstbrain --skill threejs-geometryO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
name threejs-geometry description 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. type skill created 2026-02-27T00:00:00.000Z domain design-creative category 3d-animation risk unknown source community tags ["skill","design-creative","3d-animation","threejs","geometry"]
Three.js Geometry
When to Use
You need to create or optimize geometry in Three.js.
The task involves built-in shapes, custom BufferGeometry, vertices, or instanced rendering.
You are working on mesh structure rather than scene setup or materials alone.
Quick Start
import * as THREE from "three" ;
const box = new THREE .BoxGeometry (1 , 1 , 1 );
const sphere = new THREE .SphereGeometry (0.5 , 32 , 32 );
const plane = new THREE .PlaneGeometry (10 , 10 );
const material = new THREE .MeshStandardMaterial ({ color : 0x00ff00 });
const mesh = new THREE .Mesh (box, material);
scene.add (mesh);
Built-in Geometries
Basic Shapes
new THREE .BoxGeometry (1
1
1
1
1
1
new
THREE
SphereGeometry
1
32
32
new
THREE
SphereGeometry
1
32
32
0
Math
PI
2
0
Math
PI
new
THREE
SphereGeometry
1
32
32
0
Math
PI
new
THREE
PlaneGeometry
10
10
1
1
new
THREE
CircleGeometry
1
32
new
THREE
CircleGeometry
1
32
0
Math
PI
new
THREE
CylinderGeometry
1
1
2
32
1
false
new
THREE
CylinderGeometry
0
1
2
32
new
THREE
CylinderGeometry
1
1
2
6
new
THREE
ConeGeometry
1
2
32
1
false
new
THREE
TorusGeometry
1
0.4
16
100
new
THREE
TorusKnotGeometry
1
0.4
100
16
2
3
new
THREE
RingGeometry
0.5
1
32
1
Advanced Shapes
new THREE .CapsuleGeometry (0.5 , 1 , 4 , 8 );
new THREE .DodecahedronGeometry (1 , 0 );
new THREE .IcosahedronGeometry (1 , 0 );
new THREE .OctahedronGeometry (1 , 0 );
new THREE .TetrahedronGeometry (1 , 0 );
const vertices = [1 , 1 , 1 , -1 , -1 , 1 , -1 , 1 , -1 , 1 , -1 , -1 ];
const indices = [2 , 1 , 0 , 0 , 3 , 2 , 1 , 3 , 0 , 2 , 3 , 1 ];
new THREE .PolyhedronGeometry (vertices, indices, 1 , 0 );
Path-Based Shapes
const points = [
new THREE .Vector2 (0 , 0 ),
new THREE .Vector2 (0.5 , 0 ),
new THREE .Vector2 (0.5 , 1 ),
new THREE .Vector2 (0 , 1 ),
];
new THREE .LatheGeometry (points, 32 );
const shape = new THREE .Shape ();
shape.moveTo (0 , 0 );
shape.lineTo (1 , 0 );
shape.lineTo (1 , 1 );
shape.lineTo (0 , 1 );
shape.lineTo (0 , 0 );
const extrudeSettings = {
steps : 2 ,
depth : 1 ,
bevelEnabled : true ,
bevelThickness : 0.1 ,
bevelSize : 0.1 ,
bevelSegments : 3 ,
};
new THREE .ExtrudeGeometry (shape, extrudeSettings);
const curve = new THREE .CatmullRomCurve3 ([
new THREE .Vector3 (-1 , 0 , 0 ),
new THREE .Vector3 (0 , 1 , 0 ),
new THREE .Vector3 (1 , 0 , 0 ),
]);
new THREE .TubeGeometry (curve, 64 , 0.2 , 8 , false );
Text Geometry import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js" ;
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js" ;
const loader = new FontLoader ();
loader.load ("fonts/helvetiker_regular.typeface.json" , (font ) => {
const geometry = new TextGeometry ("Hello" , {
font : font,
size : 1 ,
depth : 0.2 ,
curveSegments : 12 ,
bevelEnabled : true ,
bevelThickness : 0.03 ,
bevelSize : 0.02 ,
bevelSegments : 5 ,
});
geometry.computeBoundingBox ();
geometry.center ();
const mesh = new THREE .Mesh (geometry, material);
scene.add (mesh);
});
BufferGeometry The base class for all geometries. Stores data as typed arrays for GPU efficiency.
Custom BufferGeometry const geometry = new THREE .BufferGeometry ();
const vertices = new Float32Array ([
-1 ,
-1 ,
0 ,
1 ,
-1 ,
0 ,
1 ,
1 ,
0 ,
-1 ,
1 ,
0 ,
]);
geometry.setAttribute ("position" , new THREE .BufferAttribute (vertices, 3 ));
const indices = new Uint16Array ([
0 ,
1 ,
2 ,
0 ,
2 ,
3 ,
]);
geometry.setIndex (new THREE .BufferAttribute (indices, 1 ));
const normals = new Float32Array ([0 , 0 , 1 , 0 , 0 , 1 , 0 , 0 , 1 , 0 , 0 , 1 ]);
geometry.setAttribute ("normal" , new THREE .BufferAttribute (normals, 3 ));
const uvs = new Float32Array ([0 , 0 , 1 , 0 , 1 , 1 , 0 , 1 ]);
geometry.setAttribute ("uv" , new THREE .BufferAttribute (uvs, 2 ));
const colors = new Float32Array ([
1 ,
0 ,
0 ,
0 ,
1 ,
0 ,
0 ,
0 ,
1 ,
1 ,
1 ,
0 ,
]);
geometry.setAttribute ("color" , new THREE .BufferAttribute (colors, 3 ));
BufferAttribute Types
new THREE .BufferAttribute (array, itemSize);
new Float32Array (count * itemSize);
new Uint16Array (count);
new Uint32Array (count);
new Uint8Array (count * itemSize);
Modifying BufferGeometry const positions = geometry.attributes .position ;
positions.setXYZ (index, x, y, z);
const x = positions.getX (index);
const y = positions.getY (index);
const z = positions.getZ (index);
positions.needsUpdate = true ;
geometry.computeVertexNormals ();
geometry.computeBoundingBox ();
geometry.computeBoundingSphere ();
Interleaved Buffers (Advanced)
const interleavedBuffer = new THREE .InterleavedBuffer (
new Float32Array ([
-1 , -1 , 0 , 0 , 0 , 1 , -1 , 0 , 1 , 0 , 1 , 1 , 0 , 1 , 1 , -1 , 1 , 0 , 0 , 1 ,
]),
5 ,
);
geometry.setAttribute (
"position" ,
new THREE .InterleavedBufferAttribute (interleavedBuffer, 3 , 0 ),
);
geometry.setAttribute (
"uv" ,
new THREE .InterleavedBufferAttribute (interleavedBuffer, 2 , 3 ),
);
EdgesGeometry & WireframeGeometry
const edges = new THREE .EdgesGeometry (boxGeometry, 15 );
const edgeMesh = new THREE .LineSegments (
edges,
new THREE .LineBasicMaterial ({ color : 0xffffff }),
);
const wireframe = new THREE .WireframeGeometry (boxGeometry);
const wireMesh = new THREE .LineSegments (
wireframe,
new THREE .LineBasicMaterial ({ color : 0xffffff }),
);
Points
const geometry = new THREE .BufferGeometry ();
const positions = new Float32Array (1000 * 3 );
for (let i = 0 ; i < 1000 ; i++) {
positions[i * 3 ] = (Math .random () - 0.5 ) * 10 ;
positions[i * 3 + 1 ] = (Math .random () - 0.5 ) * 10 ;
positions[i * 3 + 2 ] = (Math .random () - 0.5 ) * 10 ;
}
geometry.setAttribute ("position" , new THREE .BufferAttribute (positions, 3 ));
const material = new THREE .PointsMaterial ({
size : 0.1 ,
sizeAttenuation : true ,
color : 0xffffff ,
});
const points = new THREE .Points (geometry, material);
scene.add (points);
Lines
const points = [
new THREE .Vector3 (-1 , 0 , 0 ),
new THREE .Vector3 (0 , 1 , 0 ),
new THREE .Vector3 (1 , 0 , 0 ),
];
const geometry = new THREE .BufferGeometry ().setFromPoints (points);
const line = new THREE .Line (
geometry,
new THREE .LineBasicMaterial ({ color : 0xff0000 }),
);
const loop = new THREE .LineLoop (geometry, material);
const segmentsGeometry = new THREE .BufferGeometry ();
segmentsGeometry.setAttribute (
"position" ,
new THREE .BufferAttribute (
new Float32Array ([
-1 ,
0 ,
0 ,
0 ,
1 ,
0 ,
0 ,
1 ,
0 ,
1 ,
0 ,
0 ,
]),
3 ,
),
);
const segments = new THREE .LineSegments (segmentsGeometry, material);
InstancedMesh Efficiently render many copies of the same geometry.
const geometry = new THREE .BoxGeometry (1 , 1 , 1 );
const material = new THREE .MeshStandardMaterial ({ color : 0x00ff00 });
const count = 1000 ;
const instancedMesh = new THREE .InstancedMesh (geometry, material, count);
const dummy = new THREE .Object3D ();
const matrix = new THREE .Matrix4 ();
for (let i = 0 ; i < count; i++) {
dummy.position .set (
(Math .random () - 0.5 ) * 20 ,
(Math .random () - 0.5 ) * 20 ,
(Math .random () - 0.5 ) * 20 ,
);
dummy.rotation .set (Math .random () * Math .PI , Math .random () * Math .PI , 0 );
dummy.scale .setScalar (0.5 + Math .random ());
dummy.updateMatrix ();
instancedMesh.setMatrixAt (i, dummy.matrix );
}
instancedMesh.instanceMatrix .needsUpdate = true ;
instancedMesh.instanceColor = new THREE .InstancedBufferAttribute (
new Float32Array (count * 3 ),
3 ,
);
for (let i = 0 ; i < count; i++) {
instancedMesh.setColorAt (
i,
new THREE .Color (Math .random (), Math .random (), Math .random ()),
);
}
instancedMesh.instanceColor .needsUpdate = true ;
scene.add (instancedMesh);
Update Instance at Runtime
const matrix = new THREE .Matrix4 ();
instancedMesh.getMatrixAt (index, matrix);
instancedMesh.setMatrixAt (index, matrix);
instancedMesh.instanceMatrix .needsUpdate = true ;
const intersects = raycaster.intersectObject (instancedMesh);
if (intersects.length > 0 ) {
const instanceId = intersects[0 ].instanceId ;
}
InstancedBufferGeometry (Advanced) For custom per-instance attributes beyond transform/color.
const geometry = new THREE .InstancedBufferGeometry ();
geometry.copy (new THREE .BoxGeometry (1 , 1 , 1 ));
const offsets = new Float32Array (count * 3 );
for (let i = 0 ; i < count; i++) {
offsets[i * 3 ] = Math .random () * 10 ;
offsets[i * 3 + 1 ] = Math .random () * 10 ;
offsets[i * 3 + 2 ] = Math .random () * 10 ;
}
geometry.setAttribute ("offset" , new THREE .InstancedBufferAttribute (offsets, 3 ));
Geometry Utilities import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js" ;
const merged = BufferGeometryUtils .mergeGeometries ([geo1, geo2, geo3]);
const merged = BufferGeometryUtils .mergeGeometries ([geo1, geo2], true );
BufferGeometryUtils .computeTangents (geometry);
const interleaved = BufferGeometryUtils .interleaveAttributes ([
geometry.attributes .position ,
geometry.attributes .normal ,
geometry.attributes .uv ,
]);
Common Patterns
Center Geometry geometry.computeBoundingBox ();
geometry.center ();
Scale to Fit geometry.computeBoundingBox ();
const size = new THREE .Vector3 ();
geometry.boundingBox .getSize (size);
const maxDim = Math .max (size.x , size.y , size.z );
geometry.scale (1 / maxDim, 1 / maxDim, 1 / maxDim);
Clone and Transform const clone = geometry.clone ();
clone.rotateX (Math .PI / 2 );
clone.translate (0 , 1 , 0 );
clone.scale (2 , 2 , 2 );
Morph Targets
const geometry = new THREE .BoxGeometry (1 , 1 , 1 , 4 , 4 , 4 );
const morphPositions = geometry.attributes .position .array .slice ();
for (let i = 0 ; i < morphPositions.length ; i += 3 ) {
morphPositions[i] *= 2 ;
morphPositions[i + 1 ] *= 0.5 ;
}
geometry.morphAttributes .position = [
new THREE .BufferAttribute (new Float32Array (morphPositions), 3 ),
];
const mesh = new THREE .Mesh (geometry, material);
mesh.morphTargetInfluences [0 ] = 0.5 ;
Performance Tips
Use indexed geometry : Reuse vertices with indicesMerge static meshes : Reduce draw calls with mergeGeometriesUse InstancedMesh : For many identical objectsChoose appropriate segment counts : More segments = smoother but slowerDispose unused geometry : geometry.dispose()
new THREE .SphereGeometry (1 , 32 , 32 );
new THREE .SphereGeometry (1 , 64 , 64 );
new THREE .SphereGeometry (1 , 16 , 16 );
geometry.dispose ();
BatchedMesh (r183) BatchedMesh is a higher-level alternative to InstancedMesh that supports multiple geometries in a single draw call. As of r183, it supports per-instance opacity and per-instance wireframe .
const batchedMesh = new THREE .BatchedMesh (maxGeometryCount, maxVertexCount, maxIndexCount);
batchedMesh.sortObjects = true ;
const boxId = batchedMesh.addGeometry (new THREE .BoxGeometry (1 , 1 , 1 ));
const sphereId = batchedMesh.addGeometry (new THREE .SphereGeometry (0.5 , 16 , 16 ));
const instance1 = batchedMesh.addInstance (boxId);
const instance2 = batchedMesh.addInstance (sphereId);
const matrix = new THREE .Matrix4 ();
matrix.setPosition (2 , 0 , 0 );
batchedMesh.setMatrixAt (instance1, matrix);
batchedMesh.setOpacityAt (instance1, 0.5 );
batchedMesh.setVisibleAt (instance2, false );
scene.add (batchedMesh);
See Also
threejs-fundamentals - Scene setup and Object3Dthreejs-materials - Material types for meshesthreejs-shaders - Custom vertex manipulation
Connections
Domain: [[Design & Kreativitaet]]Kategorie: [[3D & Animation]]Navigation: [[Skills Uebersicht]], [[Home]] 