展示多種內建幾何體、標準材質與基本動畫迴圈。
GeometryMaterialAnimation多種光源類型搭配即時陰影投射與接收。
LightsShadows使用 Canvas 動態生成紋理並映射到物體上。
CanvasTextureUV Mapping使用 BufferGeometry 與 Points 建立數千個動態粒子。
PointsBufferGeometry滑鼠懸停與點擊物體的射線檢測互動。
RaycasterMouse EventsEffectComposer 搭配 Bloom 發光效果。
EffectComposerBloomInstancedMesh 高效渲染上萬個物體。
InstancedMeshPerformance使用 GLSL 撰寫頂點與片段著色器。
ShaderMaterialGLSL自製簡易物理引擎,模擬重力與碰撞反彈。
PhysicsCollision場景霧氣效果搭配線框材質營造氛圍。
FogWireframeOrbitControlslil-gui 面板即時調整材質參數與動畫設定。
OrbitControlslil-guiReflector 建立即時鏡面反射地面效果。
ReflectorReflection螺旋線、平滑曲線、Lissajous 圖形與動態軌跡。
LineCatmullRomCurve3Morph Targets 在不同形狀間平滑插值。
MorphTargetsInterpolationHTML 元素在 3D 空間中排列與動畫。
CSS3DRendererCSS3DObjectSprite 建立文字標籤與發光粒子效果。
SpriteBillboardExtrudeGeometry 擠出 2D 形狀,LatheGeometry 旋轉截面。
ExtrudeLatheShape程序化天空盒搭配 CubeCamera 建立即時反射。
CubeCameraEnvMapSkyboxFBM 雜訊生成高度圖,頂點著色建立地形。
HeightmapVertexColorsFBMWeb Audio API 分析頻率,3D 柱狀圖視覺化。
WebAudioAnalyserGroup 建立太陽系行星軌道的父子層級。
GroupHierarchySolarSystem離屏渲染到紋理,用作其他物體的貼圖。
RenderTargetRTT動態裁切平面切割幾何體,顯示內部結構。
ClippingPlaneDoubleSideEdgesGeometry 建立描邊風格的低多邊形造型。
EdgesGeometryOutlineScissor Test 四分割畫面:透視 + 三面正交。
ViewportScissorOrthographic程序化生成凹凸紋理與法線貼圖增加表面細節。
BumpMapNormalMapAnimationMixer 搭配 KeyframeTrack 建立多軌動畫。
AnimationMixerKeyframeTrackConvexGeometry 從隨機點雲生成凸包。
ConvexGeometryPointCloudPointerLockControls 實現 WASD 移動的 FPS 視角。
PointerLockFPSWASD雙場景疊加:3D 場景 + 正交 HUD(FPS / 指南針 / 狀態條)。
HUDOrthographicOverlay多種 easing 函式驅動物體平滑補間動畫。
TweenEasing依距離自動切換模型細節,維持效能。
LODPerformanceDragControls 以滑鼠拖曳移動 3D 物體。
DragControlsInteraction相機沿 CatmullRom 曲線飛行,可拖曳控制進度。
CameraPathCurve分離 / 對齊 / 聚合三規則模擬 3D 鳥群飛行。
BoidsFlockingInstancedMeshMarchingCubes 即時抽取有機融合的液態表面。
MarchingCubesIsosurfaceFontLoader 搭配 TextGeometry 擠出可即時編輯的立體字。
TextGeometryFontLoaderDecalGeometry 在模型表面投影貼花,點擊互動貼上。
DecalGeometryRaycasterGerstner 波在頂點著色器中疊加,搭配菲涅耳反射。
ShaderGerstnerFresneladditive blending 粒子池模擬升空與爆炸,可點擊發射。
PointsAdditiveParticles螺旋臂參數化生成四萬顆星,頂點漸層著色。
PointsGalaxyAdditiveMeshToonMaterial 階梯明暗搭配背面外擴描邊。
MeshToonMaterialOutlineMeshPhysicalMaterial 透射、折射率與色散。雙擊切換造型。
TransmissionDispersion三萬粒子沿程序化向量場流動並不斷再生。
FlowFieldPointsInstancedMesh 兩萬五千草葉,頂點著色器模擬風吹擺動。
InstancedMeshWindShader混沌微分方程逐步描繪出經典蝴蝶軌跡。
ChaosAttractorLineVerlet 積分與距離約束模擬布料,移動滑鼠吹風。
VerletConstraints相機沿 TubeGeometry 中心曲線穿梭,貼圖捲動加速感。
TubeGeometryCurve自訂 ShaderPass 對場景做鏡射鑲嵌後製效果。
ShaderPassPostProcessingGPU ping-pong 模擬 Gray-Scott 圖靈斑紋,點擊播種。
GPGPURenderTargetTuringCanvasTexture 繪製 1–15 號球與母球,黑色 TV 款花球三角排列。
CanvasTexturePhysicalMaterialRK4 積分雙擺運動方程,三組微小差異初始條件的軌跡逐漸分岔。
PhysicsChaosRK4加法混合光錐 Shader 搭配塵埃粒子與 SpotLight,模擬舞台聚光。
ShaderSpotLightAdditive即時更新的 CanvasTexture 貼上環繞相機的圓柱內壁,滑鼠視差環顧。
CanvasTextureImmersive27 顆 RoundedBox 小方塊,以 Group.attach() 動態換層自動轉動。
GroupattachAnimation八大行星階層式公轉自轉,含軌道線、土星環、月亮與滿天星斗。
HierarchyPointLightflatShading 加頂點抖動打造 low-poly 空中島嶼、樹木、浮石與雲朵。
LowPolyflatShading手工建立 Bone 鏈與 skinIndex/skinWeight,SkinnedMesh 觸手波浪擺動。
SkinnedMeshBoneSkeleton遞迴回溯演算法產生迷宮牆面,發光球沿 BFS 最短路徑逐格行走。
ProceduralInstancedMeshBFS取樣 Canvas 文字像素作為目標點,數萬粒子在字形與星雲間輪替變形。
PointsMorphCanvas15 支週期漸變的單擺依單擺公式反推擺長,交織出波浪與螺旋圖樣。
PhysicsWave值噪聲高度場生成 Minecraft 風方塊世界,含水面、樹木與白雲。
VoxelInstancedMeshNoise全螢幕 fragment shader 光線行進:平滑聯集融球、軟陰影與鏡面地板。
ShaderSDFRaymarch依 B-DNA 幾何組裝雙螺旋,A–T / G–C 鹼基對配色與環繞粒子。
GeometryGroup數千片飄雪粒子、low-poly 小屋、暖窗燈光、雪人與煙囪炊煙。
ParticlesLowPolyScene全螢幕 shader 步進彎曲光線:星空透鏡扭曲、事件視界與吸積盤。
ShaderRaytracePhysics滑鼠控制擋板的完整小遊戲:磚塊碰撞、角度反射與計分。
GameCollisionInteractive14 顆星體以萬有引力互相牽引,彩色軌跡尾巴記錄混沌軌道。
PhysicsN-BodyTrailsCCD 逆向運動學逐關節求解,四節機械手臂即時追蹤漂浮目標。
IKKinematicsAnimationFBM 噪聲 shader 火焰告示板、火星粒子、閃爍火光與夜間營地。
ShaderFBMVFX遞迴 L-system 生長出隨機分岔樹木,依深度延遲動畫逐節長出。
FractalRecursionGrowthLatheGeometry 傘體脈動、TubeGeometry 觸手飄動,深海發光粒子。
LatheGeometryTubeGeometryOceanFBM 噪聲 shader 飄動極光簾幕,搭配山巒剪影與星空夜景。
ShaderFBMVertex四片三角紙翼沿鉸鏈軸旋轉,循環展開與摺合成紙鶴形態。
HingeQuaternionAnimation值噪聲高度場地形、頂點著色漸層,風沙粒子與夕陽天空球。
TerrainVertexColorsNoiseStencil Buffer 遮罩雙向傳送門,各自渲染對方場景的視角。
StencilPortalRawGLRaycaster 選子與點格移動,緩動弧形位移動畫展示完整棋子造型。
RaycasterEasingInteractiveVoronoi 細胞切割玻璃面板為碎片,點擊觸發物理飛散動畫。
VoronoiTransmissionPhysicsInstancedMesh 隨機生成建築群,CanvasTexture 窗光貼圖與飛行光點。
InstancedMeshProceduralCanvasTexture遞迴分岔珊瑚與發光息肉、Boids 魚群環繞、氣泡與淺水光柱。
FractalBoidsOceanGPU ping-pong 平流與擴散運算,拖曳滑鼠攪動彩色染料。
GPGPURenderTargetFluidIcosphere 頂點噪聲位移與高度分帶著色,雙擊重新生成星球。
NoiseVertexColorsProcedural4096 隻粒子的分離/對齊/聚合規則運算於 fragment shader,位置貼圖驅動頂點。
GPGPUBoidsPoints方向鍵操作的完整貪食蛇遊戲,InstancedMesh 渲染蛇身與計分。
GameInstancedMeshInteractive法線與深度緩衝 Sobel 邊緣偵測,畫面空間描邊不受模型拓樸影響。
PostProcessingDepthTextureOutline手刻參數方程建構莫比烏斯環、環面結與扭轉花瓣曲面。
ParametricGeometryMath相機前後移動同時反向調整 FOV,主體大小不變、背景劇烈壓縮擴張。
DollyZoomFOVCamera經緯線框地球加大圓弧航線動畫,資料視覺化風格呈現。
GlobeTubeGeometryDataViz大氣散射近似 shader,太陽角度驅動完整晝夜循環與星空。
ShaderDayNightAtmosphereOrthographicCamera 等角視角剖面屋,三層樓房間家具一次看透。
OrthographicIsometricDioramaVerlet 積分繩索橋面,球體滾過時即時下陷變形。
VerletConstraintsPhysicsFBM 噪聲 raymarching 累積透光度,模擬蓬鬆積雲隨風飄移。
RaymarchFBMVolumetricRaycaster 命中點寫入 CanvasTexture UV 座標,按住拖曳即時作畫。
RaycasterCanvasTextureInteractive磁偶極場方程逐步積分描繪場線,帶電粒子沿線流動。
PhysicsTubeGeometryField沿曲線排列的骨牌依序觸發傾倒,點擊第一張牌啟動連鎖反應。
ChainReactionCurveInteractiveExtrudeGeometry 手繪齒形,依齒數比反向嚙合旋轉並驅動凸輪連桿。
ExtrudeGeometryKinematicsMechanism雙層錯位噪聲 shader 疊加模擬泳池底焦散網紋,水面波動與光柱。
CausticsShaderUnderwater分塊地形依相機位置動態回收重生,值噪聲驅動起伏與著色,樹木隨飛行填補。
ProceduralTilingFlythrough五顆鋼球動量守恆碰撞傳遞,拖曳最左側球體釋放後觀察擺動。
PhysicsMomentumInteractive遞迴中點位移產生分岔電弧,點擊天空觸發落雷閃光與動態光源。
ProceduralPointLightVFXInstancedMesh 點陣疊加正弦波起伏,滑鼠掃過激起漣漪 — 經典 HERO 背景。
HeroInstancedMeshRippleSimplex 噪聲頂點扭曲 + Fresnel 漸層邊緣泛光,滑鼠牽引旋轉、點住加劇變形。
HeroShaderFresnel漂浮粒子依距離動態連線成網,滑鼠推開粒子撕裂網絡 — particles.js 的 3D 版。
HeroLineSegmentsNetworkCanvas 取樣文字像素為粒子目標,彈簧回聚、滑鼠吹散變色,點擊切換字樣。
HeroParticlesTypography多層半透明 shader 波浪帶加法混合交疊流動,滑鼠帶動視差與波速。
HeroShaderAdditive多層粉彩絲帶鋪在白底流動,邊緣淡出融進背景 — Stripe 風格亮色 HERO。
HeroLightShaderMemphis 風格幾何體緩浮旋轉,滑鼠掃過輕推回彈 — 亮色產品頁 HERO。
HeroLightMemphisInstancedMesh 花瓣隨風打轉飄落於暖粉天幕,滑鼠掃過捲起花瓣旋風。
HeroLightInstancedMeshFresnel 彩虹薄膜 shader 模擬肥皂泡干涉色,泡泡呼吸上升,點擊戳破重生。
HeroLightIridescenceBufferGeometry 手摺紙飛機沿波浪航線列隊飛行,白雲飄過晴空天幕。
HeroLightLowPolySUPERHOT 式機制:你不動時間就不動。PointerLock 射擊、慢速子彈、碎裂敵人。
GameFPSPointerLockPortal 式雙傳送門:射門互通兩地、動量守恆甩飛,登上跳不到的高台。
GamePortalTeleportFresnel 邊緣光 + 掃描線 + 隨機故障抖動,三座投影底座浮現科幻全息物件。
ShaderFresnelHologram3D simplex 雜訊裁切片段 + 燃燒邊緣發光,物件週期消融重生,點擊重播。
ShaderDissolveNoise六角網格距離場 + Fresnel 護盾,點擊命中點擴散衝擊漣漪,太空船低模居中。
ShaderHexGridImpact滑鼠掃過水面激起漣漪:頂點波高疊加衰減正弦環,中央差分重算法線做反光泡沫。
ShaderWaterRaycastRenderTarget 兩段式渲染:CMYK 網點各通道不同網角,按鍵切換半色調/像素化/原圖。
ShaderPostFXHalftoneNon-indexed 幾何附質心與面法線屬性,三角碎片沿法線飛散、羅德里格旋轉翻滾,點擊爆裂復原。
ShaderExplodeVertex分形疊加 Simplex Noise 驅動 domain-warp 色彩,球體與全螢幕背景同步套用。
ShaderNoisePlasma場景先渲染成環境貼圖,再用 RGB 分離色散折射 + Fresnel 反射自訂 shader 繪製玻璃球。
ShaderRefractionFresnel3D cellular noise 即時計算最近/次近特徵點,畫出會呼吸的龜裂紋與發光邊界。
ShaderVoronoiProceduralRenderTarget 全螢幕 shader:RGB 色差分離 + 隨機水平位移抖動 + 掃描線雜訊,強度隨時間脈動觸發。
ShaderPostFXGlitch自訂懸吊與輪胎物理模型:WASD 操控油門轉向、空白鍵手煞車甩尾,C 切換自由鏡頭。
PhysicsVehicleDrift仿 steve.silaskierstein.com:方塊 Steve 原地行走、世界向鏡頭捲動,Canvas 像素貼圖打造五種生物群系,點擊切換白天/夜晚/沙漠/地獄/終界。
VoxelProceduralAnimation仿 Three.js Journey「Create a Game with R3F」:cannon-es 物理引擎、鍵盤控制彈珠與跳躍、三種隨機動態陷阱、計時挑戰,終點吃漢堡。
GamePhysicscannon-es仿 Three.js Journey「Creating a scene in Blender」:純 Three.js 幾何搭建低多邊形房間,暖/冷雙光源模擬烘焙質感。
SceneLowPolyBaked仿 Donut County 吞噬機制:滑鼠操控地板黑洞吸入物品,吃越多洞越大,R 重置場景。
GameStencilPhysics倒數計時點火升空:引擎火焰與濃煙粒子、發射塔分離、鏡頭跟隨火箭直上雲霄。
RocketParticlesCamera霓虹燈光駭客房間場景:多螢幕終端機動態程式碼、雨夜窗景、掃描線與 Bloom 氛圍。
CyberpunkNeonSceneGLB 神龍模型三點打光棚:右上面板即時調整光源顏色/強度/角度,拖曳環繞觀察。
GLTFLightingGUI低多邊形峽谷地形(頂點位移+逐面地層色)搭配 Lathe 球皮與 Canvas 條紋貼圖的熱氣球,Shader 漸層晨空與雲朵 sprite。
TerrainProceduralAnimation三車道無限跑酷小遊戲:Shader 捲動網格地板、UnrealBloomPass 霓虹光暈,鍵盤換道跳躍、碰撞判定與計分加速。
GameBloomInteraction以 Raycaster 對格線地板與方塊面求交,左鍵放置、右鍵刪除,幽靈方塊預覽搭配彈跳縮放動畫的互動式 Voxel 建造沙盒。
VoxelRaycasterBuilderLatheGeometry 透明玻璃沙漏內以 InstancedMesh 驅動四千多顆沙粒的簡化物理:上腔漏斗凹陷、細頸自由落體、下腔堆成圓錐,倒數完可點擊翻轉重計時。
InstancedMeshLatheGeometryPhysics4500 顆星點以自訂 Shader 循環星野,按住滑鼠拉伸成光條,配合 UnrealBloom、RGB 色偏與動態 FOV 營造超空間速度感。
ParticlesShaderSpeed程序化低多邊形秋林與頂點色地形,520 片 InstancedMesh 落葉隨風旋轉飄落、落地淡出循環,黃昏斜射光加暖霧氛圍。
InstancedMeshLowPolyFog低多邊形蒸汽火車沿 CatmullRomCurve3 環形軌道行駛,動輪連桿擺動、Sprite 白煙粒子與 Instanced 枕木樹木,按 C 切換駕駛視角。
CurveTrainParticlesWASD 操控黃色潛艇以 SpotLight 探照深海,FogExp2 能見度、Points 海洋雪、發光水母與 Instanced 魚群,螺旋槳氣泡上升。
SpotLightFogPoints數百隻 InstancedMesh 螞蟻以雙費洛蒙場(DataTexture 發光地圖)覓食返巢,蒸發衰減下湧現最短路徑,可點擊地面放置食物源。
BoidsPheromoneSimulation近萬顆 Points 粒子沿漏斗螺旋上升(半徑隨高度擴大、角速度反比半徑),InstancedMesh 碎片被捲入拋出,漸層天空 Shader 與閃電風暴場景。
PointsInstancedMeshVortexCanvas 程序化木紋球道與十瓶三角排列,滑鼠瞄準蓄力擲球,自寫剛體物理:球瓶碰撞倒下連鎖、計分與全倒煙火。
PhysicsGameBowling滑鼠或鍵盤彈奏 3D 琴鍵,按鍵下沉動畫 + WebAudio oscillator 合成音色,彈奏時飄出發光粒子音符。
WebAudioInteractionMusic低多邊形小屋場景,按鍵切換晴雨雪雷四種天氣:光照霧氣平滑過渡、線段雨滴濺水花、積雪白化與 Tube 閃電全場打亮。
WeatherParticlesLightning噪聲位移內翻球體洞穴,MeshPhysicalMaterial transmission 半透明水晶簇配呼吸點光源,點擊觸發光波漣漪依距離擴散至鄰簇。
CrystalPointLightRaycaster日式庭園池塘:Shader 水面波紋、錦鯉沿曲線游動身體正弦擺動、Canvas 斑紋貼圖,點水面產生漣漪吸引魚群聚集。
WaterFishRipple鐵鏈吊掛破壞球拖曳擺盪撞牆,自寫剛體物理讓數百磚塊被撞飛翻滾散落,粉塵粒子與 R 鍵重建牆面。
PhysicsChainDestruction細分平面頂點沿圓柱面彎曲模擬自然翻頁弧線,Canvas 程序化生成唐詩直排頁面與水墨插畫,點擊或方向鍵可連續翻頁。
VertexCanvasBook自訂 Shader 霓虹追逐燈鑲滿輪框輪輻,UnrealBloom 光暈點亮夜間遊樂園,+/- 調轉速、C 鍵切換吊艙搭乘視角。
BloomNeonShader夜晚沼澤水面倒影與蘆葦剪影,數百隻螢火蟲以自訂 shader 個別亮滅呼吸,滑鼠靠近受驚散開再緩緩聚回。
FirefliesShaderNight程序化幾何組裝打字機,鍵盤實際輸入:按鍵下壓字錘敲擊、Canvas 紙面即時出字、滾筒換行,WebAudio 合成喀噠聲。
WebAudioCanvasTypingonBeforeCompile 頂點位移暴風海浪、旋轉 SpotLight 體積光錐、雨絲與白沫粒子加隨機閃電的燈塔夜景。
SpotLightStormOcean自寫剛體物理(衝量碰撞、摩擦、四元數積分)擲出 Canvas 點數貼圖圓角骰子,靜止後自動判讀點數加總。
RigidBodyDiceCanvasTexture黃銅飛艇巡航雲海之上,程序化 Canvas 材質、著色器蒸汽粒子與 PMREM 夕陽環境反射打造逆光氛圍。
SteampunkCloudsProcedural547 顆 InstancedMesh 六角柱隨多重正弦波與噪聲場起伏,滑鼠推撥、點擊漣漪與動態彩虹漸層即時互動。
InstancedMeshRaycastingWaves第一人稱拉弓蓄力射箭,箭矢受重力與風力的拋物線彈道、Additive 軌跡殘影,Canvas 同心圓靶依環數計分,含移動靶。
ArcheryTrajectoryGameCanvas 程序化繁中招牌與帆布棚、UnrealBloom 暖光燈串與搖曳燈籠、濕地反光、Shader 蒸氣粒子與膠囊人流,自動運鏡沿街推移。
NightMarketBloomParticles點擊旋轉鏡子引導雷射點亮水晶的棋盤解謎:Raycaster 互動、遞迴反射光路計算與 UnrealBloomPass 光暈。
LaserPuzzleReflection以不清除的 WebGLRenderTarget 累積緩衝模擬長曝星軌:數千著色器星點繞北極星旋轉疊出彩色圓弧,附流星與剪影前景。
StarTrailsAccumulationLongExposure碗形競技場中的戰鬥陀螺對戰:LatheGeometry 流線造型、自轉進動物理與碰撞火花粒子,轉速衰減決定勝負。
GyroscopeCollisionBattle程序化 PCB 走線網路上的發光電流脈衝:Manhattan 路徑圖、拖尾粒子分岔流動與 UnrealBloom 螢光輝光,點擊注入新脈衝。
PCBBloomPulse