{"id":4853,"date":"2016-04-19T09:37:14","date_gmt":"2016-04-19T07:37:14","guid":{"rendered":"https:\/\/usersnap.com\/?p=4853"},"modified":"2025-07-28T14:48:31","modified_gmt":"2025-07-28T12:48:31","slug":"3d-graphics-three-js-review","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/","title":{"rendered":"Running 3D graphics inside the browser with Three.JS. A first review by Usersnap."},"content":{"rendered":"\n<p>Over the last few years, browsers got some super powers. They evolved from simple viewers for HTML &amp; CSS to platforms executing our beloved web applications.<\/p>\n\n\n\n<p>With developments, such as WebGL or tracking.js, developers can do incredible things inside browsers.<\/p>\n\n\n\n<p>Recently we stumbled upon Three.js. So we decided to do a review on how browsers are moving to a 3D world by making use of new libraries.<\/p>\n\n\n\n<!--more-->\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Product Development<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Libraries for the win.<\/h2>\n\n\n\n<p>We at Usersnap love browsers. Yep &#8211; we do. Admittedly, I do not take browsers like Internet Explorer into consideration. Overall, I think it\u2019s correct to say that we are huge fans of the modern browser world, and we love to see how developers are using recent browser technologies.<\/p>\n\n\n\n<p>With <a href=\"https:\/\/usersnap.com\/blog\/tracking-js-the-computer-vision-power-of-javascript\/\">tracking.js<\/a> and other powerful JavaScript libraries bringing computer vision to the browser, we see a bright future for web browsers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is WebGL?<\/h2>\n\n\n\n<p>Before we get started with our three.js review, I\u2019d like to take a moment to discuss WebGL.<\/p>\n\n\n\n<p>WebGL, Web Graphics Library, is a \u201c<em><a href=\"https:\/\/en.wikipedia.org\/wiki\/WebGL\" target=\"_blank\" rel=\"noopener\">JavaScript API<\/a> for rendering interactive 3D computer and 2D graphics within any compatible web browser without plug-ins<\/em>\u201d.<\/p>\n\n\n\n<p>What does this mean? In short, WebGL is an API that is executed on a computer\u2019s GPU to provide a great performance of interactive 3D graphics in real-time.<\/p>\n\n\n\n<p>Remember the old days of 3D CAD rendering, which needed superpowers? Well, luckily, those days are over. Companies like Onshape are using WebGL to run everything in the browser.<\/p>\n\n\n\n<p>And the great news is that all modern browsers support WebGL (yes, even Internet Explorer does).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is three.js?<\/h2>\n\n\n\n<p>So back to the basics. You might now wonder what three.js is and its connection to WebGL.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Three.js is a library that makes WebGL &#8211; 3D in the browser &#8211; easy to use.<\/strong><\/p>\n<\/blockquote>\n\n\n\n<p>Sounds great, right? \ud83d\ude42<\/p>\n\n\n\n<p>With WebGL, a simple cube would turn out a significant amount of JavaScript code, whereas three.js only needs a fraction of that. Three.js is the lightweight library that makes it easy to get started with 3D programming inside the browser.<\/p>\n\n\n\n<p><iframe loading=\"lazy\" class=\"giphy-embed\" src=\"\/\/giphy.com\/embed\/xT1XGOb4Yc0pu9NCRa\" width=\"480\" height=\"297\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n\n\n\n<p>If you want to start with three.js, I recommend downloading the three.js library directly from <a href=\"http:\/\/threejs.org\/\" target=\"_blank\" rel=\"noopener\">this website<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"acf-cta\" style=\"background-image: url(https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2025\/02\/Group-1000004194.svg); width: 100%;\"><h2>Try Usersnap for Product Development<\/h2><a href=\"https:\/\/usersnap.com\/signup\" class=\"cta-button\">Try Usersnap Now<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to use three.js?<\/h2>\n\n\n\n<p>To use three.js on a project, you could download it from the mentioned three.js website. If you want to try it, you could also play with three.js on <a href=\"http:\/\/codepen.io\/\" target=\"_blank\" rel=\"noopener\">codepen.io<\/a>.<\/p>\n\n\n\n<p>Just shoot up a new HTML file, which you need to display and run three.js.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=utf-8&gt;\n&lt;title&gt;My three.js playground&lt;\/title&gt;\n&lt;style&gt;\nbody { margin: 0; }\ncanvas { width:100%; height: 100% }\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;script src=\"js\/three.min.js\"&gt;&lt;\/script&gt;\n&lt;script&gt;\n\/\/ the javascript will be placed here\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<p>The HTML assumes that you have downloaded the three.js library and saved it in the same folder location. To display something with three.js, we need three things (I guess that\u2019s why it\u2019s called Three.js ;-). We need a scene, a camera, and a renderer, to render the scene with the camera. The code looks like this:<\/p>\n\n\n\n<p>We need a scene, a camera, and a renderer, to render the scene with the camera. The code looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var scene = new THREE.Scene();\nvar camera = new THREE.PerspectiveCamera( 75, window.innerWidth \/ window.innerHeight, 0.1, 1000 );\n\nvar renderer = new THREE.WebGLRenderer();\nrenderer.setSize( window.innerWidth, window.innerHeight );\ndocument.body.appendChild( renderer.domElement );<\/pre>\n\n\n\n<p>The first PerspectiveCamera attribute is the field of view, the second one is the aspect ratio. It is recommended to use the element&#8217;s width divided by the height (otherwise, the image will look squished).<\/p>\n\n\n\n<p>For further information on the camera and rendering, I recommend taking a closer look at this <a href=\"http:\/\/threejs.org\/docs\/index.html#Manual\/Introduction\/Creating_a_scene\" target=\"_blank\" rel=\"noopener\">getting started tutorial of three.js<\/a>.<\/p>\n\n\n\n<p>So, now I\u2019m going to add a cube. To do so, I need to add a BoxGeometry, which is an object that contains all the points (vertices) and fill (faces) of the cube.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var geometry = new THREE.BoxGeometry( 1, 1, 1 );\nvar material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );\nvar cube = new THREE.Mesh( geometry, material );\nscene.add( cube );\n\ncamera.position.z = 5;\n<\/pre>\n\n\n\n<p>We also need a so-called Mesh. This is an object which takes a geometry and applies a material to it.<\/p>\n\n\n\n<p>You could add your image to the cube instead of a colored cube.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var material = new THREE.MeshPhongMaterial( { map:THREE.ImageUtils.loadTexture('\/image-url.png') } );\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Animating the cube<\/h3>\n\n\n\n<p>When you insert all the previous codes, you probably see a green box. To animate that box now, we need to add rotation to it.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">cube.rotation.x += 0.1;\ncube.rotation.y += 0.1;\n<\/pre>\n\n\n\n<p>This will give the cube some rotation animation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final output.<\/h2>\n\n\n\n<p>All in all, starting with three.js seems pretty straightforward. Especially compared to WebGL. The full code for this first test is available in the codepen playground.<\/p>\n\n\n\n<p>I recommend playing around with it a bit to get a better understanding of how it works.<\/p>\n\n\n\n<p class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/tompeham\/pen\/ZWomey\/\">three.js Playground<\/a> by tompeham (<a href=\"http:\/\/codepen.io\/tompeham\">@tompeham<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion.<\/h2>\n\n\n\n<p>As you\u2019ve seen in this first review, three.js gives us an excellent range of possibilities for 3D graphics. For further information on three.js, I recommend reading the official documentation.<\/p>\n\n\n\n<p>And if you wonder what people are already doing with three.js, I recommend checking out the demo projects listed on threejs.org. There are some impressive websites up and running with three.js already.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the last few years, browsers got some super powers. They evolved from simple viewers for HTML &amp; CSS to platforms executing our beloved web applications. With developments, such as WebGL or tracking.js, developers can do incredible things inside browsers. Recently we stumbled upon Three.js. So we decided to do a review on how browsers [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":4854,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-4853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-blog"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif","author_info":{"display_name":"Thomas Peham","author_link":"https:\/\/usersnap.com\/blog\/author\/thomas\/"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Running 3D graphics inside the browser with Three.JS - Usersnap<\/title>\n<meta name=\"description\" content=\"April 19, 2016\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Running 3D graphics inside the browser with Three.JS - Usersnap\" \/>\n<meta property=\"og:description\" content=\"April 19, 2016\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/\" \/>\n<meta property=\"og:site_name\" content=\"Usersnap Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/usersnap\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-19T07:37:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-28T12:48:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Thomas Peham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tompeham\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Peham\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/\"},\"author\":{\"name\":\"Thomas Peham\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b\"},\"headline\":\"Running 3D graphics inside the browser with Three.JS. A first review by Usersnap.\",\"datePublished\":\"2016-04-19T07:37:14+00:00\",\"dateModified\":\"2025-07-28T12:48:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/\"},\"wordCount\":805,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/\",\"url\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/\",\"name\":\"Running 3D graphics inside the browser with Three.JS - Usersnap\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif\",\"datePublished\":\"2016-04-19T07:37:14+00:00\",\"dateModified\":\"2025-07-28T12:48:31+00:00\",\"description\":\"April 19, 2016\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif\",\"width\":700,\"height\":426,\"caption\":\"three.js demo example and review\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/usersnap.com\/blog\/#website\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"name\":\"Usersnap Blog\",\"description\":\"Learn more about how to collect user feedback and build better products with the magic power of feedback.\",\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/usersnap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\",\"name\":\"Usersnap\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"contentUrl\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"width\":136,\"height\":26,\"caption\":\"Usersnap\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/usersnap\",\"https:\/\/x.com\/usersnap\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b\",\"name\":\"Thomas Peham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g\",\"caption\":\"Thomas Peham\"},\"sameAs\":[\"https:\/\/x.com\/tompeham\"],\"url\":\"https:\/\/usersnap.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Running 3D graphics inside the browser with Three.JS - Usersnap","description":"April 19, 2016","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/","og_locale":"en_US","og_type":"article","og_title":"Running 3D graphics inside the browser with Three.JS - Usersnap","og_description":"April 19, 2016","og_url":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2016-04-19T07:37:14+00:00","article_modified_time":"2025-07-28T12:48:31+00:00","og_image":[{"width":700,"height":426,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif","type":"image\/gif"}],"author":"Thomas Peham","twitter_card":"summary_large_image","twitter_creator":"@tompeham","twitter_site":"@usersnap","twitter_misc":{"Written by":"Thomas Peham","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/"},"author":{"name":"Thomas Peham","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b"},"headline":"Running 3D graphics inside the browser with Three.JS. A first review by Usersnap.","datePublished":"2016-04-19T07:37:14+00:00","dateModified":"2025-07-28T12:48:31+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/"},"wordCount":805,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif","articleSection":["Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/","url":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/","name":"Running 3D graphics inside the browser with Three.JS - Usersnap","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif","datePublished":"2016-04-19T07:37:14+00:00","dateModified":"2025-07-28T12:48:31+00:00","description":"April 19, 2016","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/3d-graphics-three-js-review\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/04\/three-js-demo-e1461051495231.gif","width":700,"height":426,"caption":"three.js demo example and review"},{"@type":"WebSite","@id":"https:\/\/usersnap.com\/blog\/#website","url":"https:\/\/usersnap.com\/blog\/","name":"Usersnap Blog","description":"Learn more about how to collect user feedback and build better products with the magic power of feedback.","publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/usersnap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/usersnap.com\/blog\/#organization","name":"Usersnap","url":"https:\/\/usersnap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","contentUrl":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","width":136,"height":26,"caption":"Usersnap"},"image":{"@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/usersnap","https:\/\/x.com\/usersnap"]},{"@type":"Person","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b","name":"Thomas Peham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g","caption":"Thomas Peham"},"sameAs":["https:\/\/x.com\/tompeham"],"url":"https:\/\/usersnap.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/4853","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=4853"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/4853\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/4854"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=4853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=4853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=4853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}