{"id":2099,"date":"2022-04-12T23:43:29","date_gmt":"2022-04-13T03:43:29","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/?p=2099"},"modified":"2022-04-12T23:43:29","modified_gmt":"2022-04-13T03:43:29","slug":"inspirational-projects-useful-technologies","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/merlerker\/04\/12\/inspirational-projects-useful-technologies\/","title":{"rendered":"Inspirational Projects &#038; Useful Technologies"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/assets.website-files.com\/6202f89a2c14fae9e9222dc3\/6226d857dc55212d43c39d34_62170f2f05b91265872569e4_airpodpro-50frames-10delay-tiny-compressed.png\" alt=\"AirPods Evolution\" width=\"400\" height=\"400\" \/><\/p>\n<p><a href=\"https:\/\/www.scanofthemonth.com\/\">Scan of the Month<\/a> features CT scans of common products, using 3D rendering + scrolling to highlight different components and stories behind their manufacture. It uses Webflow + <a href=\"https:\/\/airbnb.design\/lottie\/\">Lottie<\/a> but I think something like this would work well in three.js.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone\" src=\"https:\/\/rd.nytimes.com\/static\/8d041226a7aac2127f4e89cc9712cab6\/c252f\/f9307946-766c-4abc-a4e3-2cb1986abb7a_Demo3.jpg\" alt=\"Demo 3 uses our open-source camera control library to scroll through the photogrammetry model.\" width=\"1600\" height=\"900\" \/><\/p>\n<p>The NYTimes is naturally a source of inspiration, and they have done some helpful <a href=\"https:\/\/rd.nytimes.com\/research\/3d-web-technology\">write-ups + demos<\/a> using three.js and their own (public) libraries for loading <a href=\"https:\/\/github.com\/nytimes\/three-loader-3dtiles\">3D tiles<\/a> and <a href=\"https:\/\/github.com\/nytimes\/three-story-controls\">controlling stories<\/a> with three.js.<\/p>\n<p>More cool things made with three.js:<\/p>\n<p><a href=\"https:\/\/alexanderperrin.com.au\/paper\/shorttrip\/\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2102\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Apr-12-2022-23-24-58.gif\" alt=\"\" width=\"642\" height=\"650\" \/><\/a><a href=\"https:\/\/normanvr.com\/\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2104 size-full\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Apr-12-2022-23-29-35.gif\" alt=\"\" width=\"824\" height=\"496\" \/><\/a><a href=\"https:\/\/unshift.jp\/\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2106\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Apr-12-2022-23-38-36.gif\" alt=\"\" width=\"640\" height=\"376\" \/><\/a><a href=\"https:\/\/eyes.nasa.gov\/apps\/mars2020\/#\/home\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2107\" src=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-12-at-11.42.56-PM.png\" alt=\"\" width=\"2776\" height=\"1888\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-12-at-11.42.56-PM.png 2776w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-12-at-11.42.56-PM-640x435.png 640w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-12-at-11.42.56-PM-1024x696.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-12-at-11.42.56-PM-768x522.png 768w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-12-at-11.42.56-PM-1536x1045.png 1536w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-12-at-11.42.56-PM-2048x1393.png 2048w, https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-content\/uploads\/2022\/04\/Screen-Shot-2022-04-12-at-11.42.56-PM-1200x816.png 1200w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scan of the Month features CT scans of common products, using 3D rendering + scrolling to highlight different components and stories behind their manufacture. It uses Webflow + Lottie but I think something like this would work well in three.js. The NYTimes is naturally a source of inspiration, and they have done some helpful write-ups &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/merlerker\/04\/12\/inspirational-projects-useful-technologies\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Inspirational Projects &#038; Useful Technologies&#8221;<\/span><\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[31],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/2099"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/comments?post=2099"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/2099\/revisions"}],"predecessor-version":[{"id":2108,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/posts\/2099\/revisions\/2108"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/media?parent=2099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/categories?post=2099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-212\/s2022\/wp-json\/wp\/v2\/tags?post=2099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}