[{"data":1,"prerenderedAt":502},["ShallowReactive",2],{"navigation":3,"/experiments/space-game":130,"authors":384},[4],{"title":5,"path":6,"stem":7,"children":8,"page":129},"Experiments","/experiments","experiments",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125],{"title":10,"path":11,"stem":12},"Array of cameras","/experiments/array-cameras","experiments/array-cameras",{"title":14,"path":15,"stem":16},"Brickelangelo David","/experiments/brickelangelo-david","experiments/brickelangelo-david",{"title":18,"path":19,"stem":20},"Basic Brownian distribution","/experiments/brownian-distribution","experiments/brownian-distribution",{"title":22,"path":23,"stem":24},"Porsche 911 Car Showcase","/experiments/car-showcase","experiments/car-showcase",{"title":26,"path":27,"stem":28},"Coffee Smoke","/experiments/coffee-smoke","experiments/coffee-smoke",{"title":30,"path":31,"stem":32},"Cube Boy Dancefloor","/experiments/cube-boy-dancefloor","experiments/cube-boy-dancefloor",{"title":34,"path":35,"stem":36},"Cult of the lamb 🐑","/experiments/cult-of-the-lamb","experiments/cult-of-the-lamb",{"title":38,"path":39,"stem":40},"Dancing blob","/experiments/dancing-blob","experiments/dancing-blob",{"title":42,"path":43,"stem":44},"Fireworks Shader","/experiments/fireworks-shader","experiments/fireworks-shader",{"title":46,"path":47,"stem":48},"Galaxy Generator 🪐","/experiments/galaxy-generator","experiments/galaxy-generator",{"title":50,"path":51,"stem":52},"Glass/Plastic Material","/experiments/glass-material","experiments/glass-material",{"title":54,"path":55,"stem":56},"Grainy Liquid Blobs","/experiments/grainy-liquid","experiments/grainy-liquid",{"title":58,"path":59,"stem":60},"Haunted House","/experiments/haunted-house","experiments/haunted-house",{"title":62,"path":63,"stem":64},"Phone with HTML inside","/experiments/html-phone","experiments/html-phone",{"title":66,"path":67,"stem":68},"Low Poly Planet","/experiments/lowpoly-planet","experiments/lowpoly-planet",{"title":70,"path":71,"stem":72},"Magical Marbles","/experiments/magical-marbles","experiments/magical-marbles",{"title":74,"path":75,"stem":76},"Nuxt Stones","/experiments/nuxt-stones","experiments/nuxt-stones",{"title":78,"path":79,"stem":80},"Particle Pumpkin Shader","/experiments/particle-pumpkin","experiments/particle-pumpkin",{"title":82,"path":83,"stem":84},"Particles Morphing","/experiments/particles-morphing","experiments/particles-morphing",{"title":86,"path":87,"stem":88},"Pixel Noise Shaders Sandbox","/experiments/pixel-noise-shaders-sandbox","experiments/pixel-noise-shaders-sandbox",{"title":90,"path":91,"stem":92},"Pixel Plasma Shader","/experiments/pixel-plasma-shader","experiments/pixel-plasma-shader",{"title":94,"path":95,"stem":96},"Portal Journey","/experiments/portal-journey","experiments/portal-journey",{"title":98,"path":99,"stem":100},"Wizard's Potion Classroom","/experiments/potions-classroom","experiments/potions-classroom",{"title":102,"path":103,"stem":104},"Repulsion Effect","/experiments/repulsion-effect","experiments/repulsion-effect",{"title":106,"path":107,"stem":108},"Shadertoy Museum","/experiments/shadertoy-museum","experiments/shadertoy-museum",{"title":110,"path":111,"stem":112},"Space Game","/experiments/space-game","experiments/space-game",{"title":114,"path":115,"stem":116},"Halloween Spooky-saur 🎃","/experiments/spooky-saur","experiments/spooky-saur",{"title":118,"path":119,"stem":120},"Synthwave Landscape","/experiments/synthwave-landscape","experiments/synthwave-landscape",{"title":122,"path":123,"stem":124},"Texture Particle Cursor","/experiments/texture-particle-cursor","experiments/texture-particle-cursor",{"title":126,"path":127,"stem":128},"WebGPU","/experiments/webgpu","experiments/webgpu",false,{"id":131,"title":110,"author":132,"body":133,"date":373,"description":374,"extension":375,"featured":376,"lastUpdated":373,"meta":377,"navigation":376,"path":111,"seo":378,"stem":112,"tags":379,"thumbnail":382,"__hash__":383},"experiments/experiments/space-game.md","andretchen0",{"type":134,"value":135,"toc":363},"minimark",[136,153,158,161,207,211,214,258,262,300,304,330,334,360],[137,138,139,140,144,145,152],"p",{},"This experiment is a ",[141,142,143],"strong",{},"fully playable 3D space shooter"," game, showcasing how TresJS can be used to create interactive gaming experiences. This is a port from ",[146,147,151],"a",{"href":148,"rel":149},"https://twitter.com/0xca0a",[150],"nofollow","Paul Henschel's"," original React Three Fiber game prototype, demonstrating advanced game development techniques using Vue and Three.js.",[154,155,157],"h3",{"id":156},"what-youll-see","What You'll See",[137,159,160],{},"A complete arcade-style space game featuring:",[162,163,164,171,177,183,189,195,201],"ul",{},[165,166,167,170],"li",{},[141,168,169],{},"Spaceship Control",": Mouse-controlled spaceship with smooth movement and physics",[165,172,173,176],{},[141,174,175],{},"Shooting Mechanics",": Click to shoot lasers at enemy targets",[165,178,179,182],{},[141,180,181],{},"Enemy AI",": Dynamic enemy spawning and movement patterns",[165,184,185,188],{},[141,186,187],{},"Particle Effects",": Explosions, engine trails, and visual feedback",[165,190,191,194],{},[141,192,193],{},"HUD Interface",": Score tracking, health display, and game state information",[165,196,197,200],{},[141,198,199],{},"Audio Integration",": Spatial audio effects for immersive gameplay",[165,202,203,206],{},[141,204,205],{},"Post-Processing",": Visual effects enhancing the space atmosphere",[154,208,210],{"id":209},"technical-implementation","Technical Implementation",[137,212,213],{},"This experiment showcases complex game development concepts:",[162,215,216,222,228,234,240,246,252],{},[165,217,218,221],{},[141,219,220],{},"Game State Management",": Centralized store using reactive patterns for game logic",[165,223,224,227],{},[141,225,226],{},"Physics Integration",": Collision detection and movement systems",[165,229,230,233],{},[141,231,232],{},"Dynamic Object Spawning",": Real-time creation and destruction of game entities",[165,235,236,239],{},[141,237,238],{},"Mouse-Based Controls",": Pointer movement converted to spaceship positioning",[165,241,242,245],{},[141,243,244],{},"Audio System",": Spatial audio with multiple sound effects and background music",[165,247,248,251],{},[141,249,250],{},"Performance Optimization",": Efficient rendering of hundreds of particles and objects",[165,253,254,257],{},[141,255,256],{},"Component Architecture",": Modular game components for entities, effects, and UI",[154,259,261],{"id":260},"game-features","Game Features",[162,263,264,270,276,282,288,294],{},[165,265,266,269],{},[141,267,268],{},"Ship Movement",": Smooth mouse-controlled navigation through 3D space",[165,271,272,275],{},[141,273,274],{},"Combat System",": Laser shooting with hit detection and visual feedback",[165,277,278,281],{},[141,279,280],{},"Enemy Variety",": Different enemy types with unique movement patterns",[165,283,284,287],{},[141,285,286],{},"Particle Systems",": Engine exhaust, explosions, and environmental effects",[165,289,290,293],{},[141,291,292],{},"Score System",": Points for destroying enemies and survival time",[165,295,296,299],{},[141,297,298],{},"Visual Effects",": Fog, lighting, and post-processing for atmosphere",[154,301,303],{"id":302},"audio-design","Audio Design",[162,305,306,312,318,324],{},[165,307,308,311],{},[141,309,310],{},"Spatial Audio",": 3D positioned sound effects that respond to player movement",[165,313,314,317],{},[141,315,316],{},"Engine Sounds",": Dynamic engine audio that responds to ship movement",[165,319,320,323],{},[141,321,322],{},"Weapon Audio",": Satisfying laser and explosion sound effects",[165,325,326,329],{},[141,327,328],{},"Background Music",": Atmospheric space soundtrack enhancing immersion",[154,331,333],{"id":332},"rendering-features","Rendering Features",[162,335,336,342,348,354],{},[165,337,338,341],{},[141,339,340],{},"Fog System",": Atmospheric fog creating depth and mood",[165,343,344,347],{},[141,345,346],{},"Dynamic Lighting",": Moving lights that respond to game events",[165,349,350,353],{},[141,351,352],{},"High Performance",": Optimized rendering supporting smooth 60fps gameplay",[165,355,356,359],{},[141,357,358],{},"Color Grading",": Custom tone mapping for cinematic space visuals",[137,361,362],{},"This experiment demonstrates the full potential of TresJS for game development, showing how Vue's reactivity and Three.js's 3D capabilities can combine to create engaging interactive experiences comparable to traditional game engines.",{"title":364,"searchDepth":365,"depth":365,"links":366},"",2,[367,369,370,371,372],{"id":156,"depth":368,"text":157},3,{"id":209,"depth":368,"text":210},{"id":260,"depth":368,"text":261},{"id":302,"depth":368,"text":303},{"id":332,"depth":368,"text":333},"2024-10-21","Port of 0xca0a's R3F game prototype","md",true,{},{"title":110,"description":374},[380,381],"game","post-processing","/experiments/space-game.png","lSC5dVYEKh_wvZWGUEnpPk6x-nf6qjlNvMH1MkRILpY",[385,402,416,433,449,467,484],{"id":386,"title":387,"avatar":388,"body":389,"description":364,"email":393,"extension":375,"github":394,"meta":395,"name":396,"navigation":376,"path":397,"seo":398,"slug":394,"stem":399,"twitter":394,"website":400,"__hash__":401},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":134,"value":390,"toc":391},[],{"title":364,"searchDepth":365,"depth":365,"links":392},[],"hola@alvarosaburido.dev","alvarosabu",{},"Alvaro Saburido","/authors/alvarosabu",{"description":364},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":403,"title":404,"avatar":405,"body":406,"description":364,"email":410,"extension":375,"github":132,"meta":411,"name":132,"navigation":376,"path":412,"seo":413,"slug":132,"stem":414,"twitter":410,"website":410,"__hash__":415},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":134,"value":407,"toc":408},[],{"title":364,"searchDepth":365,"depth":365,"links":409},[],null,{},"/authors/andretchen0",{"description":364},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":417,"title":418,"avatar":419,"body":420,"description":364,"email":424,"extension":375,"github":425,"meta":426,"name":427,"navigation":376,"path":428,"seo":429,"slug":425,"stem":430,"twitter":431,"website":410,"__hash__":432},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":134,"value":421,"toc":422},[],{"title":364,"searchDepth":365,"depth":365,"links":423},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":364},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":434,"title":435,"avatar":436,"body":437,"description":364,"email":410,"extension":375,"github":441,"meta":442,"name":443,"navigation":376,"path":444,"seo":445,"slug":441,"stem":446,"twitter":447,"website":410,"__hash__":448},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":134,"value":438,"toc":439},[],{"title":364,"searchDepth":365,"depth":365,"links":440},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":364},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":450,"title":451,"avatar":452,"body":453,"description":364,"email":457,"extension":375,"github":458,"meta":459,"name":451,"navigation":376,"path":460,"seo":461,"slug":462,"stem":463,"twitter":464,"website":465,"__hash__":466},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":134,"value":454,"toc":455},[],{"title":364,"searchDepth":365,"depth":365,"links":456},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":364},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":468,"title":469,"avatar":470,"body":471,"description":364,"email":475,"extension":375,"github":476,"meta":477,"name":478,"navigation":376,"path":479,"seo":480,"slug":478,"stem":481,"twitter":475,"website":482,"__hash__":483},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":134,"value":472,"toc":473},[],{"title":364,"searchDepth":365,"depth":365,"links":474},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":364},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":485,"title":486,"avatar":487,"body":488,"description":364,"email":492,"extension":375,"github":493,"meta":494,"name":495,"navigation":376,"path":496,"seo":497,"slug":493,"stem":498,"twitter":499,"website":500,"__hash__":501},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":134,"value":489,"toc":490},[],{"title":364,"searchDepth":365,"depth":365,"links":491},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":364},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1774953670487]