Asset Library
1,738 video parts you can take today, and 557 more to learn from. Find one you like, then open it for the details.
Showing 48 of 2,295Show everything
From Three.js Game Skills
No preview yet · 47
threejs-game-directorthree.js · MITThe entry skill: sets how far to take a three.js browser game from the user's own words (a small arcade game is not a request for the…threejs-gameplay-systemsthree.js · MITHow to make a playable loop: a one-page design brief, a core-loop contract proved in code, a level plan, then small ownership folders…threejs-game-ui-designerthree.js · MITHow to design a game's HUD, menus and touch controls as game interface, not a web dashboard: hierarchy (status, objective, feedback…threejs-debug-profilerthree.js · MITHow to find why a three.js page is blank, broken or slow: reproduce first, then an ordered checklist for blank canvases (canvas size, WebGL…threejs-qa-releasethree.js · MITHow to prove a three.js game works the way a player meets it: build, open in a real browser, check console errors and non-blank canvas…threejs-3d-generatorthree.js · MITDrives the paid Tripo API to make 3D models for a three.js project: text to 3D, image to 3D, texturing, auto-rigging, animation…threejs-image-generatorthree.js · MITDrives Google's Gemini image API to make the 2D layer of a 3D project: concept sheets, clean reference images for image-to-3D, texture…threejs-audio-generatorthree.js · MITDrives the paid ElevenLabs API for game sound: short sound effects, looping ambience, music tracks, spoken lines, voice conversion from a…Renderer and environment map setupthree.js · MITFive lines that give a scene studio reflections with no HDR file: sRGB output, ACES tone mapping, and a RoomEnvironment baked once through…Painted metal materialthree.js · MITClearcoat over a colored base, for a car body or a hull panel. One line of three.js; assumes the environment map setup.Bare brushed metal materialthree.js · MITRaw steel that needs the environment map to read as metal. One line of three.js; assumes the environment map setup.Rubber materialthree.js · MITNear-black, almost no reflection, for tyres and grips. One line of three.js; assumes the environment map setup.Matte plastic materialthree.js · MITMid roughness with a muted reflection, for housings and crates. One line of three.js; assumes the environment map setup.Glossy ceramic materialthree.js · MITA sharp wet-look reflection with full clearcoat. In our trial the white version bloomed as hard as the emissive ball under a bright light…Emissive signal materialthree.js · MITA dark base with a glow strong enough to feed bloom, for beacons, status lights and pickup cores. One line of three.js; assumes the…Cloth materialthree.js · MITHigh roughness plus sheen for the soft edge highlight of fabric. One line of three.js; assumes the environment map setup.Real refractive glass materialthree.js · MITTrue transmission for one or two hero surfaces seen close. Costly: every transmissive material adds a whole extra scene render each frame…Cheap fake glass materialthree.js · MITTransparent clearcoat with no extra render pass, for repeated windows, visors and shields. One line of three.js; assumes the environment…Fresnel rim glowthree.js · MITAdds a colored glow at the grazing edges of a standard material by injecting three lines of GLSL with onBeforeCompile, so the lit material…Scrolling emissive panelsthree.js · MITBands of light that travel along a surface, for energy conduits, charge bars and data flowing through a pipe. Time is one uniform (uTime)…Wind swaythree.js · MITSways grass cards, flags or cables in the vertex shader, anchored at the base, with each instance of an InstancedMesh out of phase by its…Dissolve and spawnthree.js · MITMakes an object appear or vanish in small blocks with a glowing edge. One uniform, uProgress from 0 to 1, is the whole state, which makes…Gradient sky domethree.js · MITA back-facing sphere with a small shader: a top color, a horizon color, a sun disc and its halo. One draw call and no textures, for any…Post-processing chainthree.js · MITThe finishing pass: EffectComposer with a render pass, bloom (strength 0.45, radius 0.3, threshold 0.85), a small vignette shader, and…Vertex-colour ambient occlusionthree.js · MITDarkens creases by baking a color attribute into the mesh: contact shading with no texture and no extra draw call.Polygon-offset decalsthree.js · MITA flat mesh laid on a surface with polygonOffset so it does not flicker: panel lines, numbers and marks.Fake contact shadowthree.js · MITA flat plane with a radial-gradient canvas texture under an object: grounds a floating thing with one draw call and no shadow map.Emissive level-of-detail signalsthree.js · MITRaise emissiveIntensity or swap material by distance so far lights still read; keep the color the same so identity survives.Matcap propsthree.js · MITMeshMatcapMaterial bakes lighting into one texture: the cheapest lit-looking material for background props. It ignores scene lights.TweenManager and three easingsthree.js · MITA 40-line tween runner with easeInQuad, easeOutCubic and easeOutBack (the one that overshoots), advanced by a delta you pass in. No…Trauma-based screenshakethree.js · MITCamera shake where shake equals trauma squared, trauma decays 1.4 per second and is capped at 1, and the noise comes from accumulated time…Hitstopthree.js · MITA 60 to 90 ms near-freeze on a heavy hit: scale the gameplay delta to 0.05 while the camera and feedback keep real time. In a video it is…Squash and stretchthree.js · MITDeform on impact and bounce back with easeOutBack, keeping volume: when one axis scales by s the other two scale by 1 / sqrt(s). About 0.9…Camera kick and FOV punchthree.js · MITAdd 4 to 8 degrees of field of view on a boost or a hit and let it decay with a 0.2 s time constant; remember updateProjectionMatrix()…Impact flashthree.js · MITPulse a material's emissiveIntensity to a peak and tween it back in 0.22 s; for big events add a one-frame white overlay div fading over…Pickup popthree.js · MITA collected thing scales up to 1.6, rises and fades over 0.28 s, with a 120 ms scale punch on its counter. A good recipe for a number or an…Gamepad rumblethree.js · MITFeature-detected controller vibration with a swallowed promise. Interactive use only; nothing to render. Code is in the reference page…Audio pitch variance and duckingthree.js · MITVary each playback's pitch by plus or minus 6 percent from a seeded generator so repeats do not sound machine-made, and duck the bed under…Rapier setup with a fixed timestepthree.js · MITHow to add real physics to a three.js scene: Rapier's world, a 1/60 s fixed step fed by a clamped accumulator, bodies and colliders…Loop.tsthree.js · MITA 30-line animation loop: requestAnimationFrame, delta in seconds capped at 0.05, update then render. It reads the browser's clock; to…Renderer.tsthree.js · MITcreateRenderer (antialias, sRGB output, ACES tone mapping at 1.05 exposure, PCF shadows) and resizeRenderer, which keeps canvas size, pixel…CameraRig.tsthree.js · MITA follow camera at a fixed offset that eases toward its target with an exponential lag (1 - exp(-dt / lag)) and looks slightly ahead of it…random.ts (seeded random)three.js · MITmulberry32 in nine lines: createSeededRandom(seed) returns a function that gives the same sequence every time. The thing to use in place of…dispose.tsthree.js · MITdisposeObject3D walks a three.js object and frees its geometries, materials and every texture on them. Use it when a scene is torn down so…InputController.tsthree.js · MITKeyboard (WASD and arrows, Space or Shift to dash) and a touch stick merged into one movement vector, with pointer-cancel handling so a…AudioSystem.tsthree.js · MITA Web Audio context unlocked on the first key or pointer press, and one synthesised pickup blip (a triangle wave swept up over 0.12 s)…GameAudio manager shapethree.js · MITA 25-line Web Audio manager: unlock on a gesture, load and decode buffers by id, play through named gain groups (master, sfx, ui, ambience…