← all publishers

OpenAEC-Foundation

@openaec-foundation-three-js-claude-skill-package source repo

Report this profile Claim this profile

• 24 skills
• 0 followers
• 1 week ago last updated

1. ▌
   Threejs Impl React Three Fiber · openaec-foundation-three-js-claude-skill-package bundle

   Use when building 3D scenes with React using React Three Fiber (R3F). Prevents the common mistake of mixing imperative Three.js code with R3F's declarative model, creating objects inside useFrame, or forgetting Suspense for loaders. Covers Canvas, useFrame, useThree, useLoader, JSX mapping, event system, performance patterns. Keywords: React Three Fiber, R3F, Canvas, useFrame, useThree, useLoader, @react-three/fiber, 3D React, declarative Three.js, use Three.js with React, JSX 3D components.
   0 installs
2. ▌
   Threejs Agents Model Optimizer · openaec-foundation-three-js-claude-skill-package bundle

   Use when optimizing 3D models for web delivery: reducing file size, compressing meshes, optimizing textures, or generating LOD. Provides a complete GLTF optimization pipeline using Draco, KTX2, mesh simplification, and gltf-transform. Keywords: optimize model, reduce file size, Draco compression, KTX2, gltf-transform, mesh simplification, LOD, GLTF optimize, bundle size, model too big, slow loading, compress 3D model.
   0 installs
3. ▌
   Threejs Core Renderer · openaec-foundation-three-js-claude-skill-package bundle

   Use when initializing a Three.js renderer, setting up the render loop, handling window resize, configuring tone mapping, or managing color spaces. Prevents the common mistake of not capping pixel ratio, using wrong color space, or forgetting to enable shadow maps. Covers WebGLRenderer, render targets, tone mapping, color management. Keywords: WebGLRenderer, render loop, setSize, setPixelRatio, toneMapping, outputColorSpace, shadowMap, WebGLRenderTarget, dispose, resize, responsive, canvas size, window resize, fullscreen. setAnimationLoop, compileAsync.
   0 installs
4. ▌
   Threejs Impl Lighting · openaec-foundation-three-js-claude-skill-package bundle

   Use when setting up lighting in a Three.js scene: ambient, directional, point, spot, area, or environment lighting. Prevents the common mistake of too many shadow-casting lights, wrong intensity units, or missing environment maps for PBR. Covers all 7 light types, PMREMGenerator, HDR environment maps, physically correct intensity, helpers. Keywords: lighting, AmbientLight, DirectionalLight, PointLight, SpotLight, RectAreaLight, HemisphereLight, environment map, HDR, IBL, scene too dark, add light, realistic lighting. PMREMGenerator, scene.environment.
   0 installs
5. ▌
   Threejs Core Raycaster · openaec-foundation-three-js-claude-skill-package bundle

   Use when implementing mouse picking, hover detection, object selection, or line-of-sight checks in Three.js. Prevents the common mistake of raycasting every mousemove frame, not using layers for filtering, or missing recursive flag. Covers Raycaster, setFromCamera, intersection format, InstancedMesh picking, layers, performance. Keywords: Raycaster, mouse picking, intersectObjects, click, hover, setFromCamera, intersection, instanceId, object selection, click on 3D object, detect mouse over, pick element.
   0 installs
6. ▌
   Threejs Impl Animation · openaec-foundation-three-js-claude-skill-package bundle

   Use when playing animations, crossfading between animation states, or loading skeletal animations from GLTF in Three.js. Prevents the common mistake of not calling mixer.update(delta) every frame, wrong crossfade setup, or missing Clock. Covers AnimationMixer, AnimationClip, AnimationAction, KeyframeTrack, crossfade, blending. Keywords: animation, AnimationMixer, AnimationClip, AnimationAction, crossfade, skeletal, GLTF animation, keyframe, blend, Clock, camera animation, smooth camera, fly to, tween, GSAP.
   0 installs
7. ▌
   Threejs Impl Ifc Viewer · openaec-foundation-three-js-claude-skill-package bundle

   Use when loading and viewing IFC/BIM models in a Three.js scene. Prevents the common mistake of using deprecated web-ifc-three, ignoring AGPL-3.0 license implications, or loading large IFC files without streaming. Covers web-ifc (MIT), @thatopen/components (AGPL-3.0), IFC loading, spatial tree, property extraction. Keywords: IFC, BIM, web-ifc, IFC viewer, @thatopen/components, building model, architecture, IFC loading, spatial tree, BIM viewer, show IFC in browser, load building, web BIM viewer.
   0 installs
8. ▌
   Threejs Core Scene Graph · openaec-foundation-three-js-claude-skill-package bundle

   Use when creating Three.js scenes, adding objects, managing parent-child hierarchies, or organizing 3D content. Prevents the common mistake of using add() instead of attach() for reparenting, forgetting matrixAutoUpdate, or missing dispose() calls. Covers Object3D, Scene, Group, Mesh, Layers, Fog, traversal, coordinate conversion. Keywords: scene graph, Object3D, add, remove, traverse, layers, fog, parent, children, visibility, Three.js scene setup, group objects, show hide object, organize scene.
   0 installs
