[{"data":1,"prerenderedAt":178},["ShallowReactive",2],{"blog-en-threejs-in-the-browser-2019":3},{"id":4,"title":5,"body":6,"cover":162,"date":163,"description":164,"draft":165,"extension":166,"locale":167,"meta":168,"navigation":169,"path":170,"seo":171,"stem":172,"tags":173,"__hash__":177},"blog\u002Fblog\u002Fen\u002Fthreejs-in-the-browser-2019.md","Three.js in 2019: 3D goes mainstream",{"type":7,"value":8,"toc":158},"minimark",[9,13,18,21,132,135,139,142,148,151,154],[10,11,12],"p",{},"There was a time when 3D in the browser was a promise for the future. Impressive in demos, but too heavy, too fragile, too picky about hardware to put in front of a real client. This year I realized the tide has turned. WebGL runs reliably today, mobile devices have become surprisingly capable, and Three.js has grown from a playground into a serious tool.",[14,15,17],"h2",{"id":16},"from-tech-demo-to-real-site","From tech demo to real site",[10,19,20],{},"What changed isn't a single technology, but its level of maturity. Three.js abstracts the raw WebGL complexity far enough that I can focus on the idea instead of shader math.",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-js shiki shiki-themes github-light github-dark","const scene = new THREE.Scene();\nconst camera = new THREE.PerspectiveCamera(75, ratio, 0.1, 1000);\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\n","js","",[29,30,31,64,104],"code",{"__ignoreMap":27},[32,33,36,40,44,47,50,53,57,61],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"szBVR","const",[32,41,43],{"class":42},"sj4cs"," scene",[32,45,46],{"class":38}," =",[32,48,49],{"class":38}," new",[32,51,52],{"class":42}," THREE",[32,54,56],{"class":55},"sVt8B",".",[32,58,60],{"class":59},"sScJk","Scene",[32,62,63],{"class":55},"();\n",[32,65,67,69,72,74,76,78,80,83,86,89,92,95,98,101],{"class":34,"line":66},2,[32,68,39],{"class":38},[32,70,71],{"class":42}," camera",[32,73,46],{"class":38},[32,75,49],{"class":38},[32,77,52],{"class":42},[32,79,56],{"class":55},[32,81,82],{"class":59},"PerspectiveCamera",[32,84,85],{"class":55},"(",[32,87,88],{"class":42},"75",[32,90,91],{"class":55},", ratio, ",[32,93,94],{"class":42},"0.1",[32,96,97],{"class":55},", ",[32,99,100],{"class":42},"1000",[32,102,103],{"class":55},");\n",[32,105,107,109,112,114,116,118,120,123,126,129],{"class":34,"line":106},3,[32,108,39],{"class":38},[32,110,111],{"class":42}," renderer",[32,113,46],{"class":38},[32,115,49],{"class":38},[32,117,52],{"class":42},[32,119,56],{"class":55},[32,121,122],{"class":59},"WebGLRenderer",[32,124,125],{"class":55},"({ antialias: ",[32,127,128],{"class":42},"true",[32,130,131],{"class":55}," });\n",[10,133,134],{},"Three lines, and I have a stage, a camera, and a renderer. The rest is design. That's exactly the difference: the technology steps back and the creative work steps forward.",[14,136,138],{"id":137},"where-3d-truly-shines-today","Where 3D truly shines today",[10,140,141],{},"I see the most exciting possibilities not in full-screen 3D worlds, but in deliberate moments. A product you can rotate with the cursor. A hero section where geometry drifts gently with the scroll. A material that genuinely looks like a material in the light.",[143,144,145],"blockquote",{},[10,146,147],{},"3D is at its strongest when the visitor doesn't think \"3D\" — they just feel that this site is alive.",[10,149,150],{},"Responsibility still matters, of course. A 3D scene must not bring a page to its knees. I watch polygon budgets, lazy-load assets, and I always ask first: does this carry the idea — or is it just an effect? If 3D only glitters without saying anything, I leave it out.",[10,152,153],{},"For me, 2019 is the year 3D on the web went from a risk to an option. It's no longer an argument I have to defend against skepticism, but one more brush in my toolkit. And honestly: one of the most beautiful.",[155,156,157],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":27,"searchDepth":66,"depth":66,"links":159},[160,161],{"id":16,"depth":66,"text":17},{"id":137,"depth":66,"text":138},null,"2019-09-24","WebGL and Three.js have matured — interactive 3D is finally realistic on ordinary marketing sites in 2019, not just tech demos.",false,"md","en",{},true,"\u002Fblog\u002Fen\u002Fthreejs-in-the-browser-2019",{"title":5,"description":164},"blog\u002Fen\u002Fthreejs-in-the-browser-2019",[174,175,176],"Three.js","WebGL","3D","RVDn9E9qHSDw4oaoSmG_2msvqamAhM39VGpYLRaX_4o",1781691288463]