[{"data":1,"prerenderedAt":178},["ShallowReactive",2],{"blog-de-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\u002Fde\u002Fthreejs-in-the-browser-2019.md","Three.js 2019: 3D wird alltagstauglich",{"type":7,"value":8,"toc":158},"minimark",[9,13,18,21,132,135,139,142,148,151,154],[10,11,12],"p",{},"Es gab eine Zeit, da war 3D im Browser ein Versprechen für die Zukunft. Beeindruckend in Demos, aber zu schwer, zu instabil, zu wählerisch bei der Hardware, um es einem echten Kunden zuzumuten. Dieses Jahr habe ich gemerkt, dass sich das Blatt gewendet hat. WebGL läuft heute zuverlässig, Mobilgeräte sind erstaunlich potent geworden, und Three.js hat sich von einer Spielwiese zu einem ernsthaften Werkzeug entwickelt.",[14,15,17],"h2",{"id":16},"von-der-tech-demo-zur-echten-seite","Von der Tech-Demo zur echten Seite",[10,19,20],{},"Was sich verändert hat, ist nicht eine einzelne Technologie, sondern ihr Reifegrad. Three.js abstrahiert die rohe WebGL-Komplexität so weit, dass ich mich auf die Idee konzentrieren kann statt auf Shader-Mathematik.",[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],{},"Drei Zeilen, und ich habe eine Bühne, eine Kamera und einen Renderer. Der Rest ist Gestaltung. Genau das macht den Unterschied: Die Technik tritt zurück, und das Kreative tritt nach vorn.",[14,136,138],{"id":137},"wo-3d-heute-wirklich-glänzt","Wo 3D heute wirklich glänzt",[10,140,141],{},"Ich sehe die spannendsten Möglichkeiten nicht in vollflächigen 3D-Welten, sondern in gezielten Momenten. Ein Produkt, das man mit dem Mauszeiger drehen kann. Eine Heldensektion, in der sich Geometrie sanft mit dem Scrollen bewegt. Ein Material, das im Licht wirklich nach Material aussieht.",[143,144,145],"blockquote",{},[10,146,147],{},"3D ist dann am stärksten, wenn der Besucher nicht „3D“ denkt, sondern einfach das Gefühl hat, dass diese Seite lebt.",[10,149,150],{},"Natürlich bleibt Verantwortung gefragt. Eine 3D-Szene darf eine Seite nicht in die Knie zwingen. Ich achte auf Polygonbudgets, lade Assets verzögert, und ich frage immer zuerst: Trägt das die Idee — oder ist es nur Effekt? Wenn 3D nur glänzt, ohne etwas zu sagen, lasse ich es weg.",[10,152,153],{},"Für mich ist 2019 das Jahr, in dem 3D im Web vom Risiko zur Option geworden ist. Es ist kein Argument mehr, das ich gegen Skepsis verteidigen muss, sondern ein Pinsel mehr in meinem Werkzeugkasten. Und ehrlich gesagt: einer der schönsten.",[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 und Three.js sind reif geworden — interaktives 3D ist 2019 auch auf ganz normalen Marketing-Seiten endlich realistisch.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Fthreejs-in-the-browser-2019",{"title":5,"description":164},"blog\u002Fde\u002Fthreejs-in-the-browser-2019",[174,175,176],"Three.js","WebGL","3D","P_IVi1iosB8ZYidpUs1OAkbxvWMh52aTNv1o1sAv4PY",1781691287365]