9. ▌
   Threejs Syntax Loaders · openaec-foundation-three-js-claude-skill-package bundle

   Use when loading 3D models (GLTF, FBX, OBJ), textures, or HDR environment maps in Three.js. Prevents the common mistake of not setting up DRACOLoader, wrong WASM path, or missing error handling. Covers GLTFLoader, DRACOLoader, KTX2Loader, TextureLoader, RGBELoader, FBXLoader, OBJLoader, LoadingManager. Keywords: GLTFLoader, GLTF, GLB, load model, DRACOLoader, texture, FBXLoader, OBJLoader, RGBELoader, HDR, LoadingManager, progress, export, GLTFExporter, save model, download 3D, import 3D file.
   0 installs
10. ▌
    Threejs Syntax Shaders · openaec-foundation-three-js-claude-skill-package bundle

    Use when writing custom GLSL shaders, creating ShaderMaterial or RawShaderMaterial, defining uniforms, or patching built-in materials with onBeforeCompile. Prevents the common mistake of wrong uniform format, missing needsUpdate on uniforms, or not including required defines. Covers ShaderMaterial, RawShaderMaterial, GLSL, uniforms, ShaderChunk, onBeforeCompile, defines, GLSL3. Keywords: ShaderMaterial, RawShaderMaterial, GLSL, vertex shader, fragment shader, uniform, varying, ShaderChunk, onBeforeCompile, custom shader, write shader, custom visual effect, GPU programming.
    0 installs
11. ▌
    Threejs Syntax Controls · openaec-foundation-three-js-claude-skill-package bundle

    Use when adding camera controls to a Three.js scene: orbit, pan, zoom, fly, first-person, or object manipulation. Prevents the common mistake of forgetting controls.update() in the render loop, not calling dispose(), or mixing controls. Covers OrbitControls, MapControls, FlyControls, PointerLockControls, TransformControls. Keywords: OrbitControls, controls, camera controls, orbit, pan, zoom, MapControls, FlyControls, PointerLockControls, TransformControls, rotate view, move camera, mouse controls, drag to rotate.
    0 installs
12. ▌
    Threejs Errors Rendering · openaec-foundation-three-js-claude-skill-package bundle

    Use when a Three.js scene renders incorrectly: black screen, invisible objects, wrong colors, z-fighting, or broken shadows. Prevents the common mistake of wrong color space, missing material.side, or forgetting updateProjectionMatrix. Covers all common rendering errors with diagnosis steps and fix patterns. Keywords: black screen, invisible, wrong color, z-fighting, shadow artifact, rendering error, debug, nothing visible, dark, broken, nothing shows, model not appearing, screen is blank.
    0 installs
13. ▌
    Threejs Syntax Materials · openaec-foundation-three-js-claude-skill-package bundle

    Use when choosing or configuring materials, loading textures, or setting up PBR workflows in Three.js. Prevents the common mistake of wrong color space on textures, forgetting material.dispose(), or not calling material.needsUpdate after changes. Covers all 15+ material types, PBR metalness/roughness, MeshPhysicalMaterial, texture maps, color space. Keywords: MeshStandardMaterial, MeshPhysicalMaterial, material, texture, PBR, metalness, roughness, normalMap, color space, SRGBColorSpace, blurry texture, pixelated, texture quality, filtering.
    0 installs
14. ▌
    Threejs Syntax Geometries · openaec-foundation-three-js-claude-skill-package bundle

    Use when creating 3D shapes, custom geometry, or instanced meshes in Three.js. Prevents the common mistake of forgetting dispose(), not setting needsUpdate on BufferAttribute, or using non-indexed geometry when indexed is better. Covers BufferGeometry, BufferAttribute, all 21 built-in geometries, InstancedMesh, ExtrudeGeometry, custom geometry. Keywords: BufferGeometry, BoxGeometry, SphereGeometry, PlaneGeometry, InstancedMesh, BufferAttribute, geometry, shape, extrude, custom mesh, particles, point cloud, particle system, create shape.
    0 installs
15. ▌
    Threejs Errors Performance · openaec-foundation-three-js-claude-skill-package bundle

    Use when a Three.js scene has performance problems: low FPS, memory leaks, too many draw calls, or high GPU memory usage. Prevents the common mistake of forgetting dispose(), creating objects in the render loop, or not using InstancedMesh for repeated objects. Covers disposal patterns, draw call optimization, InstancedMesh, LOD, texture compression, renderer.info, Stats.js profiling. Keywords: performance, memory leak, dispose, draw calls, FPS, slow, optimization, InstancedMesh, LOD, renderer.info, Stats, profiling, laggy, low FPS, stuttering, browser freezes.
    0 installs
16. ▌
    Threejs Impl Post Processing · openaec-foundation-three-js-claude-skill-package bundle

    Use when adding post-processing effects like bloom, SSAO, depth of field, or anti-aliasing to a Three.js scene. Prevents the common mistake of mixing Three.js EffectComposer with pmndrs/postprocessing, wrong pass order, or missing RenderPass. Covers EffectComposer, 27+ passes, pmndrs/postprocessing, custom ShaderPass. Keywords: post-processing, EffectComposer, bloom, UnrealBloomPass, SSAO, outline, SMAA, FXAA, postprocessing, effects, render pass, glow effect, blur, cinematic, visual effects.
    0 installs
