Тег: threejs

OpenAI's official browser-game skills: plan core gameplay and tech choices first, then build with Phaser for 2D or Three.js / React Three Fiber for 3D, plus HUD and menu UI, sprite animation, a GLB asset pipeline and in-browser playtesting.

Builds or debugs interactive 3D web scenes with Three.js: scene, camera, renderer, lights, materials, GLTF loading and controls, plus performance basics like capping pixel ratio, handling resize, disposing WebGL resources and reduced motion.

Steers WebGL-heavy landing pages toward a chosen look by picking one of four visual lanes per page type, passing message, performance, accessibility and reliability gates, and outputting a lane, visual spec, stack, fallback and build order.

Three.js animation reference with code: procedural motion with Clock, the AnimationClip, AnimationMixer and AnimationAction keyframe system, playing GLTF animations, skeletal animation, morph targets and blending multiple animations.

Three.js fundamentals with code: setting up the scene, cameras and WebGLRenderer, Object3D hierarchy, coordinate systems and transforms, the render loop and resize handling. A starting point for building a 3D scene on the web.

Three.js geometry reference with code: parameters for built-in shapes like boxes, spheres, cylinders and tori, building custom meshes from vertices with BufferGeometry, and instanced rendering for large numbers of objects.

Three.js interaction reference with code: raycasting for click detection and object selection, camera controls such as OrbitControls, and mouse and touch input handling for interactive 3D experiences.

Three.js lighting reference with code: ambient, hemisphere, directional, point, spot and area lights with their cost and shadow support, shadow setup, image-based environment lighting and lighting performance tips.

Three.js asset loading reference with code: loading GLTF models, textures, images and HDR environments, coordinating loaders and progress with LoadingManager, and async loading patterns.

Three.js materials reference with code: when to use Basic, Lambert, Phong, Standard, Physical, Toon and other materials, PBR properties such as roughness and metalness, custom ShaderMaterial and material performance.

Three.js post-processing reference with code: chaining passes with EffectComposer, adding bloom, depth of field, color grading, blur and glow, and writing custom screen-space shader passes.

Three.js shader reference with code: writing GLSL vertex and fragment shaders, ShaderMaterial versus RawShaderMaterial, uniforms and animating them, and extending built-in materials for custom visual effects.

Three.js texture reference with code: loading and configuring texture maps, UV mapping, cubemaps and HDR environment maps, texture settings and optimization.

74 game development skills plus a router skill that detects which of 10 engines your project uses (Godot, Unity, Unreal, Phaser, three.js, Bevy and more) and loads the matching skills, along with art asset and store release workflows. Community-maintained.

Turns secondary-school math and science problems into teaching materials: interactive geometry solution pages, 3D molecular views of chemical reactions, and math explainer videos with Chinese voiceover and bilingual subtitles (needs a Zhipu GLM-TTS key). Requires Python sympy.

Clones websites: find the real source first or run browser recon, pick a path for static, React/Vue/Next or WebGL/Canvas/Three.js sites, strip trackers, check licenses, and verify against the original before swapping in your content. In Chinese; script paths assume the author's machine.

Builds animations out of text characters: brightness-ramp mapping with cell aspect correction, generative ASCII fields, image, video and Three.js scene to ASCII conversion, and terminal intros or loaders, rendered with <pre>, canvas or ANSI output.