[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-6ec2956a-f721-4c8c-a546-e16b34c38bea":3,"$fMe4ATjRq1E-yqKbYYXMwrPo2bCKBhRyFWJqBApV7cGo":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"6ec2956a-f721-4c8c-a546-e16b34c38bea","threejs-geometry","Three.js 几何体创建 - 内置形状、BufferGeometry、自定义几何体、实例化。用于创建3D形状、处理顶点、构建自定义网格或通过实例化渲染进行优化。","cat_design_graphic","mod_design","sickn33,design","---\nname: threejs-geometry\ndescription: 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.\nrisk: unknown\nsource: community\n---\n\n# Three.js Geometry\n\n## When to Use\n- You need to create or optimize geometry in Three.js.\n- The task involves built-in shapes, custom `BufferGeometry`, vertices, or instanced rendering.\n- You are working on mesh structure rather than scene setup or materials alone.\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F Built-in geometry\nconst box = new THREE.BoxGeometry(1, 1, 1);\nconst sphere = new THREE.SphereGeometry(0.5, 32, 32);\nconst plane = new THREE.PlaneGeometry(10, 10);\n\n\u002F\u002F Create mesh\nconst material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });\nconst mesh = new THREE.Mesh(box, material);\nscene.add(mesh);\n```\n\n## Built-in Geometries\n\n### Basic Shapes\n\n```javascript\n\u002F\u002F Box - width, height, depth, widthSegments, heightSegments, depthSegments\nnew THREE.BoxGeometry(1, 1, 1, 1, 1, 1);\n\n\u002F\u002F Sphere - radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength\nnew THREE.SphereGeometry(1, 32, 32);\nnew THREE.SphereGeometry(1, 32, 32, 0, Math.PI * 2, 0, Math.PI); \u002F\u002F Full sphere\nnew THREE.SphereGeometry(1, 32, 32, 0, Math.PI); \u002F\u002F Hemisphere\n\n\u002F\u002F Plane - width, height, widthSegments, heightSegments\nnew THREE.PlaneGeometry(10, 10, 1, 1);\n\n\u002F\u002F Circle - radius, segments, thetaStart, thetaLength\nnew THREE.CircleGeometry(1, 32);\nnew THREE.CircleGeometry(1, 32, 0, Math.PI); \u002F\u002F Semicircle\n\n\u002F\u002F Cylinder - radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded\nnew THREE.CylinderGeometry(1, 1, 2, 32, 1, false);\nnew THREE.CylinderGeometry(0, 1, 2, 32); \u002F\u002F Cone\nnew THREE.CylinderGeometry(1, 1, 2, 6); \u002F\u002F Hexagonal prism\n\n\u002F\u002F Cone - radius, height, radialSegments, heightSegments, openEnded\nnew THREE.ConeGeometry(1, 2, 32, 1, false);\n\n\u002F\u002F Torus - radius, tube, radialSegments, tubularSegments, arc\nnew THREE.TorusGeometry(1, 0.4, 16, 100);\n\n\u002F\u002F TorusKnot - radius, tube, tubularSegments, radialSegments, p, q\nnew THREE.TorusKnotGeometry(1, 0.4, 100, 16, 2, 3);\n\n\u002F\u002F Ring - innerRadius, outerRadius, thetaSegments, phiSegments\nnew THREE.RingGeometry(0.5, 1, 32, 1);\n```\n\n### Advanced Shapes\n\n```javascript\n\u002F\u002F Capsule - radius, length, capSegments, radialSegments\nnew THREE.CapsuleGeometry(0.5, 1, 4, 8);\n\n\u002F\u002F Dodecahedron - radius, detail\nnew THREE.DodecahedronGeometry(1, 0);\n\n\u002F\u002F Icosahedron - radius, detail (0 = 20 faces, higher = smoother)\nnew THREE.IcosahedronGeometry(1, 0);\n\n\u002F\u002F Octahedron - radius, detail\nnew THREE.OctahedronGeometry(1, 0);\n\n\u002F\u002F Tetrahedron - radius, detail\nnew THREE.TetrahedronGeometry(1, 0);\n\n\u002F\u002F Polyhedron - vertices, indices, radius, detail\nconst vertices = [1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1];\nconst indices = [2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1];\nnew THREE.PolyhedronGeometry(vertices, indices, 1, 0);\n```\n\n### Path-Based Shapes\n\n```javascript\n\u002F\u002F Lathe - points[], segments, phiStart, phiLength\nconst points = [\n  new THREE.Vector2(0, 0),\n  new THREE.Vector2(0.5, 0),\n  new THREE.Vector2(0.5, 1),\n  new THREE.Vector2(0, 1),\n];\nnew THREE.LatheGeometry(points, 32);\n\n\u002F\u002F Extrude - shape, options\nconst shape = new THREE.Shape();\nshape.moveTo(0, 0);\nshape.lineTo(1, 0);\nshape.lineTo(1, 1);\nshape.lineTo(0, 1);\nshape.lineTo(0, 0);\n\nconst extrudeSettings = {\n  steps: 2,\n  depth: 1,\n  bevelEnabled: true,\n  bevelThickness: 0.1,\n  bevelSize: 0.1,\n  bevelSegments: 3,\n};\nnew THREE.ExtrudeGeometry(shape, extrudeSettings);\n\n\u002F\u002F Tube - path, tubularSegments, radius, radialSegments, closed\nconst curve = new THREE.CatmullRomCurve3([\n  new THREE.Vector3(-1, 0, 0),\n  new THREE.Vector3(0, 1, 0),\n  new THREE.Vector3(1, 0, 0),\n]);\nnew THREE.TubeGeometry(curve, 64, 0.2, 8, false);\n```\n\n### Text Geometry\n\n```javascript\nimport { FontLoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FFontLoader.js\";\nimport { TextGeometry } from \"three\u002Fexamples\u002Fjsm\u002Fgeometries\u002FTextGeometry.js\";\n\nconst loader = new FontLoader();\nloader.load(\"fonts\u002Fhelvetiker_regular.typeface.json\", (font) => {\n  const geometry = new TextGeometry(\"Hello\", {\n    font: font,\n    size: 1,\n    depth: 0.2, \u002F\u002F Was 'height' in older versions\n    curveSegments: 12,\n    bevelEnabled: true,\n    bevelThickness: 0.03,\n    bevelSize: 0.02,\n    bevelSegments: 5,\n  });\n\n  \u002F\u002F Center text\n  geometry.computeBoundingBox();\n  geometry.center();\n\n  const mesh = new THREE.Mesh(geometry, material);\n  scene.add(mesh);\n});\n```\n\n## BufferGeometry\n\nThe base class for all geometries. Stores data as typed arrays for GPU efficiency.\n\n### Custom BufferGeometry\n\n```javascript\nconst geometry = new THREE.BufferGeometry();\n\n\u002F\u002F Vertices (3 floats per vertex: x, y, z)\nconst vertices = new Float32Array([\n  -1,\n  -1,\n  0, \u002F\u002F vertex 0\n  1,\n  -1,\n  0, \u002F\u002F vertex 1\n  1,\n  1,\n  0, \u002F\u002F vertex 2\n  -1,\n  1,\n  0, \u002F\u002F vertex 3\n]);\ngeometry.setAttribute(\"position\", new THREE.BufferAttribute(vertices, 3));\n\n\u002F\u002F Indices (for indexed geometry - reuse vertices)\nconst indices = new Uint16Array([\n  0,\n  1,\n  2, \u002F\u002F triangle 1\n  0,\n  2,\n  3, \u002F\u002F triangle 2\n]);\ngeometry.setIndex(new THREE.BufferAttribute(indices, 1));\n\n\u002F\u002F Normals (required for lighting)\nconst normals = new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);\ngeometry.setAttribute(\"normal\", new THREE.BufferAttribute(normals, 3));\n\n\u002F\u002F UVs (for texturing)\nconst uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);\ngeometry.setAttribute(\"uv\", new THREE.BufferAttribute(uvs, 2));\n\n\u002F\u002F Colors (per-vertex colors)\nconst colors = new Float32Array([\n  1,\n  0,\n  0, \u002F\u002F red\n  0,\n  1,\n  0, \u002F\u002F green\n  0,\n  0,\n  1, \u002F\u002F blue\n  1,\n  1,\n  0, \u002F\u002F yellow\n]);\ngeometry.setAttribute(\"color\", new THREE.BufferAttribute(colors, 3));\n\u002F\u002F Use with: material.vertexColors = true\n```\n\n### BufferAttribute Types\n\n```javascript\n\u002F\u002F Common attribute types\nnew THREE.BufferAttribute(array, itemSize);\n\n\u002F\u002F Typed array options\nnew Float32Array(count * itemSize); \u002F\u002F Positions, normals, UVs\nnew Uint16Array(count); \u002F\u002F Indices (up to 65535 vertices)\nnew Uint32Array(count); \u002F\u002F Indices (larger meshes)\nnew Uint8Array(count * itemSize); \u002F\u002F Colors (0-255 range)\n\n\u002F\u002F Item sizes\n\u002F\u002F Position: 3 (x, y, z)\n\u002F\u002F Normal: 3 (x, y, z)\n\u002F\u002F UV: 2 (u, v)\n\u002F\u002F Color: 3 (r, g, b) or 4 (r, g, b, a)\n\u002F\u002F Index: 1\n```\n\n### Modifying BufferGeometry\n\n```javascript\nconst positions = geometry.attributes.position;\n\n\u002F\u002F Modify vertex\npositions.setXYZ(index, x, y, z);\n\n\u002F\u002F Access vertex\nconst x = positions.getX(index);\nconst y = positions.getY(index);\nconst z = positions.getZ(index);\n\n\u002F\u002F Flag for GPU update\npositions.needsUpdate = true;\n\n\u002F\u002F Recompute normals after position changes\ngeometry.computeVertexNormals();\n\n\u002F\u002F Recompute bounding box\u002Fsphere after changes\ngeometry.computeBoundingBox();\ngeometry.computeBoundingSphere();\n```\n\n### Interleaved Buffers (Advanced)\n\n```javascript\n\u002F\u002F More efficient memory layout for large meshes\nconst interleavedBuffer = new THREE.InterleavedBuffer(\n  new Float32Array([\n    \u002F\u002F pos.x, pos.y, pos.z, uv.u, uv.v (repeated per vertex)\n    -1, -1, 0, 0, 0, 1, -1, 0, 1, 0, 1, 1, 0, 1, 1, -1, 1, 0, 0, 1,\n  ]),\n  5, \u002F\u002F stride (floats per vertex)\n);\n\ngeometry.setAttribute(\n  \"position\",\n  new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0),\n); \u002F\u002F size 3, offset 0\ngeometry.setAttribute(\n  \"uv\",\n  new THREE.InterleavedBufferAttribute(interleavedBuffer, 2, 3),\n); \u002F\u002F size 2, offset 3\n```\n\n## EdgesGeometry & WireframeGeometry\n\n```javascript\n\u002F\u002F Edge lines (only hard edges)\nconst edges = new THREE.EdgesGeometry(boxGeometry, 15); \u002F\u002F 15 = threshold angle\nconst edgeMesh = new THREE.LineSegments(\n  edges,\n  new THREE.LineBasicMaterial({ color: 0xffffff }),\n);\n\n\u002F\u002F Wireframe (all triangles)\nconst wireframe = new THREE.WireframeGeometry(boxGeometry);\nconst wireMesh = new THREE.LineSegments(\n  wireframe,\n  new THREE.LineBasicMaterial({ color: 0xffffff }),\n);\n```\n\n## Points\n\n```javascript\n\u002F\u002F Create point cloud\nconst geometry = new THREE.BufferGeometry();\nconst positions = new Float32Array(1000 * 3);\n\nfor (let i = 0; i \u003C 1000; i++) {\n  positions[i * 3] = (Math.random() - 0.5) * 10;\n  positions[i * 3 + 1] = (Math.random() - 0.5) * 10;\n  positions[i * 3 + 2] = (Math.random() - 0.5) * 10;\n}\n\ngeometry.setAttribute(\"position\", new THREE.BufferAttribute(positions, 3));\n\nconst material = new THREE.PointsMaterial({\n  size: 0.1,\n  sizeAttenuation: true, \u002F\u002F Size decreases with distance\n  color: 0xffffff,\n});\n\nconst points = new THREE.Points(geometry, material);\nscene.add(points);\n```\n\n## Lines\n\n```javascript\n\u002F\u002F Line (connected points)\nconst points = [\n  new THREE.Vector3(-1, 0, 0),\n  new THREE.Vector3(0, 1, 0),\n  new THREE.Vector3(1, 0, 0),\n];\nconst geometry = new THREE.BufferGeometry().setFromPoints(points);\nconst line = new THREE.Line(\n  geometry,\n  new THREE.LineBasicMaterial({ color: 0xff0000 }),\n);\n\n\u002F\u002F LineLoop (closed loop)\nconst loop = new THREE.LineLoop(geometry, material);\n\n\u002F\u002F LineSegments (pairs of points)\nconst segmentsGeometry = new THREE.BufferGeometry();\nsegmentsGeometry.setAttribute(\n  \"position\",\n  new THREE.BufferAttribute(\n    new Float32Array([\n      -1,\n      0,\n      0,\n      0,\n      1,\n      0, \u002F\u002F segment 1\n      0,\n      1,\n      0,\n      1,\n      0,\n      0, \u002F\u002F segment 2\n    ]),\n    3,\n  ),\n);\nconst segments = new THREE.LineSegments(segmentsGeometry, material);\n```\n\n## InstancedMesh\n\nEfficiently render many copies of the same geometry.\n\n```javascript\nconst geometry = new THREE.BoxGeometry(1, 1, 1);\nconst material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });\nconst count = 1000;\n\nconst instancedMesh = new THREE.InstancedMesh(geometry, material, count);\n\n\u002F\u002F Set transforms for each instance\nconst dummy = new THREE.Object3D();\nconst matrix = new THREE.Matrix4();\n\nfor (let i = 0; i \u003C count; i++) {\n  dummy.position.set(\n    (Math.random() - 0.5) * 20,\n    (Math.random() - 0.5) * 20,\n    (Math.random() - 0.5) * 20,\n  );\n  dummy.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0);\n  dummy.scale.setScalar(0.5 + Math.random());\n  dummy.updateMatrix();\n\n  instancedMesh.setMatrixAt(i, dummy.matrix);\n}\n\n\u002F\u002F Flag for GPU update\ninstancedMesh.instanceMatrix.needsUpdate = true;\n\n\u002F\u002F Optional: per-instance colors\ninstancedMesh.instanceColor = new THREE.InstancedBufferAttribute(\n  new Float32Array(count * 3),\n  3,\n);\nfor (let i = 0; i \u003C count; i++) {\n  instancedMesh.setColorAt(\n    i,\n    new THREE.Color(Math.random(), Math.random(), Math.random()),\n  );\n}\ninstancedMesh.instanceColor.needsUpdate = true;\n\nscene.add(instancedMesh);\n```\n\n### Update Instance at Runtime\n\n```javascript\n\u002F\u002F Update single instance\nconst matrix = new THREE.Matrix4();\ninstancedMesh.getMatrixAt(index, matrix);\n\u002F\u002F Modify matrix...\ninstancedMesh.setMatrixAt(index, matrix);\ninstancedMesh.instanceMatrix.needsUpdate = true;\n\n\u002F\u002F Raycasting with instanced mesh\nconst intersects = raycaster.intersectObject(instancedMesh);\nif (intersects.length > 0) {\n  const instanceId = intersects[0].instanceId;\n}\n```\n\n## InstancedBufferGeometry (Advanced)\n\nFor custom per-instance attributes beyond transform\u002Fcolor.\n\n```javascript\nconst geometry = new THREE.InstancedBufferGeometry();\ngeometry.copy(new THREE.BoxGeometry(1, 1, 1));\n\n\u002F\u002F Add per-instance attribute\nconst offsets = new Float32Array(count * 3);\nfor (let i = 0; i \u003C count; i++) {\n  offsets[i * 3] = Math.random() * 10;\n  offsets[i * 3 + 1] = Math.random() * 10;\n  offsets[i * 3 + 2] = Math.random() * 10;\n}\ngeometry.setAttribute(\"offset\", new THREE.InstancedBufferAttribute(offsets, 3));\n\n\u002F\u002F Use in shader\n\u002F\u002F attribute vec3 offset;\n\u002F\u002F vec3 transformed = position + offset;\n```\n\n## Geometry Utilities\n\n```javascript\nimport * as BufferGeometryUtils from \"three\u002Fexamples\u002Fjsm\u002Futils\u002FBufferGeometryUtils.js\";\n\n\u002F\u002F Merge geometries (must have same attributes)\nconst merged = BufferGeometryUtils.mergeGeometries([geo1, geo2, geo3]);\n\n\u002F\u002F Merge with groups (for multi-material)\nconst merged = BufferGeometryUtils.mergeGeometries([geo1, geo2], true);\n\n\u002F\u002F Compute tangents (required for normal maps)\nBufferGeometryUtils.computeTangents(geometry);\n\n\u002F\u002F Interleave attributes for better performance\nconst interleaved = BufferGeometryUtils.interleaveAttributes([\n  geometry.attributes.position,\n  geometry.attributes.normal,\n  geometry.attributes.uv,\n]);\n```\n\n## Common Patterns\n\n### Center Geometry\n\n```javascript\ngeometry.computeBoundingBox();\ngeometry.center(); \u002F\u002F Move vertices so center is at origin\n```\n\n### Scale to Fit\n\n```javascript\ngeometry.computeBoundingBox();\nconst size = new THREE.Vector3();\ngeometry.boundingBox.getSize(size);\nconst maxDim = Math.max(size.x, size.y, size.z);\ngeometry.scale(1 \u002F maxDim, 1 \u002F maxDim, 1 \u002F maxDim);\n```\n\n### Clone and Transform\n\n```javascript\nconst clone = geometry.clone();\nclone.rotateX(Math.PI \u002F 2);\nclone.translate(0, 1, 0);\nclone.scale(2, 2, 2);\n```\n\n### Morph Targets\n\n```javascript\n\u002F\u002F Base geometry\nconst geometry = new THREE.BoxGeometry(1, 1, 1, 4, 4, 4);\n\n\u002F\u002F Create morph target\nconst morphPositions = geometry.attributes.position.array.slice();\nfor (let i = 0; i \u003C morphPositions.length; i += 3) {\n  morphPositions[i] *= 2; \u002F\u002F Scale X\n  morphPositions[i + 1] *= 0.5; \u002F\u002F Squash Y\n}\n\ngeometry.morphAttributes.position = [\n  new THREE.BufferAttribute(new Float32Array(morphPositions), 3),\n];\n\nconst mesh = new THREE.Mesh(geometry, material);\nmesh.morphTargetInfluences[0] = 0.5; \u002F\u002F 50% blend\n```\n\n## Performance Tips\n\n1. **Use indexed geometry**: Reuse vertices with indices\n2. **Merge static meshes**: Reduce draw calls with `mergeGeometries`\n3. **Use InstancedMesh**: For many identical objects\n4. **Choose appropriate segment counts**: More segments = smoother but slower\n5. **Dispose unused geometry**: `geometry.dispose()`\n\n```javascript\n\u002F\u002F Good segment counts for common uses\nnew THREE.SphereGeometry(1, 32, 32); \u002F\u002F Good quality\nnew THREE.SphereGeometry(1, 64, 64); \u002F\u002F High quality\nnew THREE.SphereGeometry(1, 16, 16); \u002F\u002F Performance mode\n\n\u002F\u002F Dispose when done\ngeometry.dispose();\n```\n\n## BatchedMesh (r183)\n\n`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**.\n\n```javascript\nconst batchedMesh = new THREE.BatchedMesh(maxGeometryCount, maxVertexCount, maxIndexCount);\nbatchedMesh.sortObjects = true; \u002F\u002F Enable depth sorting for transparency\n\n\u002F\u002F Add different geometries\nconst boxId = batchedMesh.addGeometry(new THREE.BoxGeometry(1, 1, 1));\nconst sphereId = batchedMesh.addGeometry(new THREE.SphereGeometry(0.5, 16, 16));\n\n\u002F\u002F Add instances of those geometries\nconst instance1 = batchedMesh.addInstance(boxId);\nconst instance2 = batchedMesh.addInstance(sphereId);\n\n\u002F\u002F Set transforms\nconst matrix = new THREE.Matrix4();\nmatrix.setPosition(2, 0, 0);\nbatchedMesh.setMatrixAt(instance1, matrix);\n\n\u002F\u002F Per-instance opacity (r183)\nbatchedMesh.setOpacityAt(instance1, 0.5);\n\n\u002F\u002F Per-instance visibility\nbatchedMesh.setVisibleAt(instance2, false);\n\nscene.add(batchedMesh);\n```\n\n## See Also\n\n- `threejs-fundamentals` - Scene setup and Object3D\n- `threejs-materials` - Material types for meshes\n- `threejs-shaders` - Custom vertex manipulation\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,197,672,"2026-05-16 13:44:05",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"视觉创意","graphic","mdi-brush","海报、Logo、插画等视觉创作",2,48,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"b0f12ea2-f295-486f-bead-5e0ef04542c3","1.0.0","threejs-geometry.zip",4752,"uploads\u002Fskills\u002F6ec2956a-f721-4c8c-a546-e16b34c38bea\u002Fthreejs-geometry.zip","349246ef7f878b9f2ed6856daa8745c069f4ee746405ddf598bd8151558998ff","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":15457}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]