17. ▌
    Threejs Agents Scene Builder · openaec-foundation-three-js-claude-skill-package bundle

    Use when composing a complete Three.js scene from scratch or when asked to create a 3D visualization. Provides decision trees for choosing lighting setup, materials, camera type, controls, and post-processing pipeline. Orchestrates other Three.js skills. Keywords: create scene, build 3D, Three.js project, scene setup, visualization, product viewer, 3D application, scene composition, how to start Three.js, new 3D project, basic scene.
    0 installs
18. ▌
    Threejs Impl Xr · openaec-foundation-three-js-claude-skill-package bundle

    Use when building VR or AR experiences with Three.js using WebXR. Prevents the common mistake of using requestAnimationFrame instead of setAnimationLoop, not handling controller events, or wrong reference space. Covers WebXRManager, VRButton, ARButton, controllers, hand tracking, hit testing, teleportation. Keywords: VR, AR, XR, WebXR, VRButton, ARButton, immersive, controller, hand tracking, hit test, teleportation, headset, virtual reality, augmented reality, VR app, AR experience.
    0 installs
19. ▌
    Threejs Core Math · openaec-foundation-three-js-claude-skill-package bundle

    Use when working with 3D math in Three.js: vectors, matrices, quaternions, rotations, colors, or coordinate transforms. Prevents the common mistake of mutating shared vectors, using wrong rotation order, or confusing Euler gimbal lock. Covers Vector3, Matrix4, Quaternion, Euler, Color, MathUtils, Box3, Sphere, coordinate system. Keywords: Vector3, Matrix4, Quaternion, Euler, Color, MathUtils, lerp, slerp, cross, dot, normalize, degToRad, Y-up, right-handed, rotate object, position math, smooth interpolation.
    0 installs
20. ▌
    Threejs Impl Drei · openaec-foundation-three-js-claude-skill-package bundle

    Use when using Drei helper components with React Three Fiber: controls, environment maps, text rendering, HTML overlays, or performance helpers. Prevents the common mistake of not wrapping useGLTF in Suspense, using wrong Environment preset name, or forgetting makeDefault on controls. Covers 150+ Drei components across controls, environment, text, materials, loaders, performance. Keywords: Drei, @react-three/drei, OrbitControls, Environment, useGLTF, useTexture, Html, Text, Stage, ContactShadows, Instances, helper components, ready-made, quick setup React 3D.
    0 installs
21. ▌
    Threejs Impl Audio · openaec-foundation-three-js-claude-skill-package bundle

    Use when adding sound to a Three.js scene: background music, 3D spatial audio, or audio visualization. Prevents the common mistake of ignoring browser autoplay policy, not attaching AudioListener to camera, or wrong distance model. Covers AudioListener, Audio, PositionalAudio, AudioAnalyser. Keywords: audio, sound, AudioListener, PositionalAudio, 3D audio, spatial audio, music, AudioAnalyser, Web Audio API, play sound, add music, sound in 3D scene.
    0 installs
22. ▌
    Threejs Impl Webgpu · openaec-foundation-three-js-claude-skill-package bundle

    Use when using the Three.js WebGPU renderer, node-based materials, TSL (Three Shading Language), or compute shaders. Prevents the common mistake of not checking browser support, missing async init, or using GLSL with WebGPU. Covers WebGPURenderer, node materials, TSL, compute shaders, WebGL fallback, migration guide. Keywords: WebGPU, WebGPURenderer, TSL, Three Shading Language, node material, compute shader, WGSL, MeshStandardNodeMaterial, next-gen rendering, modern GPU, WebGPU setup.
    0 installs
23. ▌
    Threejs Impl Physics · openaec-foundation-three-js-claude-skill-package bundle

    Use when adding physics simulation to a Three.js scene: rigid bodies, collisions, constraints, or raycasting. Prevents the common mistake of wrong Vec3/Vector3 conversion, missing world.step(), or choosing the wrong engine. Covers cannon-es and Rapier with Three.js sync patterns, performance comparison. Keywords: physics, cannon-es, Rapier, rigid body, collider, collision, gravity, simulation, WASM, constraint, joint, objects fall, collision detection, bouncing, realistic movement.
    0 installs
24. ▌
    Threejs Impl Shadows · openaec-foundation-three-js-claude-skill-package bundle

    Use when enabling shadows in a Three.js scene or debugging shadow artifacts like acne, peter panning, or low resolution. Prevents the common mistake of wrong shadow camera frustum, too many PointLight shadows, or missing castShadow/receiveShadow flags. Covers shadow map types, per-light config, bias tuning, CameraHelper debugging. Keywords: shadows, shadowMap, shadow acne, peter panning, bias, normalBias, castShadow, receiveShadow, PCFSoftShadowMap, shadow camera, shadows not showing, shadow artifacts, enable shadows.
    0 installs