[{"data":1,"prerenderedAt":482},["ShallowReactive",2],{"navigation":3,"/experiments/html-phone":130,"authors":364},[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":62,"author":132,"body":133,"date":353,"description":354,"extension":355,"featured":129,"lastUpdated":353,"meta":356,"navigation":357,"path":63,"seo":358,"stem":64,"tags":359,"thumbnail":362,"__hash__":363},"experiments/experiments/html-phone.md","alvarosabu",{"type":134,"value":135,"toc":343},"minimark",[136,145,150,153,193,197,200,238,242,274,278,310,314,340],[137,138,139,140,144],"p",{},"This experiment demonstrates ",[141,142,143],"strong",{},"HTML content integration"," within 3D models, showcasing how to embed live web pages directly into 3D objects. Experience the \"iTres\" phone featuring a real iframe displaying the TresJS website within a realistic iPhone X model.",[146,147,149],"h3",{"id":148},"what-youll-see","What You'll See",[137,151,152],{},"An immersive product showcase featuring:",[154,155,156,163,169,175,181,187],"ul",{},[157,158,159,162],"li",{},[141,160,161],{},"Realistic iPhone X Model",": High-quality 3D model with accurate proportions and materials",[157,164,165,168],{},[141,166,167],{},"Live Web Content",": Embedded iframe displaying the actual TresJS website",[157,170,171,174],{},[141,172,173],{},"Interactive Interface",": Floating view button to trigger camera animations",[157,176,177,180],{},[141,178,179],{},"Product Marketing",": Apple-style hero section with elegant typography",[157,182,183,186],{},[141,184,185],{},"Loading Experience",": Custom progress indicator with emoji animations",[157,188,189,192],{},[141,190,191],{},"Professional Environment",": HDR lighting and contact shadows for realism",[146,194,196],{"id":195},"technical-implementation","Technical Implementation",[137,198,199],{},"This experiment demonstrates advanced HTML-3D integration:",[154,201,202,208,214,220,226,232],{},[157,203,204,207],{},[141,205,206],{},"Html Component",": TresJS Cientos component for embedding HTML in 3D space",[157,209,210,213],{},[141,211,212],{},"Occlusion Handling",": Proper depth sorting with the phone's back panel",[157,215,216,219],{},[141,217,218],{},"Transform Integration",": HTML elements that rotate and scale with the 3D model",[157,221,222,225],{},[141,223,224],{},"Distance Scaling",": Automatic size adjustment based on camera distance",[157,227,228,231],{},[141,229,230],{},"Material Customization",": Custom screen transparency and bottom tab styling",[157,233,234,237],{},[141,235,236],{},"GSAP Animations",": Smooth camera transitions for cinematic reveals",[146,239,241],{"id":240},"interactive-features","Interactive Features",[154,243,244,250,256,262,268],{},[157,245,246,249],{},[141,247,248],{},"Floating Levitation",": Gentle floating animation using Levioso component",[157,251,252,255],{},[141,253,254],{},"View Toggle",": Button to trigger close-up camera movement",[157,257,258,261],{},[141,259,260],{},"Responsive HTML",": Web content that adapts to 3D transformations",[157,263,264,267],{},[141,265,266],{},"Loading States",": Progress tracking for model and texture loading",[157,269,270,273],{},[141,271,272],{},"Professional UI",": Nuxt UI components for consistent design",[146,275,277],{"id":276},"visual-design","Visual Design",[154,279,280,286,292,298,304],{},[157,281,282,285],{},[141,283,284],{},"Apple Aesthetic",": SF Pro Display font matching Apple's design language",[157,287,288,291],{},[141,289,290],{},"Hero Marketing",": Product presentation with pricing and features",[157,293,294,297],{},[141,295,296],{},"Environmental Lighting",": City HDR preset for realistic reflections",[157,299,300,303],{},[141,301,302],{},"Shadow Integration",": Contact shadows grounding the phone in space",[157,305,306,309],{},[141,307,308],{},"Fade Transitions",": Smooth loading overlay animations",[146,311,313],{"id":312},"technical-highlights","Technical Highlights",[154,315,316,322,328,334],{},[157,317,318,321],{},[141,319,320],{},"GLTF Model Loading",": Efficient Draco-compressed model loading",[157,323,324,327],{},[141,325,326],{},"HTML Positioning",": Precise placement of web content within screen bounds",[157,329,330,333],{},[141,331,332],{},"Camera Controls",": Interactive camera movements with smooth easing",[157,335,336,339],{},[141,337,338],{},"Performance Optimization",": Efficient rendering with proper occlusion culling",[137,341,342],{},"This experiment perfectly demonstrates the possibilities of combining traditional web content with 3D presentations, opening new avenues for product marketing, portfolio displays, and interactive experiences that bridge the gap between 2D and 3D interfaces.",{"title":344,"searchDepth":345,"depth":345,"links":346},"",2,[347,349,350,351,352],{"id":148,"depth":348,"text":149},3,{"id":195,"depth":348,"text":196},{"id":240,"depth":348,"text":241},{"id":276,"depth":348,"text":277},{"id":312,"depth":348,"text":313},"2023-12-08","Using HTML abstraction to render a page inside a model","md",{},true,{"title":62,"description":354},[360,361],"html","gltf","/experiments/html-phone.png","NigzfdqE_CcUMz2fXHUym19CCwB4cyTJxFSfgNJBLdU",[365,381,396,413,429,447,464],{"id":366,"title":367,"avatar":368,"body":369,"description":344,"email":373,"extension":355,"github":132,"meta":374,"name":375,"navigation":357,"path":376,"seo":377,"slug":132,"stem":378,"twitter":132,"website":379,"__hash__":380},"authors/authors/alvarosabu.md","Alvarosabu","/avatars/alvarosabu.jpg",{"type":134,"value":370,"toc":371},[],{"title":344,"searchDepth":345,"depth":345,"links":372},[],"hola@alvarosaburido.dev",{},"Alvaro Saburido","/authors/alvarosabu",{"description":344},"authors/alvarosabu","https://alvarosaburido.dev","FWpr6-OcVRzMvvsjRaD8icRidgpKVLCtrKy9-l_5GZM",{"id":382,"title":383,"avatar":384,"body":385,"description":344,"email":389,"extension":355,"github":390,"meta":391,"name":390,"navigation":357,"path":392,"seo":393,"slug":390,"stem":394,"twitter":389,"website":389,"__hash__":395},"authors/authors/andretchen0.md","Andretchen0","/avatars/andretchen0.jpg",{"type":134,"value":386,"toc":387},[],{"title":344,"searchDepth":345,"depth":345,"links":388},[],null,"andretchen0",{},"/authors/andretchen0",{"description":344},"authors/andretchen0","rztGS5YNlU7jYv1laE9f863gZy-WUFK5r3uuycyiMLY",{"id":397,"title":398,"avatar":399,"body":400,"description":344,"email":404,"extension":355,"github":405,"meta":406,"name":407,"navigation":357,"path":408,"seo":409,"slug":405,"stem":410,"twitter":411,"website":389,"__hash__":412},"authors/authors/damienmontastier.md","Damienmontastier","/avatars/damienmontastier.jpg",{"type":134,"value":401,"toc":402},[],{"title":344,"searchDepth":345,"depth":345,"links":403},[],"montastier.damien@gmail.com","damienmontastier",{},"Damien Montastier","/authors/damienmontastier",{"description":344},"authors/damienmontastier","dammontastier","FqtKh6r8pBEM29DE6GhT098-LIpM3BL7RXSxFjrcwwY",{"id":414,"title":415,"avatar":416,"body":417,"description":344,"email":389,"extension":355,"github":421,"meta":422,"name":423,"navigation":357,"path":424,"seo":425,"slug":421,"stem":426,"twitter":427,"website":389,"__hash__":428},"authors/authors/franciscohermida.md","Franciscohermida","/avatars/franciscohermida.jpg",{"type":134,"value":418,"toc":419},[],{"title":344,"searchDepth":345,"depth":345,"links":420},[],"franciscohermida",{},"Francisco Hermida","/authors/franciscohermida",{"description":344},"authors/franciscohermida","chicohermida","2dGmaA2uS0w2CaErMR8BexRzx0pCgoEowV5tZcITkus",{"id":430,"title":431,"avatar":432,"body":433,"description":344,"email":437,"extension":355,"github":438,"meta":439,"name":431,"navigation":357,"path":440,"seo":441,"slug":442,"stem":443,"twitter":444,"website":445,"__hash__":446},"authors/authors/jaime-torrealba.md","Jaime Torrealba","/avatars/jaime-torrealba.jpg",{"type":134,"value":434,"toc":435},[],{"title":344,"searchDepth":345,"depth":345,"links":436},[],"solucionesinformaticasjtc@gmail.com","JaimeTorrealba",{},"/authors/jaime-torrealba",{"description":344},"jaime-bboyjt","authors/jaime-torrealba","jaimebboyjt","https://jaimetorrealba.com/","WhkdXnej1NkT__thyZfYEil3qYn8wi7qVoQSMzyfrs4",{"id":448,"title":449,"avatar":450,"body":451,"description":344,"email":455,"extension":355,"github":456,"meta":457,"name":458,"navigation":357,"path":459,"seo":460,"slug":458,"stem":461,"twitter":455,"website":462,"__hash__":463},"authors/authors/luckystriike.md","Luckystriike","/avatars/luckystriike.jpg",{"type":134,"value":452,"toc":453},[],{"title":344,"searchDepth":345,"depth":345,"links":454},[],"none","luckystriike22",{},"luckystriike","/authors/luckystriike",{"description":344},"authors/luckystriike","https://github.com/luckystriike22","vmVaU8HAY_jbVnlvpUQiwh3uPcKxGGr6B5PF9xo17X8",{"id":465,"title":466,"avatar":467,"body":468,"description":344,"email":472,"extension":355,"github":473,"meta":474,"name":475,"navigation":357,"path":476,"seo":477,"slug":473,"stem":478,"twitter":479,"website":480,"__hash__":481},"authors/authors/neoprint3d.md","Neoprint3d","/avatars/neoprint3d.jpg",{"type":134,"value":469,"toc":470},[],{"title":344,"searchDepth":345,"depth":345,"links":471},[],"drew@neoprint3d.dev","neoprint3d",{},"Drew Ronsman","/authors/neoprint3d",{"description":344},"authors/neoprint3d","drew_ronsman","https://dronsman.com","w-8rauWEJDRmX_QOi4s2PI7n9EABybGURQ-R_ss9tzo",1774953670496]