[{"data":1,"prerenderedAt":183},["ShallowReactive",2],{"embed-portals-rpg-difficulty":3},{"id":4,"title":5,"author":6,"body":7,"date":168,"description":169,"extension":170,"featured":171,"lastUpdated":172,"meta":173,"navigation":174,"path":175,"responsive":171,"seo":176,"stem":177,"tags":178,"thumbnail":181,"__hash__":182},"experiments\u002Fexperiments\u002Fportals-rpg-difficulty.md","Portals RPG Difficulty","alvarosabu",{"type":8,"value":9,"toc":161},"minimark",[10,24,41,56,63,68,106,110],[11,12,13,14,18,19,23],"p",{},"This experiment is a demo of the latest ",[15,16,17],"strong",{},"portals"," features in TresJS. It is a difficulty selector for an RPG: three framed cards float in a medieval sky, and each frame is a ",[20,21,22],"code",{},"MeshPortalMaterial"," that renders its own scene.",[11,25,26,27,34,35,40],{},"It is inspired by ",[28,29,33],"a",{"href":30,"rel":31},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=2W_VR92Pqgs",[32],"nofollow","this portals video from Wawa Sensei"," and ",[28,36,39],{"href":37,"rel":38},"https:\u002F\u002Fcodesandbox.io\u002Fp\u002Fsandbox\u002F9m4tpc",[32],"this React Three Fiber CodeSandbox demo",", rebuilt with TresJS and cientos.",[11,42,43,44,49,50,55],{},"The theme comes from the ",[28,45,48],{"href":46,"rel":47},"https:\u002F\u002Fwww.thegamer.com\u002Fbaldurs-gate-3-best-difficulty\u002F",[32],"difficulty screen in Baldur's Gate 3",", where each mode is a painted portrait. This experiment recreates the spirit of those paintings as live 3D scenes, using ",[28,51,54],{"href":52,"rel":53},"https:\u002F\u002Fkaylousberg.itch.io\u002F",[32],"KayKit"," characters by Kay Lousberg, plus a few custom characters made by me.",[11,57,58],{},[59,60],"img",{"alt":61,"src":62},"Baldur's Gate 3 Explorer difficulty portrait","\u002Fexplorer.webp",[64,65,67],"h3",{"id":66},"what-youll-see","What You'll See",[69,70,71,78,84,90,100],"ul",{},[72,73,74,77],"li",{},[15,75,76],{},"Explorer",": a narrative campfire scene with the party at rest",[72,79,80,83],{},[15,81,82],{},"Balanced",": a dungeon full of skeletons, mist and volumetric fog",[72,85,86,89],{},[15,87,88],{},"Tactician",": a demonic realm with lava, energy beams and a demon lord",[72,91,92,95,96,99],{},[15,93,94],{},"Framed cards",": an ",[20,97,98],{},"Html"," card sits on each frame with a label and a short pitch",[72,101,102,105],{},[15,103,104],{},"Pop-in animation",": the frames scale up with an elastic ease once the loading screen fades",[64,107,109],{"id":108},"technical-implementation","Technical Implementation",[69,111,112,117,123,129,139,145,155],{},[72,113,114,116],{},[15,115,22],{},": each card is a plane whose material renders a separate scene into a portal",[72,118,119,122],{},[15,120,121],{},"Per-portal scenes",": every difficulty is a plain Vue component, so its meshes, lights, fog and animations live inside that portal only",[72,124,125,128],{},[15,126,127],{},"useGLTF + useAnimations",": shared models with posed rigs, one mixer per rig",[72,130,131,134,135,138],{},[15,132,133],{},"Html from cientos",": the card overlay uses ",[20,136,137],{},"transform"," mode with a distance factor that maps one world unit to 100 CSS px, so the card lands exactly on the 2 x 3 plane",[72,140,141,144],{},[15,142,143],{},"Equirectangular sky",": a rotated panorama used as both background and environment of the main scene",[72,146,147,150,151,154],{},[15,148,149],{},"Post-processing",": bloom from ",[20,152,153],{},"@tresjs\u002Fpost-processing"," on top of the composed portals",[72,156,157,160],{},[15,158,159],{},"GSAP timeline",": staggered elastic pop for the three frames",{"title":162,"searchDepth":163,"depth":163,"links":164},"",2,[165,167],{"id":66,"depth":166,"text":67},3,{"id":108,"depth":166,"text":109},"2026-09-07","An RPG difficulty selector where each choice is a portal into its own world","md",false,"2026-09-22",{},true,"\u002Fexperiments\u002Fportals-rpg-difficulty",{"title":5,"description":169},"experiments\u002Fportals-rpg-difficulty",[17,179,180],"meshPortalMaterial","rpg","\u002Fexperiments\u002Fportals-rpg-difficulty.webp","0lsp4J8TV8t7CBQ0duE3XGL50ygcRrWenSeWiTEjAME",1792681429420]