[{"data":1,"prerenderedAt":571},["ShallowReactive",2],{"navigation":3,"/experiments/haunted-house":130,"authors":453},[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":58,"author":132,"body":133,"date":440,"description":441,"extension":442,"featured":129,"lastUpdated":440,"meta":443,"navigation":444,"path":59,"seo":445,"stem":60,"tags":446,"thumbnail":451,"__hash__":452},"experiments/experiments/haunted-house.md","jaime-bboyjt",{"type":134,"value":135,"toc":430},"minimark",[136,153,158,161,207,211,214,266,270,277,303,309,329,335,361,365,397,401,427],[137,138,139,140,144,145,152],"p",{},"This experiment recreates the iconic ",[141,142,143],"strong",{},"haunted house scene"," from ",[146,147,151],"a",{"href":148,"rel":149},"https://threejs-journey.com/",[150],"nofollow","Bruno Simon's Three.js Journey course",", adapted for TresJS. Experience a spooky atmospheric scene complete with floating ghosts, textured materials, dynamic lighting, and eerie fog effects that create the perfect Halloween ambiance.",[154,155,157],"h3",{"id":156},"what-youll-see","What You'll See",[137,159,160],{},"A spine-chilling haunted scene featuring:",[162,163,164,171,177,183,189,195,201],"ul",{},[165,166,167,170],"li",{},[141,168,169],{},"Detailed Haunted House",": Multi-textured building with brick walls, wooden door, and cone roof",[165,172,173,176],{},[141,174,175],{},"Floating Ghosts",": Three colorful point lights that orbit the house in ethereal patterns",[165,178,179,182],{},[141,180,181],{},"Graveyard Environment",": 50 randomly positioned tombstones scattered around the scene",[165,184,185,188],{},[141,186,187],{},"Atmospheric Fog",": Dense fog effects limiting visibility and creating mystery",[165,190,191,194],{},[141,192,193],{},"Textured Terrain",": Grass floor with normal maps, roughness, and ambient occlusion",[165,196,197,200],{},[141,198,199],{},"Dynamic Lighting",": Multiple light sources casting realistic shadows",[165,202,203,206],{},[141,204,205],{},"Spooky Vegetation",": Bushes strategically placed around the house for atmosphere",[154,208,210],{"id":209},"technical-implementation","Technical Implementation",[137,212,213],{},"This experiment demonstrates comprehensive 3D scene creation techniques:",[162,215,216,222,233,239,248,254,260],{},[165,217,218,221],{},[141,219,220],{},"Advanced Texturing",": Multiple texture maps (diffuse, normal, roughness, AO) for realistic materials",[165,223,224,227,228,232],{},[141,225,226],{},"Texture Loading",": ",[229,230,231],"code",{},"useTextures"," composable for efficient multi-texture loading with error handling",[165,234,235,238],{},[141,236,237],{},"Procedural Generation",": Algorithmic placement of 50 graves using polar coordinates",[165,240,241,227,244,247],{},[141,242,243],{},"Animation System",[229,245,246],{},"useLoop"," composable driving ghost movement with trigonometric patterns",[165,249,250,253],{},[141,251,252],{},"Shadow Mapping",": PCF soft shadows with optimized shadow camera settings",[165,255,256,259],{},[141,257,258],{},"Material Configuration",": Proper UV2 attribute setup for ambient occlusion maps",[165,261,262,265],{},[141,263,264],{},"Atmospheric Effects",": Fog system creating depth and limiting draw distance",[154,267,269],{"id":268},"scene-components","Scene Components",[271,272,274],"h4",{"id":273},"building-architecture",[141,275,276],{},"Building Architecture",[162,278,279,285,291,297],{},[165,280,281,284],{},[141,282,283],{},"Brick Walls",": 4x2.5x4 box geometry with realistic brick texturing",[165,286,287,290],{},[141,288,289],{},"Wooden Door",": Displacement-mapped door with alpha transparency and detailed textures",[165,292,293,296],{},[141,294,295],{},"Cone Roof",": 4-sided pyramid roof with reddish-brown material",[165,298,299,302],{},[141,300,301],{},"Door Light",": Warm orange point light illuminating the entrance",[271,304,306],{"id":305},"ghost-animation-system",[141,307,308],{},"Ghost Animation System",[162,310,311,317,323],{},[165,312,313,316],{},[141,314,315],{},"Ghost 1",": Magenta light orbiting at 4-unit radius with vertical bobbing",[165,318,319,322],{},[141,320,321],{},"Ghost 2",": Cyan light following 5-unit circular path with complex Y movement",[165,324,325,328],{},[141,326,327],{},"Ghost 3",": Orange light with variable radius (7 + oscillation) creating unpredictable patterns",[271,330,332],{"id":331},"environmental-details",[141,333,334],{},"Environmental Details",[162,336,337,343,349,355],{},[165,338,339,342],{},[141,340,341],{},"Graveyard",": 50 procedurally placed tombstones with random rotations",[165,344,345,348],{},[141,346,347],{},"Bushes",": 4 spherical bushes of varying sizes around the house",[165,350,351,354],{},[141,352,353],{},"Grass Floor",": 20x20 plane with 8x8 texture repetition for seamless tiling",[165,356,357,360],{},[141,358,359],{},"Lighting Setup",": Ambient + directional + point lights for atmospheric illumination",[154,362,364],{"id":363},"visual-design","Visual Design",[162,366,367,373,379,385,391],{},[165,368,369,372],{},[141,370,371],{},"Horror Atmosphere",": Dark purple-gray background (#262837) creating ominous mood",[165,374,375,378],{},[141,376,377],{},"Realistic Materials",": PBR workflow with proper metalness, roughness, and normal mapping",[165,380,381,384],{},[141,382,383],{},"Color Palette",": Muted earth tones contrasted with vibrant ghost light colors",[165,386,387,390],{},[141,388,389],{},"Depth Effects",": Fog system preventing pop-in and adding atmospheric depth",[165,392,393,396],{},[141,394,395],{},"Shadow Play",": Strategic shadow casting enhancing the spooky atmosphere",[154,398,400],{"id":399},"performance-features","Performance Features",[162,402,403,409,415,421],{},[165,404,405,408],{},[141,406,407],{},"Optimized Textures",": Efficient texture loading with 256x256 shadow maps",[165,410,411,414],{},[141,412,413],{},"Instanced Graves",": Reused geometry and materials for tombstone generation",[165,416,417,420],{},[141,418,419],{},"Culling Optimization",": Fog limiting draw distance for better performance",[165,422,423,426],{},[141,424,425],{},"Memory Management",": Proper texture wrapping and repeat settings",[137,428,429],{},"This experiment perfectly captures the essence of classic horror aesthetics while demonstrating advanced TresJS techniques for creating immersive, atmospheric 3D environments. It serves as an excellent reference for texture mapping, procedural generation, and atmospheric lighting in web-based 3D applications.",{"title":431,"searchDepth":432,"depth":432,"links":433},"",2,[434,436,437,438,439],{"id":156,"depth":435,"text":157},3,{"id":209,"depth":435,"text":210},{"id":268,"depth":435,"text":269},{"id":363,"depth":435,"text":364},{"id":399,"depth":435,"text":400},"2023-04-10","The classical threejs-journey haunted house, done with TresJs","md",{},true,{"title":58,"description":441},[447,448,449,450],"PointLight","fog","useTexture","threejs-journey","/experiments/haunted-house.png","iTeBy0VUgPQhBlVzWSn9uwJQYa4US4LiPL7WFAOdzuc",[454,471,486,503,519,536,553],{"id":455,"title":456,"avatar":457,"body":458,"description":431,"email":462,"extension":442,"github":463,"meta":464,"name":465,"navigation":444,"path":466,"seo":467,"slug":463,"stem":468,"twitter":463,"website":469,"__hash__":470},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":134,"value":459,"toc":460},[],{"title":431,"searchDepth":432,"depth":432,"links":461},[],"hola@alvarosaburido.dev","alvarosabu",{},"Alvaro Saburido","/authors/alvarosabu",{"description":431},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":472,"title":473,"avatar":474,"body":475,"description":431,"email":479,"extension":442,"github":480,"meta":481,"name":480,"navigation":444,"path":482,"seo":483,"slug":480,"stem":484,"twitter":479,"website":479,"__hash__":485},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":134,"value":476,"toc":477},[],{"title":431,"searchDepth":432,"depth":432,"links":478},[],null,"andretchen0",{},"/authors/andretchen0",{"description":431},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":487,"title":488,"avatar":489,"body":490,"description":431,"email":494,"extension":442,"github":495,"meta":496,"name":497,"navigation":444,"path":498,"seo":499,"slug":495,"stem":500,"twitter":501,"website":479,"__hash__":502},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":134,"value":491,"toc":492},[],{"title":431,"searchDepth":432,"depth":432,"links":493},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":431},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":504,"title":505,"avatar":506,"body":507,"description":431,"email":479,"extension":442,"github":511,"meta":512,"name":513,"navigation":444,"path":514,"seo":515,"slug":511,"stem":516,"twitter":517,"website":479,"__hash__":518},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":134,"value":508,"toc":509},[],{"title":431,"searchDepth":432,"depth":432,"links":510},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":431},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":520,"title":521,"avatar":522,"body":523,"description":431,"email":527,"extension":442,"github":528,"meta":529,"name":521,"navigation":444,"path":530,"seo":531,"slug":132,"stem":532,"twitter":533,"website":534,"__hash__":535},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":134,"value":524,"toc":525},[],{"title":431,"searchDepth":432,"depth":432,"links":526},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":431},"authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":537,"title":538,"avatar":539,"body":540,"description":431,"email":544,"extension":442,"github":545,"meta":546,"name":547,"navigation":444,"path":548,"seo":549,"slug":547,"stem":550,"twitter":544,"website":551,"__hash__":552},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":134,"value":541,"toc":542},[],{"title":431,"searchDepth":432,"depth":432,"links":543},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":431},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":554,"title":555,"avatar":556,"body":557,"description":431,"email":561,"extension":442,"github":562,"meta":563,"name":564,"navigation":444,"path":565,"seo":566,"slug":562,"stem":567,"twitter":568,"website":569,"__hash__":570},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":134,"value":558,"toc":559},[],{"title":431,"searchDepth":432,"depth":432,"links":560},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":431},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1774953670729]