{"id":"adaf4562-c7bc-409f-b0fd-d18121e309fe","shortId":"asHLE5","kind":"skill","title":"threejs-fundamentals","tagline":"Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.","description":"# Three.js Fundamentals\n\n## When to Use\n- You need to set up the core structure of a Three.js scene.\n- The task involves scenes, cameras, renderers, transforms, resize handling, or object hierarchy basics.\n- You want foundational Three.js guidance before working on specialized topics like shaders or post-processing.\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n// Create scene, camera, renderer\nconst scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(\n  75,\n  window.innerWidth / window.innerHeight,\n  0.1,\n  1000,\n);\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\n\nrenderer.setSize(window.innerWidth, window.innerHeight);\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\ndocument.body.appendChild(renderer.domElement);\n\n// Add a mesh\nconst geometry = new THREE.BoxGeometry(1, 1, 1);\nconst material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });\nconst cube = new THREE.Mesh(geometry, material);\nscene.add(cube);\n\n// Add light\nscene.add(new THREE.AmbientLight(0xffffff, 0.5));\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1);\ndirLight.position.set(5, 5, 5);\nscene.add(dirLight);\n\ncamera.position.z = 5;\n\n// Animation loop\nfunction animate() {\n  requestAnimationFrame(animate);\n  cube.rotation.x += 0.01;\n  cube.rotation.y += 0.01;\n  renderer.render(scene, camera);\n}\nanimate();\n\n// Handle resize\nwindow.addEventListener(\"resize\", () => {\n  camera.aspect = window.innerWidth / window.innerHeight;\n  camera.updateProjectionMatrix();\n  renderer.setSize(window.innerWidth, window.innerHeight);\n});\n```\n\n## Core Classes\n\n### Scene\n\nContainer for all 3D objects, lights, and cameras.\n\n```javascript\nconst scene = new THREE.Scene();\nscene.background = new THREE.Color(0x000000); // Solid color\nscene.background = texture; // Skybox texture\nscene.background = cubeTexture; // Cubemap\nscene.environment = envMap; // Environment map for PBR\nscene.fog = new THREE.Fog(0xffffff, 1, 100); // Linear fog\nscene.fog = new THREE.FogExp2(0xffffff, 0.02); // Exponential fog\n```\n\n### Cameras\n\n**PerspectiveCamera** - Most common, simulates human eye.\n\n```javascript\n// PerspectiveCamera(fov, aspect, near, far)\nconst camera = new THREE.PerspectiveCamera(\n  75, // Field of view (degrees)\n  window.innerWidth / window.innerHeight, // Aspect ratio\n  0.1, // Near clipping plane\n  1000, // Far clipping plane\n);\n\ncamera.position.set(0, 5, 10);\ncamera.lookAt(0, 0, 0);\ncamera.updateProjectionMatrix(); // Call after changing fov, aspect, near, far\n```\n\n**OrthographicCamera** - No perspective distortion, good for 2D/isometric.\n\n```javascript\n// OrthographicCamera(left, right, top, bottom, near, far)\nconst aspect = window.innerWidth / window.innerHeight;\nconst frustumSize = 10;\nconst camera = new THREE.OrthographicCamera(\n  (frustumSize * aspect) / -2,\n  (frustumSize * aspect) / 2,\n  frustumSize / 2,\n  frustumSize / -2,\n  0.1,\n  1000,\n);\n```\n\n**ArrayCamera** - Multiple viewports with sub-cameras.\n\n```javascript\nconst cameras = [];\nfor (let i = 0; i < 4; i++) {\n  const subcamera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);\n  subcamera.viewport = new THREE.Vector4(\n    Math.floor(i % 2) * 0.5,\n    Math.floor(i / 2) * 0.5,\n    0.5,\n    0.5,\n  );\n  cameras.push(subcamera);\n}\nconst arrayCamera = new THREE.ArrayCamera(cameras);\n```\n\n**CubeCamera** - Renders environment maps for reflections.\n\n```javascript\nconst cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256);\nconst cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);\nscene.add(cubeCamera);\n\n// Use for reflections\nmaterial.envMap = cubeRenderTarget.texture;\n\n// Update each frame (expensive!)\ncubeCamera.position.copy(reflectiveMesh.position);\ncubeCamera.update(renderer, scene);\n```\n\n### WebGLRenderer\n\n```javascript\nconst renderer = new THREE.WebGLRenderer({\n  canvas: document.querySelector(\"#canvas\"), // Optional existing canvas\n  antialias: true, // Smooth edges\n  alpha: true, // Transparent background\n  powerPreference: \"high-performance\", // GPU hint\n  preserveDrawingBuffer: true, // For screenshots\n});\n\nrenderer.setSize(width, height);\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n\n// Tone mapping\nrenderer.toneMapping = THREE.ACESFilmicToneMapping;\nrenderer.toneMappingExposure = 1.0;\n\n// Color space (Three.js r152+)\nrenderer.outputColorSpace = THREE.SRGBColorSpace;\n\n// Shadows\nrenderer.shadowMap.enabled = true;\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n// Clear color\nrenderer.setClearColor(0x000000, 1);\n\n// Render\nrenderer.render(scene, camera);\n```\n\n### Object3D\n\nBase class for all 3D objects. Mesh, Group, Light, Camera all extend Object3D.\n\n```javascript\nconst obj = new THREE.Object3D();\n\n// Transform\nobj.position.set(x, y, z);\nobj.rotation.set(x, y, z); // Euler angles (radians)\nobj.quaternion.set(x, y, z, w); // Quaternion rotation\nobj.scale.set(x, y, z);\n\n// Local vs World transforms\nobj.getWorldPosition(targetVector);\nobj.getWorldQuaternion(targetQuaternion);\nobj.getWorldDirection(targetVector);\n\n// Hierarchy\nobj.add(child);\nobj.remove(child);\nobj.parent;\nobj.children;\n\n// Visibility\nobj.visible = false;\n\n// Layers (for selective rendering/raycasting)\nobj.layers.set(1);\nobj.layers.enable(2);\nobj.layers.disable(0);\n\n// Traverse hierarchy\nobj.traverse((child) => {\n  if (child.isMesh) child.material.color.set(0xff0000);\n});\n\n// Matrix updates\nobj.matrixAutoUpdate = true; // Default: auto-update matrices\nobj.updateMatrix(); // Manual matrix update\nobj.updateMatrixWorld(true); // Update world matrix recursively\n```\n\n### Group\n\nEmpty container for organizing objects.\n\n```javascript\nconst group = new THREE.Group();\ngroup.add(mesh1);\ngroup.add(mesh2);\nscene.add(group);\n\n// Transform entire group\ngroup.position.x = 5;\ngroup.rotation.y = Math.PI / 4;\n```\n\n### Mesh\n\nCombines geometry and material.\n\n```javascript\nconst mesh = new THREE.Mesh(geometry, material);\n\n// Multiple materials (one per geometry group)\nconst mesh = new THREE.Mesh(geometry, [material1, material2]);\n\n// Useful properties\nmesh.geometry;\nmesh.material;\nmesh.castShadow = true;\nmesh.receiveShadow = true;\n\n// Frustum culling\nmesh.frustumCulled = true; // Default: skip if outside camera view\n\n// Render order\nmesh.renderOrder = 10; // Higher = rendered later\n```\n\n## Coordinate System\n\nThree.js uses a **right-handed coordinate system**:\n\n- **+X** points right\n- **+Y** points up\n- **+Z** points toward viewer (out of screen)\n\n```javascript\n// Axes helper\nconst axesHelper = new THREE.AxesHelper(5);\nscene.add(axesHelper); // Red=X, Green=Y, Blue=Z\n```\n\n## Math Utilities\n\n### Vector3\n\n```javascript\nconst v = new THREE.Vector3(x, y, z);\nv.set(x, y, z);\nv.copy(otherVector);\nv.clone();\n\n// Operations (modify in place)\nv.add(v2);\nv.sub(v2);\nv.multiply(v2);\nv.multiplyScalar(2);\nv.divideScalar(2);\nv.normalize();\nv.negate();\nv.clamp(min, max);\nv.lerp(target, alpha);\n\n// Calculations (return new value)\nv.length();\nv.lengthSq(); // Faster than length()\nv.distanceTo(v2);\nv.dot(v2);\nv.cross(v2); // Modifies v\nv.angleTo(v2);\n\n// Transform\nv.applyMatrix4(matrix);\nv.applyQuaternion(q);\nv.project(camera); // World to NDC\nv.unproject(camera); // NDC to world\n```\n\n### Matrix4\n\n```javascript\nconst m = new THREE.Matrix4();\nm.identity();\nm.copy(other);\nm.clone();\n\n// Build transforms\nm.makeTranslation(x, y, z);\nm.makeRotationX(theta);\nm.makeRotationY(theta);\nm.makeRotationZ(theta);\nm.makeRotationFromQuaternion(q);\nm.makeScale(x, y, z);\n\n// Compose/decompose\nm.compose(position, quaternion, scale);\nm.decompose(position, quaternion, scale);\n\n// Operations\nm.multiply(m2); // m = m * m2\nm.premultiply(m2); // m = m2 * m\nm.invert();\nm.transpose();\n\n// Camera matrices\nm.makePerspective(left, right, top, bottom, near, far);\nm.makeOrthographic(left, right, top, bottom, near, far);\nm.lookAt(eye, target, up);\n```\n\n### Quaternion\n\n```javascript\nconst q = new THREE.Quaternion();\nq.setFromEuler(euler);\nq.setFromAxisAngle(axis, angle);\nq.setFromRotationMatrix(matrix);\n\nq.multiply(q2);\nq.slerp(target, t); // Spherical interpolation\nq.normalize();\nq.invert();\n```\n\n### Euler\n\n```javascript\nconst euler = new THREE.Euler(x, y, z, \"XYZ\"); // Order matters!\neuler.setFromQuaternion(q);\neuler.setFromRotationMatrix(m);\n\n// Rotation orders: 'XYZ', 'YXZ', 'ZXY', 'XZY', 'YZX', 'ZYX'\n```\n\n### Color\n\n```javascript\nconst color = new THREE.Color(0xff0000);\nconst color = new THREE.Color(\"red\");\nconst color = new THREE.Color(\"rgb(255, 0, 0)\");\nconst color = new THREE.Color(\"#ff0000\");\n\ncolor.setHex(0x00ff00);\ncolor.setRGB(r, g, b); // 0-1 range\ncolor.setHSL(h, s, l); // 0-1 range\n\ncolor.lerp(otherColor, alpha);\ncolor.multiply(otherColor);\ncolor.multiplyScalar(2);\n```\n\n### MathUtils\n\n```javascript\nTHREE.MathUtils.clamp(value, min, max);\nTHREE.MathUtils.lerp(start, end, alpha);\nTHREE.MathUtils.mapLinear(value, inMin, inMax, outMin, outMax);\nTHREE.MathUtils.degToRad(degrees);\nTHREE.MathUtils.radToDeg(radians);\nTHREE.MathUtils.randFloat(min, max);\nTHREE.MathUtils.randInt(min, max);\nTHREE.MathUtils.smoothstep(x, min, max);\nTHREE.MathUtils.smootherstep(x, min, max);\n```\n\n## Common Patterns\n\n### Proper Cleanup\n\n```javascript\nfunction dispose() {\n  // Dispose geometries\n  mesh.geometry.dispose();\n\n  // Dispose materials\n  if (Array.isArray(mesh.material)) {\n    mesh.material.forEach((m) => m.dispose());\n  } else {\n    mesh.material.dispose();\n  }\n\n  // Dispose textures\n  texture.dispose();\n\n  // Remove from scene\n  scene.remove(mesh);\n\n  // Dispose renderer\n  renderer.dispose();\n}\n```\n\n### Timer and Clock for Animation\n\n**Timer (recommended in r183)** - pauses when tab is hidden, cleaner API:\n\n```javascript\nconst timer = new THREE.Timer();\n\nrenderer.setAnimationLoop(() => {\n  timer.update();\n  const delta = timer.getDelta();\n  const elapsed = timer.getElapsed();\n\n  mesh.rotation.y += delta * 0.5;\n  renderer.render(scene, camera);\n});\n```\n\n**Clock (legacy, still works):**\n\n```javascript\nconst clock = new THREE.Clock();\n\nfunction animate() {\n  const delta = clock.getDelta(); // Time since last frame (seconds)\n  const elapsed = clock.getElapsedTime(); // Total time (seconds)\n\n  mesh.rotation.y += delta * 0.5; // Consistent speed regardless of framerate\n\n  requestAnimationFrame(animate);\n  renderer.render(scene, camera);\n}\n```\n\n### Animation Loop\n\nPrefer `renderer.setAnimationLoop()` over manual `requestAnimationFrame`. It handles WebXR compatibility and is the standard Three.js pattern:\n\n```javascript\nrenderer.setAnimationLoop(() => {\n  controls.update();\n  renderer.render(scene, camera);\n});\n```\n\n### Responsive Canvas\n\n```javascript\nfunction onWindowResize() {\n  const width = window.innerWidth;\n  const height = window.innerHeight;\n\n  camera.aspect = width / height;\n  camera.updateProjectionMatrix();\n\n  renderer.setSize(width, height);\n  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n}\nwindow.addEventListener(\"resize\", onWindowResize);\n```\n\n### Loading Manager\n\n```javascript\nconst manager = new THREE.LoadingManager();\n\nmanager.onStart = (url, loaded, total) => console.log(\"Started loading\");\nmanager.onLoad = () => console.log(\"All loaded\");\nmanager.onProgress = (url, loaded, total) => console.log(`${loaded}/${total}`);\nmanager.onError = (url) => console.error(`Error loading ${url}`);\n\nconst textureLoader = new THREE.TextureLoader(manager);\nconst gltfLoader = new GLTFLoader(manager);\n```\n\n## Performance Tips\n\n1. **Limit draw calls**: Merge geometries, use instancing, atlas textures\n2. **Frustum culling**: Enabled by default, ensure bounding boxes are correct\n3. **LOD (Level of Detail)**: Use `THREE.LOD` for distance-based mesh switching\n4. **Object pooling**: Reuse objects instead of creating/destroying\n5. **Avoid `getWorldPosition` in loops**: Cache results\n\n```javascript\n// Merge static geometries\nimport { mergeGeometries } from \"three/examples/jsm/utils/BufferGeometryUtils.js\";\nconst merged = mergeGeometries([geo1, geo2, geo3]);\n\n// LOD\nconst lod = new THREE.LOD();\nlod.addLevel(highDetailMesh, 0);\nlod.addLevel(medDetailMesh, 50);\nlod.addLevel(lowDetailMesh, 100);\nscene.add(lod);\n```\n\n## WebGPU Renderer (r183)\n\nThree.js includes an experimental WebGPU renderer as an alternative to WebGL:\n\n```javascript\nimport { WebGPURenderer } from \"three/addons/renderers/webgpu/WebGPURenderer.js\";\n\nconst renderer = new WebGPURenderer({ antialias: true });\nawait renderer.init();\nrenderer.setSize(window.innerWidth, window.innerHeight);\ndocument.body.appendChild(renderer.domElement);\n```\n\nWebGPU uses TSL (Three.js Shading Language) instead of GLSL. The WebGL renderer remains the default and is fully supported.\n\n## See Also\n\n- `threejs-geometry` - Geometry creation and manipulation\n- `threejs-materials` - Material types and properties\n- `threejs-lighting` - Light types and shadows\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.","tags":["threejs","fundamentals","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-threejs-fundamentals","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-fundamentals","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (13,037 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:01.176Z","embedding":null,"createdAt":"2026-04-18T21:46:16.843Z","updatedAt":"2026-04-22T06:52:01.176Z","lastSeenAt":"2026-04-22T06:52:01.176Z","tsv":"'-1':907,914 '-2':317,324 '0':274,278,279,280,340,541,893,894,906,913,1224 '0.01':170,173 '0.02':236 '0.1':99,265,325,350,388 '0.5':146,358,362,363,364,1020,1052 '0x000000':208,464 '0x00ff00':131,901 '0xff0000':549,881 '0xffffff':145,151,227,235 '1':123,124,125,152,228,349,465,537,1154 '1.0':449 '10':276,310,642 '100':229,351,1230 '1000':100,269,326,389 '2':113,320,322,357,361,443,539,714,716,922,1107,1164 '255':892 '256':383 '2d/isometric':295 '3':1175 '3d':17,195,475 '4':342,595,1188 '40':348 '5':154,155,156,161,275,591,676,1196 '50':1227 '75':96,256 'add':116,140 'alpha':423,724,918,932 'also':1285 'altern':1244 'angl':499,839 'anim':162,165,167,177,992,1034,1059,1063 'antialia':105,419,1256 'api':1003 'array.isarray':970 'arraycamera':327,368 'ask':1340 'aspect':249,263,286,305,316,319 'atlas':1162 'auto':556 'auto-upd':555 'avoid':1197 'await':1258 'axe':670 'axeshelp':673,678 'axi':838 'b':905 'background':426 'base':471,1185 'basic':59 'blue':683 'bottom':301,815,822 'bound':1171 'boundari':1348 'box':1172 'build':769 'cach':1201 'calcul':725 'call':282,1157 'camera':7,20,51,86,93,176,199,239,253,312,333,336,371,469,480,637,750,755,809,1023,1062,1085 'camera.aspect':182,1097 'camera.lookat':277 'camera.position':159 'camera.position.set':273 'camera.updateprojectionmatrix':185,281,1100 'cameras.push':365 'canva':413,415,418,1087 'chang':284 'child':524,526,545 'child.ismesh':547 'child.material.color.set':548 'clarif':1342 'class':190,472 'cleaner':1002 'cleanup':960 'clear':461,1315 'clip':267,271 'clock':990,1024,1030 'clock.getdelta':1037 'clock.getelapsedtime':1045 'color':130,210,450,462,875,878,883,888,896 'color.lerp':916 'color.multiply':919 'color.multiplyscalar':921 'color.sethex':900 'color.sethsl':909 'color.setrgb':902 'combin':597 'common':242,957 'compat':1073 'compose/decompose':787 'configur':21 'consist':1053 'console.error':1138 'console.log':1122,1126,1133 'const':88,92,101,119,126,132,147,201,252,304,308,311,335,344,367,379,384,409,485,576,602,614,672,689,761,831,853,877,882,887,895,1005,1011,1014,1029,1035,1043,1091,1094,1114,1142,1147,1211,1218,1252 'contain':192,571 'controls.update':1082 'coordin':11,646,654 'core':41,189 'correct':1174 'creat':19,84 'creating/destroying':1195 'creation':1290 'criteria':1351 'cube':133,139 'cube.rotation':168,171 'cubecamera':372,385,392 'cubecamera.position.copy':402 'cubecamera.update':404 'cubemap':217 'cuberendertarget':380,390 'cuberendertarget.texture':397 'cubetextur':216 'cull':630,1166 'default':554,633,1169,1279 'degre':260,940 'delta':1012,1019,1036,1051 'describ':1319 'detail':1179 'dirlight':148,158 'dirlight.position.set':153 'dispos':963,964,967,977,985 'distanc':1184 'distance-bas':1183 'distort':292 'document.body.appendchild':114,1263 'document.queryselector':414 'draw':1156 'edg':422 'elaps':1015,1044 'els':975 'empti':570 'enabl':1167 'end':931 'ensur':1170 'entir':587 'environ':220,374,1331 'environment-specif':1330 'envmap':219 'error':1139 'euler':498,836,851,854 'euler.setfromquaternion':863 'euler.setfromrotationmatrix':865 'exist':417 'expens':401 'experiment':1239 'expert':1336 'exponenti':237 'extend':482 'eye':245,826 'fals':531 'far':251,270,288,303,817,824 'faster':731 'ff0000':899 'field':257 'fog':231,238 'foundat':62 'fov':248,285 'frame':400,1041 'framer':1057 'frustum':629,1165 'frustums':309,315,318,321,323 'fulli':1282 'function':164,962,1033,1089 'fundament':3,31 'g':904 'geo1':1214 'geo2':1215 'geo3':1216 'geometri':120,136,598,606,612,618,965,1159,1206,1288,1289 'getworldposit':1198 'glsl':1273 'gltfloader':1148,1150 'good':293 'gpu':431 'green':681 'group':478,569,577,585,588,613 'group.add':580,582 'group.position':589 'group.rotation':592 'guidanc':64 'h':910 'hand':653 'handl':55,178,1071 'height':439,1095,1099,1103 'helper':671 'hidden':1001 'hierarchi':10,25,58,522,543 'high':429 'high-perform':428 'highdetailmesh':1223 'higher':643 'hint':432 'human':244 'import':79,1207,1248 'includ':1237 'inmax':936 'inmin':935 'input':1345 'instanc':1161 'instead':1193,1271 'interpol':848 'involv':49 'javascript':78,200,246,296,334,378,408,484,575,601,669,688,760,830,852,876,924,961,1004,1028,1080,1088,1113,1203,1247 'l':912 'languag':1270 'last':1040 'later':645 'layer':532 'left':298,812,819 'legaci':1025 'length':733 'let':338 'level':1177 'light':141,197,479,1302,1303 'like':70 'limit':1155,1307 'linear':230 'load':1111,1120,1124,1128,1131,1134,1140 'local':512 'lod':1176,1217,1219,1232 'lod.addlevel':1222,1225,1228 'loop':163,1064,1200 'lowdetailmesh':1229 'm':762,799,800,804,806,866,973 'm.clone':768 'm.compose':788 'm.copy':766 'm.decompose':792 'm.dispose':974 'm.identity':765 'm.invert':807 'm.lookat':825 'm.makeorthographic':818 'm.makeperspective':811 'm.makerotationfromquaternion':781 'm.makerotationx':775 'm.makerotationy':777 'm.makerotationz':779 'm.makescale':783 'm.maketranslation':771 'm.multiply':797 'm.premultiply':802 'm.transpose':808 'm2':798,801,803,805 'manag':23,1112,1115,1146,1151 'manager.onerror':1136 'manager.onload':1125 'manager.onprogress':1129 'manager.onstart':1118 'manipul':1292 'manual':560,1068 'map':221,375,445 'match':1316 'materi':127,137,600,607,609,968,1295,1296 'material.envmap':396 'material1':619 'material2':620 'math':685 'math.floor':355,359 'math.min':111,441,1105 'math.pi':594 'mathutil':923 'matric':558,810 'matrix':550,561,567,746,841 'matrix4':759 'matter':862 'max':721,928,945,948,952,956 'meddetailmesh':1226 'merg':1158,1204,1212 'mergegeometri':1208,1213 'mesh':118,477,596,603,615,984,1186 'mesh.castshadow':625 'mesh.frustumculled':631 'mesh.geometry':623 'mesh.geometry.dispose':966 'mesh.material':624,971 'mesh.material.dispose':976 'mesh.material.foreach':972 'mesh.receiveshadow':627 'mesh.renderorder':641 'mesh.rotation':1017,1049 'mesh1':581 'mesh2':583 'min':720,927,944,947,951,955 'miss':1353 'modifi':704,740 'multipl':328,608 'ndc':753,756 'near':250,266,287,302,816,823 'need':36 'new':90,94,103,121,128,134,143,149,203,206,225,233,254,313,346,353,369,381,386,411,487,578,604,616,674,691,727,763,833,855,879,884,889,897,1007,1031,1116,1144,1149,1220,1254 'obj':486 'obj.add':523 'obj.children':528 'obj.getworlddirection':520 'obj.getworldposition':516 'obj.getworldquaternion':518 'obj.layers.disable':540 'obj.layers.enable':538 'obj.layers.set':536 'obj.matrixautoupdate':552 'obj.parent':527 'obj.position.set':490 'obj.quaternion.set':501 'obj.remove':525 'obj.rotation.set':494 'obj.scale.set':508 'obj.traverse':544 'obj.updatematrix':559 'obj.updatematrixworld':563 'obj.visible':530 'object':24,57,196,476,574,1189,1192 'object3d':9,470,483 'one':610 'onwindowres':1090,1110 'oper':703,796 'option':416 'order':640,861,868 'organ':573 'orthographiccamera':289,297 'othercolor':917,920 'othervector':701 'outmax':938 'outmin':937 'output':1325 'outsid':636 'pattern':958,1079 'paus':997 'pbr':223 'per':611 'perform':430,1152 'permiss':1346 'perspect':291 'perspectivecamera':240,247 'place':706 'plane':268,272 'point':657,660,663 'pool':1190 'posit':789,793 'post':74 'post-process':73 'powerprefer':427 'prefer':1065 'preservedrawingbuff':433 'process':75 'proper':959 'properti':622,1299 'q':748,782,832,864 'q.invert':850 'q.multiply':842 'q.normalize':849 'q.setfromaxisangle':837 'q.setfromeuler':835 'q.setfromrotationmatrix':840 'q.slerp':844 'q2':843 'quaternion':506,790,794,829 'quick':76 'r':903 'r152':453 'r183':996,1235 'radian':500,942 'rang':908,915 'ratio':264 'recommend':994 'recurs':568 'red':679,886 'reflect':377,395 'reflectivemesh.position':403 'regardless':1055 'remain':1277 'remov':980 'render':8,22,52,87,102,373,405,410,466,639,644,986,1234,1241,1253,1276 'renderer.dispose':987 'renderer.domelement':115,1264 'renderer.init':1259 'renderer.outputcolorspace':454 'renderer.render':174,467,1021,1060,1083 'renderer.setanimationloop':1009,1066,1081 'renderer.setclearcolor':463 'renderer.setpixelratio':110,440,1104 'renderer.setsize':107,186,437,1101,1260 'renderer.shadowmap.enabled':457 'renderer.shadowmap.type':459 'renderer.tonemapping':446 'renderer.tonemappingexposure':448 'rendering/raycasting':535 'requestanimationfram':166,1058,1069 'requir':1344 'resiz':54,179,181,1109 'respons':1086 'result':1202 'return':726 'reus':1191 'review':1337 'rgb':891 'right':299,652,658,813,820 'right-hand':651 'rotat':507,867 'safeti':1347 'scale':791,795 'scene':5,18,46,50,85,89,175,191,202,406,468,982,1022,1061,1084 'scene.add':138,142,157,391,584,677,1231 'scene.background':205,211,215 'scene.environment':218 'scene.fog':224,232 'scene.remove':983 'scope':1318 'screen':668 'screenshot':436 'second':1042,1048 'see':1284 'select':534 'set':15,38 'setup':6 'shade':1269 'shader':71 'shadow':456,1306 'simul':243 'sinc':1039 'skill':1310 'skill-threejs-fundamentals' 'skip':634 'skybox':213 'smooth':421 'solid':209 'source-sickn33' 'space':451 'special':68 'specif':1332 'speed':1054 'spheric':847 'standard':1077 'start':77,930,1123 'static':1205 'still':1026 'stop':1338 'structur':42 'sub':332 'sub-camera':331 'subcamera':345,366 'subcamera.viewport':352 'substitut':1328 'success':1350 'support':1283 'switch':1187 'system':12,647,655 'tab':999 'target':723,827,845 'targetquaternion':519 'targetvector':517,521 'task':48,1314 'test':1334 'textur':212,214,978,1163 'texture.dispose':979 'textureload':1143 'theta':776,778,780 'three':81,83 'three.acesfilmictonemapping':447 'three.ambientlight':144 'three.arraycamera':370 'three.axeshelper':675 'three.boxgeometry':122 'three.clock':1032 'three.color':207,880,885,890,898 'three.cubecamera':387 'three.directionallight':150 'three.euler':856 'three.fog':226 'three.fogexp2':234 'three.group':579 'three.js':4,30,45,63,452,648,1078,1236,1268 'three.loadingmanager':1117 'three.lod':1181,1221 'three.mathutils.clamp':925 'three.mathutils.degtorad':939 'three.mathutils.lerp':929 'three.mathutils.maplinear':933 'three.mathutils.radtodeg':941 'three.mathutils.randfloat':943 'three.mathutils.randint':946 'three.mathutils.smootherstep':953 'three.mathutils.smoothstep':949 'three.matrix4':764 'three.mesh':135,605,617 'three.meshstandardmaterial':129 'three.object3d':488 'three.orthographiccamera':314 'three.pcfsoftshadowmap':460 'three.perspectivecamera':95,255,347 'three.quaternion':834 'three.scene':91,204 'three.srgbcolorspace':455 'three.textureloader':1145 'three.timer':1008 'three.vector3':692 'three.vector4':354 'three.webglcuberendertarget':382 'three.webglrenderer':104,412 'three/addons/renderers/webgpu/webgpurenderer.js':1251 'three/examples/jsm/utils/buffergeometryutils.js':1210 'threej':2,1287,1294,1301 'threejs-fundament':1 'threejs-geometri':1286 'threejs-light':1300 'threejs-materi':1293 'time':1038,1047 'timer':988,993,1006 'timer.getdelta':1013 'timer.getelapsed':1016 'timer.update':1010 'tip':1153 'tone':444 'top':300,814,821 'topic':69 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'total':1046,1121,1132,1135 'toward':664 'transform':29,53,489,515,586,744,770 'transpar':425 'travers':542 'treat':1323 'true':106,420,424,434,458,553,564,626,628,632,1257 'tsl':1267 'type':1297,1304 'updat':398,551,557,562,565 'url':1119,1130,1137,1141 'use':13,34,393,621,649,1160,1180,1266,1308 'util':686 'v':690,741 'v.add':707 'v.angleto':742 'v.applymatrix4':745 'v.applyquaternion':747 'v.clamp':719 'v.clone':702 'v.copy':700 'v.cross':738 'v.distanceto':734 'v.dividescalar':715 'v.dot':736 'v.length':729 'v.lengthsq':730 'v.lerp':722 'v.multiply':711 'v.multiplyscalar':713 'v.negate':718 'v.normalize':717 'v.project':749 'v.set':696 'v.sub':709 'v.unproject':754 'v2':708,710,712,735,737,739,743 'valid':1333 'valu':728,926,934 'vector3':687 'view':259,638 'viewer':665 'viewport':329 'visibl':529 'vs':513 'w':505 'want':61 'webgl':1246,1275 'webglrender':407 'webgpu':1233,1240,1265 'webgpurender':1249,1255 'webxr':1072 'width':438,1092,1098,1102 'window.addeventlistener':180,1108 'window.devicepixelratio':112,442,1106 'window.innerheight':98,109,184,188,262,307,1096,1262 'window.innerwidth':97,108,183,187,261,306,1093,1261 'work':27,66,1027 'world':514,566,751,758 'x':169,491,495,502,509,590,656,680,693,697,772,784,857,950,954 'xyz':860,869 'xzi':872 'y':172,492,496,503,510,593,659,682,694,698,773,785,858,1018,1050 'yxz':870 'yzx':873 'z':160,493,497,504,511,662,684,695,699,774,786,859 'zxi':871 'zyx':874","prices":[{"id":"7204f122-6bf1-4491-b01c-b252427dfb74","listingId":"adaf4562-c7bc-409f-b0fd-d18121e309fe","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:16.843Z"}],"sources":[{"listingId":"adaf4562-c7bc-409f-b0fd-d18121e309fe","source":"github","sourceId":"sickn33/antigravity-awesome-skills/threejs-fundamentals","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-fundamentals","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:16.843Z","lastSeenAt":"2026-04-22T06:52:01.176Z"}],"details":{"listingId":"adaf4562-c7bc-409f-b0fd-d18121e309fe","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"threejs-fundamentals","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"b09e623aea40928fabcd91e27bd0e74b6ee67f45","skill_md_path":"skills/threejs-fundamentals/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-fundamentals"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"threejs-fundamentals","description":"Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-fundamentals"},"updatedAt":"2026-04-22T06:52:01.176Z"}}