{"id":4249806,"date":"2021-01-19T01:11:57","date_gmt":"2021-01-18T23:11:57","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/coding-a-cinematic-camera-path\/"},"modified":"2021-01-19T01:11:57","modified_gmt":"2021-01-18T23:11:57","slug":"coding-a-cinematic-camera-path","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/","title":{"rendered":"Coding a cinematic camera path"},"content":{"rendered":"<div class=\"block-article-post-header js-block-article-post-header block-article-post-header__theme--onyxGrey\">\n\t<button\tclass=\"cta-button block-article-post-header__back-button cta-button__color--white cta-button__style--back\" aria-label=\"Back\" >\n\t<svg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='M21.174 30 11 20.674l10.174-9.326m-9.326 9.328H30.5' stroke='var(--dept-button-icon-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/button><h1\t\tclass=\"typography block-article-post-header__title typography__color--white typography__size--h1 typography__align--left\"\n\t\t\t>\n\t\tCoding a cinematic camera path\t<\/h1><div\n\t\tclass=\"image-wrap block-article-post-header__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/Dept-winter-camera.jpg\"\n\t\t\t\tclass=\"image block-article-post-header__image\"\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><div class=\"author block-article-post-header__author\" data-animation=\"slide-fade\">\n\t\t\t<img\n\t\t\tclass=\"author__portrait\"\n\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/Brian-Robinson-150x150.jpg\"\n\t\t\talt=\"Brian Robinson\"\n\t\t\/>\n\t\n\t<div class=\"author__text\">\n\t\tBrian Robinson\t\t<br \/>\n\t\tManaging Director UK\n\t\t\t<\/div>\n<\/div>\n\t<div class=\"block-article-post-header__meta\">\n\t\t\t\t\t\t\t<div class=\"block-article-post-header__meta-date\">\n\t\t\t\t<div class=\"block-article-post-header__date-description\">\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t<div class=\"block-article-post-header__published-date\">\n\t\t\t\t\t19 January 2021\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tWelcome to a behind the scenes look at\u00a0<a href=\"https:\/\/winterfestival.deptagency.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">DEPT\u00ae\u2019s Winter Festival<\/a>\u00a0in the making. The project was designed to give an immersive 3D experience, while flexing our technical and creative skills and showing-off our range of capabilities. Just like a computer game, users can explore the grounds and enter buildings to receive snapshot videos of industry trends and pop-culture Top 10s.\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tAs per the brief, we needed a cinematic style camera for the first 15\u201325 seconds of the user being on the map. there were other requirements but in the interest of brevity, i will be focusing on the main topics, including:<br>\t<\/p>\n\n<div class='block-panel-with-rich-text__item'><div class='block-panel-with-rich-text__item-inner'><ul class=\"lists lists__color--richBlack lists__type--circle lists__size--default lists__align--left block-lists__lists\">\n\t<li>a camera which supports the first-person mode;<\/li><li>a smooth path which the camera follows;<\/li><li>the camera must focus on specific points other than the path towards the end of the animation.<\/li><\/ul><\/div><\/div>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tOrthographic vs. perspective cameras\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tInitially, we had used an orthographic camera, but that wouldn\u2019t suit a first-person style tour of the map. orthographic is good for looking down onto maps from a birds-eye view. Without going into detail about field of view (fov) or clipping planes, it would\u2019ve been difficult to force a solution with an orthographic camera.\u00a0\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tA perspective camera is a much better option. It provides a first- person viewing mode with the functionality to zoom in for close-ups of the map\u2019s content. We took a dual approach when using the perspective camera to facilitate a highly interactive 3 d experience. Once the user has finished the tour, we mimicked the orthographic camera by changing the position and fov.\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F&#038;text=Coding%20a%20cinematic%20camera%20path\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div\n\t\tclass=\"image-wrap block-image__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/perspectives.jpg\"\n\t\t\t\tclass=\"image block-image__image\"\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tSPLINE CURVES\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThe next step required creative coding and experimenting with different techniques to move the camera in a cinematic style.\u00a0<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tHaving spent most of the lockdown reading hundreds of articles around shaders, glsl, three.Js and r3 f, the first thing that came to mind was a spline curve. The basic premise is a smoothed curve which is based around points in 3 d space.<br>\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F&#038;text=Coding%20a%20cinematic%20camera%20path\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div\n\t\tclass=\"image-wrap block-image__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/Spline-Curve.jpg\"\n\t\t\t\tclass=\"image block-image__image\"\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tDefining spline curve points\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tWe had to get the points in 3D space, so I added event listeners to the arrow keys:<br>\t<\/p>\n\n<div class='block-panel-with-rich-text__item'><div class='block-panel-with-rich-text__item-inner'><ul class=\"lists lists__color--richBlack lists__type--circle lists__size--default lists__align--left block-lists__lists\">\n\t<li>Up\/down = +\/- on the z-axis<\/li><li>Left\/right = +\/- on the x-axis<\/li><\/ul><\/div><\/div>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tI moved a physical sphere around the map to get the points. The hook we used for attaching event listeners to keys was use key from react-use.<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tOnce we had the raw x, y and z coordinates we could begin the work with generating a spline curve.<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThe easiest way to visualise this is to generate a line mesh which shows the curve, and then render this to the 3D map.<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tR3F has its own declarative syntax for three\u2019s various classes with geometry and materials. Here\u2019s a snippet which is the line rendered in the image above:<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThe first attempt at moving the camera moved in and around the streets of the village to the left of the map. This didn\u2019t work out too well as it wasn\u2019t smooth enough; the angles of the turns were too great which made the camera too jittery. Below is an example of the code for generating the path for the camera:<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThrough trial and error we discovered that the fewer points we used, the less jittery the camera would seem to the end-user. Three.js has a class called\u00a0<a href=\"https:\/\/threejs.org\/docs\/#api\/en\/extras\/curves\/CatmullRomCurve3\" target=\"_blank\" rel=\"noreferrer noopener\">CatmullRomCurve3<\/a>\u00a0which will generate the spline curve.<br>\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tAnimating the camera\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tOnce we had the curve points, we needed two more things: a way of animating it, and a method in three.js which grabs a new point over time.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThankfully, both of these have solutions! In three.Js there is a method you can call on the\u00a0<a href=\"https:\/\/threejs.org\/docs\/#api\/en\/extras\/curves\/CatmullRomCurve3\" target=\"_blank\" rel=\"noreferrer noopener\">CatmullRomCurve3<\/a>\u00a0instance called getPointAt which given a parameter t (range 0\u20131) will return a vector3 (a point of the curve). The range 0\u20131 is essentially the percentage progress along the path. Find more information<a href=\"https:\/\/threejs.org\/docs\/#api\/en\/extras\/core\/Curve.getPointAt\" target=\"_blank\" rel=\"noreferrer noopener\">\u00a0here<\/a>.\u00a0\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tFor animations, react-spring is ideal; it was built by the same people who have been deeply involved with three. The specific tool we used was\u00a0Use spring\u00a0From the react-spring package. This can be used in several ways but below is the way we decided to use this hook:\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tThe process of animating\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tFirstly, we aren\u2019t using the &lt;animated.div> syntax and passing props into the animated div like it shows in the react spring docs; we are using use spring as a standalone hook. Doing it this way means we don\u2019t need to mess around with trying to animate a declarative camera component or map controls from drei using this &lt;animated.div> syntax. I\u2019m sure there would be a way to do this, but with our setup and to be succinct i decided this was the best solution.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tUse spring has several hooks and options you can pass in. the config object is the object where you can define things like the duration and clamp; when set to true,\u00a0the animation stops once the value of the parameter goes over their max value. For example, our one parameter here is a percentage, once this goes over one it will end the animation.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tStarting the animation is similar to css transitions. The transition will take effect upon the value changing, so we use local state ended video. This is initially false as the intro video hasn\u2019t finished. Upon finishing, the on end callback of the video is invoked and this changes the ended state state. When this changes to 1, it starts the use spring animation which results in the percentage value starting to increase.\u00a0\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tWe found the callbacks most useful with use spring were on change, on start and on rest. On start\/on rest are the hooks which run once on the start and end of the animation respectively.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tOn change is an interesting one. we\u00a0have a value starting at 0 and ending at 1 increasing over time; remember what I said above about get point at on the\u00a0<a href=\"https:\/\/threejs.org\/docs\/#api\/en\/extras\/curves\/CatmullRomCurve3\">CatmullRomCurve3?<\/a>\u00a0It accepts a value between 0\u20131 and will return a Vector3 \u2013 match made in heaven!\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tWe now have the use Spring and a path, but how are we updating the camera position?\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tWe get the point on the curve using the animated tick value. We also get a point further along the curve by adding 0.06 to the tick. This gives us two values: one value is just the next position we move the camera to, and the second value is the look at value for the camera. By having the look at value be the tick + 0.06 we are ensuring smooth transitions around bends on the curve.\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tWhere does the camera look?\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThe first part of the whole camera animation only requires us to look in the general direction of the curve. The second half requires rotation while looking at points around the curve (not looking ahead at the path).\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tAnything above 0.35 and we want to change the look at value to be something other than a point further along the path. In fact, we generated another curve using the very first next cam pos after the tick > 0.35, so this gave a very smooth transition between the look at value being slightly ahead along the curve, to the look at value following an entirely different path.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tOn the first attempt i tried to use quaternions and matrices. I also tried putting map controls behind an if book until the end but the animation glitched. Whatever i tried i couldn\u2019t get the transition between look at values, where tick changes from around 0.349 to 0.35. i figured out this was due to drei\u2019s map controls and the default target value which is set under the hood in the three library\u2019s controls. This suddenly dawned on me when i removed the map controls and the complex rotations and linear interpolations and it worked seamlessly.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThe second idea was to define a second spline curve, which would be used for the look at values. The tricky part is that the splines have different lengths, so if we move along the long curve for positional values at a certain speed, then this speed will be slowed right down if the look at curve is significantly smaller in length. This essentially means the camera looks around too slowly. The solution is to increase the tick by an arbitrary amount for the look at curve when using the get point at method, compared to just the tick used on the curve when used for positional movements. This required a lot of trial and error to perfect.\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tThe final result\t<\/h2>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F&#038;text=Coding%20a%20cinematic%20camera%20path\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div\n\tclass=\"jumbotron block-jumbotron__jumbotron jumbotron__background--white jumbotron__text--white\"\n\tdata-position=\"bottom left\"\n>\n\t<div class=\"video video__type--youtube jumbotron__video\">\n\t<div\n\t\tclass=\"video__player jumbotron__video plyr__video-embed js-video-player\"\n\t\tdata-provider=\"youtube\"\n\t\tdata-ratio=\"sixteen-nine\"\n\t\tdata-autoplay=\"false\"\n\t\tdata-loop=\"false\"\n\t\tdata-muted=\"false\"\n\t\tdata-background-mode=\"false\"\n\t\tdata-auto-pause=\"true\"\n\t\tdata-controls=\"progress,play,forward,rewind\">\n\n\t\t\t\t\t<iframe\n\t\t\t\tclass=\"video__ratio--sixteen-nine\"\n\t\t\t\tsrc=\"https:\/\/www.youtube-nocookie.com\/embed\/h5Ri_DrNf2c?origin=https:\/\/plyr.io&#038;iv_load_policy=3&#038;autoplay=0&#038;modestbranding=1&#038;playsinline=1&#038;showinfo=0&#038;rel=0&#038;enablejsapi=1&#038;controls=0&#038;loop=0\"\n\t\t\t\tframeBorder=\"0\"\n\t\t\t\tallow=\"autoplay; fullscreen\"\n\t\t\t\tallowFullScreen\n\t\t\t\ttitle=\"YouTube video\"\n\t\t\t><\/iframe>\n\t\t\t<\/div>\n\n\t<\/div>\n\t\t\t<div class=\"jumbotron__content block-jumbotron__jumbotron-content will-animate\">\n\t\n\t<h2 class=\"heading js-jumbotron-heading heading__size--xxl heading__align--left block-jumbotron__title jumbotron__title jumbotron__title\">\n\t\t\t<span><\/span>\t<\/h2>\n\t\t\t<\/div>\n\t\n<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tFinal thoughts\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tI hope you enjoyed this general overview of how to animate camera paths in a three.Js \/r3 f project.\u00a0I want to give a big shout out to the whole project team, in particular to my colleagues adrian and tunay. We all worked on different aspects of the project; adrian brought everything together in a react-three-fibre project (r3 f), and tunay did some amazing work on the shadows, lighting, baking and performance. I worked on the camera path for the intro sequence.<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tI also want to mention that there is now a tool that allows you to export animated camera paths from blender. This would\u2019ve made my job so much easier, but it was released just as i was finishing up the project so i didn\u2019t get to take advantage of it!\u00a0\u00a0<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tIf i was to give one piece of advice, it would be that if you get a feeling something isn\u2019t going to work (either due to lack of knowledge or that it is literally impossible), then try out something new\u2026 don\u2019t dwell on the failures. Just keep going and learn from the setbacks. It\u2019ll be worth it in the end!<br>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\t<a href=\"https:\/\/winterfestival.deptagency.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Check out the DEPT\u00ae Winter Festival<\/a><br><br>\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F&#038;text=Coding%20a%20cinematic%20camera%20path\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-nl%2Finsight%2Fcoding-a-cinematic-camera-path%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\"\n\t\t\t\tdata-share-title=\"Coding a cinematic camera path\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-highlighted-item-listing\">\n\t<h2\t\tclass=\"typography block-highlighted-item-listing__title typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tMore Insights?\t<\/h2><a\tclass=\"cta-button block-highlighted-item-listing__cta-button cta-button__color--onyxGrey cta-button__style--regular\" href=\"https:\/\/www.deptagency.com\/en-nl\/all-insights\/\" >\n\t\n\t\t\t<span>\n\t\t\tView all Insights\t\t<\/span>\n\t\n<\/a>\n\t<div class=\"block-highlighted-item-listing__cards\">\n\t\t<a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-nl\/insight\/dept-is-the-webby-agency-network-of-the-year\/\"\n\t\t\t\ttitle=\"DEPT\u00ae is the Webby Agency &amp; Network of the Year\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/04\/webby-winners-dept-2026.webp\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"DEPT\u00ae is the Webby Agency &amp; Network of the Year\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tNEWS&emsp;\u2022&emsp;Marjan Straathof\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>DEPT\u00ae is the Webby Agency &amp; Network of the Year<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a><a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-nl\/insight\/war-child-selects-dept-as-strategic-partner-for-digital-transformation\/\"\n\t\t\t\ttitle=\"War Child selects DEPT\u00ae as strategic partner for digital transformation and doubling donation revenue\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/04\/2_DEPTxWarchild_Tagline_1920x1080.png\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"War Child selects DEPT\u00ae as strategic partner for digital transformation and doubling donation revenue\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tBRAND &AMP; MEDIA&emsp;\u2022&emsp;In\u00eas Saraiva\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>War Child selects DEPT\u00ae as strategic partner for digital transformation and doubling donation revenue<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a><a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-nl\/insight\/dept-brings-growth-invention-to-the-webby-shortlists\/\"\n\t\t\t\ttitle=\"DEPT\u00ae brings growth invention to the Webby shortlists\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/03\/webbys-2026-dept.webp\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"DEPT\u00ae brings growth invention to the Webby shortlists\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tNEWS&emsp;\u2022&emsp;Marjan Straathof\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>DEPT\u00ae brings growth invention to the Webby shortlists<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a>\t<\/div>\n<\/div>\n\n<div class=\"block-get-in-touch js-block-get-in-touch\">\n\t<div class=\"block-get-in-touch__column block-get-in-touch__column--left block-get-in-touch__column--richBlack\">\n\t\t<h2 class=\"heading heading__color--white heading__size--xl heading__align--left block-get-in-touch__heading\">\n\t\t\tQuestions?\t<\/h2>\t<\/div>\n\n\t<div class=\"block-get-in-touch__column block-get-in-touch__column--right block-get-in-touch__column--white\">\n\t\t\t\t<div class=\"block-get-in-touch__specialist\">\n\t\t\t\t\t\t\t<\/div>\n\t\t\n\t\t<button\tclass=\"cta-bar block-get-in-touch__cta-bar js-cta-bar\"\n\tid=\"block-get-in-touch-6296e08c3cf3c506fe26610496067cfa\"\n\ttitle=\"Get in touch\"\n\taria-label=\"\"\n\t\t>\n\t<div class=\"cta-bar__container cta-bar__container--size--default\">\n\t\t<div class=\"cta-bar__content\">\n\t\t\t<span class=\"cta-bar__label\">\n\t\t\t\tGet in touch\t\t\t<\/span>\n\t\t\t<i class=\"icon icon icon__color--white icon__size--small icon__arrow-right-circle cta-bar__icon cta-bar__icon\">\n\t<svg width='24' height='24' fill='none' viewBox='0 0 24 24' xmlns='http:\/\/www.w3.org\/2000\/svg'><g class='symbol'><path d='M11.5215 17.2609L17.2607 12L11.5215 6.73912' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><path d='M16.7827 12L6.26099 12' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><circle cx='12' cy='12' r='11' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><\/g><path class='symbol-hover' fill-rule='evenodd' clip-rule='evenodd' d='M23 12C23 5.92487 18.0751 0.999999 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12ZM17.7674 11.4471L12.0283 6.18627L11.0147 7.292L15.3326 11.25L6.26099 11.25L6.26099 12.75L15.3326 12.75L11.0147 16.708L12.0283 17.8137L17.7675 12.5529L18.3706 12L17.7674 11.4471Z' fill='currentColor'\/><\/svg><\/i>\t\t<\/div>\n\t<\/div>\n<\/button>\t<\/div>\n<\/div>\n\n<div\n\tclass=\"flyout-drawer js-flyout-drawer flyout-drawer__position--right\"\n\tdata-trigger=\"#block-get-in-touch-6296e08c3cf3c506fe26610496067cfa\"\n\tdata-instant-open=\"false\"\n>\n\t<div class=\"flyout-drawer__left-mobile-backplate\"><\/div>\n\t<div class=\"flyout-drawer__left-backplate\"><\/div>\n\n\t\t<div class=\"flyout-drawer__left\"><\/div>\n\n\t<button\tclass=\"cta-button flyout-drawer__close cta-button__color--white cta-button__style--text-and-icon js-drawer-close has-flipped-icon\" aria-label=\"Close\" >\n\t<svg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='10.5' cy='10.5' r='9.5' transform='rotate(-90 10.5 10.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='10.5' cy='10.5' r='9.5' transform='rotate(-90 10.5 10.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='m14 7-7 7m0-7 7 7' stroke='var(--dept-button-icon-color)' stroke-width='1.5' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tClose\t\t<\/span>\n\t\n<\/button>\n\t<div class=\"flyout-drawer__right\">\n\t\t<div class=\"pardot-forms block-get-in-touch__pardot-forms js-pardot-forms\">\n\t\t<iframe\n\t\tdata-initial-src=\"https:\/\/www2.deptagency.com\/l\/321011\/2018-03-28\/9l32nf\"\n\t\tclass=\"pardot-forms__embed block-get-in-touch__embed js-pardot-forms-embed\"\n\t\ttype=\"text\/html\"\n\t><\/iframe>\n\t<div class=\"loader pardot-forms__loader loader__color--hanPurple js-pardot-forms-loader\">\n\t<div class=\"loader__first\"><\/div>\n\t<div class=\"loader__second\"><\/div>\n<\/div><\/div>\t<\/div>\n\n\t<button\tclass=\"cta-button flyout-drawer__back cta-button__color--onyxGrey cta-button__style--text-and-icon js-drawer-back has-small-icon\" aria-label=\"Back\" >\n\t<svg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='M21.174 30 11 20.674l10.174-9.326m-9.326 9.328H30.5' stroke='var(--dept-button-icon-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tBack\t\t<\/span>\n\t\n<\/button><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":40,"featured_media":4249808,"template":"","meta":{"_acf_changed":false,"es_utils_meta_schema":"","member_job_title":"","member_linkedin_url":"","dept_alt_featured_image":[],"dept_algolia_noindex":false,"dept_algolia_featured":false,"footnotes":""},"person":[261],"insight-topics":[42358],"class_list":["post-4249806","article","type-article","status-publish","has-post-thumbnail","hentry"],"acf":{"dept_is_3q_page":false,"dept_insight_featured":true,"dept_current_cpt_partner":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Coding a cinematic camera path - DEPT\u00ae<\/title>\n<meta name=\"description\" content=\"DEPT\u00aeser, Rick Thompson, shares his experience with coding a cinematic camera path. He discusses the animation process and shares code snipets\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Coding a cinematic camera path - DEPT\u00ae\" \/>\n<meta property=\"og:description\" content=\"DEPT\u00aeser, Rick Thompson, shares his experience with coding a cinematic camera path. He discusses the animation process and shares code snipets\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/\" \/>\n<meta property=\"og:site_name\" content=\"DEPT\u00ae\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/Dept-winter-camera.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"725\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/\"},\"author\":{\"name\":\"Alexandra Moorhouse\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#\\\/schema\\\/person\\\/57d70812ce2b4e6d6b8cd6afd8963ce1\"},\"headline\":\"Coding a cinematic camera path\",\"datePublished\":\"2021-01-18T23:11:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/\"},\"wordCount\":5,\"image\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Dept-winter-camera.jpg\",\"inLanguage\":\"en-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/\",\"name\":\"Coding a cinematic camera path - DEPT\u00ae\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Dept-winter-camera.jpg\",\"datePublished\":\"2021-01-18T23:11:57+00:00\",\"description\":\"DEPT\u00aeser, Rick Thompson, shares his experience with coding a cinematic camera path. He discusses the animation process and shares code snipets\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/#breadcrumb\"},\"inLanguage\":\"en-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-NL\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Dept-winter-camera.jpg\",\"contentUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Dept-winter-camera.jpg\",\"width\":1200,\"height\":725},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/insight\\\/coding-a-cinematic-camera-path\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.deptagency.com\\\/en-nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Coding a cinematic camera path\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#website\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/\",\"name\":\"DEPT\u00ae\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-NL\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#\\\/schema\\\/person\\\/57d70812ce2b4e6d6b8cd6afd8963ce1\",\"name\":\"Alexandra Moorhouse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-NL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g\",\"caption\":\"Alexandra Moorhouse\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Coding a cinematic camera path - DEPT\u00ae","description":"DEPT\u00aeser, Rick Thompson, shares his experience with coding a cinematic camera path. He discusses the animation process and shares code snipets","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:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/","og_locale":"en_US","og_type":"article","og_title":"Coding a cinematic camera path - DEPT\u00ae","og_description":"DEPT\u00aeser, Rick Thompson, shares his experience with coding a cinematic camera path. He discusses the animation process and shares code snipets","og_url":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/","og_site_name":"DEPT\u00ae","og_image":[{"width":1200,"height":725,"url":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/Dept-winter-camera.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/#article","isPartOf":{"@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/"},"author":{"name":"Alexandra Moorhouse","@id":"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/57d70812ce2b4e6d6b8cd6afd8963ce1"},"headline":"Coding a cinematic camera path","datePublished":"2021-01-18T23:11:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/"},"wordCount":5,"image":{"@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/#primaryimage"},"thumbnailUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/Dept-winter-camera.jpg","inLanguage":"en-NL"},{"@type":"WebPage","@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/","url":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/","name":"Coding a cinematic camera path - DEPT\u00ae","isPartOf":{"@id":"https:\/\/www.deptagency.com\/en-uki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/#primaryimage"},"image":{"@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/#primaryimage"},"thumbnailUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/Dept-winter-camera.jpg","datePublished":"2021-01-18T23:11:57+00:00","description":"DEPT\u00aeser, Rick Thompson, shares his experience with coding a cinematic camera path. He discusses the animation process and shares code snipets","breadcrumb":{"@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/#breadcrumb"},"inLanguage":"en-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/"]}]},{"@type":"ImageObject","inLanguage":"en-NL","@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/#primaryimage","url":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/Dept-winter-camera.jpg","contentUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/05\/Dept-winter-camera.jpg","width":1200,"height":725},{"@type":"BreadcrumbList","@id":"https:\/\/www.deptagency.com\/en-nl\/insight\/coding-a-cinematic-camera-path\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.deptagency.com\/en-nl\/"},{"@type":"ListItem","position":2,"name":"Coding a cinematic camera path"}]},{"@type":"WebSite","@id":"https:\/\/www.deptagency.com\/en-uki\/#website","url":"https:\/\/www.deptagency.com\/en-uki\/","name":"DEPT\u00ae","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.deptagency.com\/en-uki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-NL"},{"@type":"Person","@id":"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/57d70812ce2b4e6d6b8cd6afd8963ce1","name":"Alexandra Moorhouse","image":{"@type":"ImageObject","inLanguage":"en-NL","@id":"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g","caption":"Alexandra Moorhouse"}}]}},"_links":{"self":[{"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/insight\/4249806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/insight"}],"about":[{"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/users\/40"}],"version-history":[{"count":0,"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/insight\/4249806\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/media\/4249808"}],"wp:attachment":[{"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/media?parent=4249806"}],"wp:term":[{"taxonomy":"person","embeddable":true,"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/person?post=4249806"},{"taxonomy":"insight-topic","embeddable":true,"href":"https:\/\/www.deptagency.com\/en-nl\/wp-json\/wp\/v2\/insight-topics?post=4249806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}