# Three.js Published articles for Three.js. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Building Depth: Designing and Developing a 3D Renderer Inside Figma DevFeed: [Building Depth: Designing and Developing a 3D Renderer Inside Figma]() Original publisher: [Read original article]() Author: Aleksei Kipin Published: 2026-09-13T11:34:39Z Content type: article Language: en Sources: [Codrops]() Topics: [Figma 3D renderer](), [Figma]() Tags: [3d](), [3d-design](), [3d-modeling](), [3d-renderer-for-figma](), [3d-rendering](), [3d-visualization](), [3d-workflow](), [articles](), [case-study](), [creative-development](), [depth-3d-renderer](), [depth-figma](), [depth-figma-plugin](), [design-engineering](), [design-tools](), [figma](), [figma-3d](), [figma-3d-renderer](), [figma-plugin](), [figma-plugin-design](), [interactive-3d](), [plugin-development](), [product-design](), [product-design-case-study](), [real-time-rendering](), [three-js](), [ui-design](), [ux-design](), [visualization](), [webgl](), [workflow]() ### AI overview An article about building Depth, a Figma plugin for quickly rendering 3D models during design work. It describes the workflow, plugin architecture, rendering behavior, and export approach. ### Source excerpt A look at how Depth came together, from building a 3D renderer inside Figma to designing a website that explores what it can do. ## Inside the First Three.js Conference in Paris DevFeed: [Inside the First Three.js Conference in Paris]() Original publisher: [Read original article]() Author: Manoela Ilic Published: 2026-09-10T08:30:11Z Content type: news Language: en Sources: [Codrops]() Topics: [Three.js community](), [webgpu]() Tags: [3d-web-development](), [ai](), [articles](), [browser](), [coding](), [codrops](), [community](), [conference](), [creative-coding](), [creative-development](), [creative-technology](), [creativity](), [creators](), [developers](), [digital-experiences](), [event](), [experiments](), [frontend-development](), [generative-art](), [immersive-web](), [interactive-web-experiences](), [javascript-3d](), [shaders](), [three-js](), [three-js-community](), [three-js-conference](), [three-js-conference-paris](), [three-js-demos](), [three-js-developers](), [three-js-projects](), [three-js-talks](), [three-js-web-development](), [three-js-workshops](), [web-3d](), [web-design](), [webgl](), [webgpu]() ### AI overview A live look at the first Three.js Conference in Paris, covering community moments, opening talks, a Zelda rebuild moving from WebGL to WebGPU, and a discussion about AI and coding. ### Source excerpt A look inside the first-ever Three.js Conference, straight from Paris. ## Turning Names Into Digital Architecture with Three.js DevFeed: [Turning Names Into Digital Architecture with Three.js]() Original publisher: [Read original article]() Author: Serhii Polyvanyi Published: 2026-09-09T17:55:00Z Content type: article Language: en Sources: [Codrops]() Topics: [Three.js community](), [Three.js custom shaders](), [Three.js shaders]() Tags: [3d](), [architecture](), [articles](), [best-free-frontend-development-resources](), [best-javascript-libraries-for-animations](), [best-web-development-blogs](), [conference](), [creative-coding](), [creative-ui-ideas-for-web-design](), [css-animations](), [css-grid-vs-flexbox](), [css-hover-effects](), [css-only-effects](), [experiment](), [frontend-development](), [gsap-animation-examples](), [how-to-build-a-responsive-website-from-scratch](), [how-to-create-parallax-scrolling-effects](), [how-to-create-smooth-css-transitions](), [how-to-make-a-portfolio-website-interactive](), [how-to-optimize-animations-for-performance](), [html5-and-css3-tricks](), [javascript-effects](), [javascript-ui-interactions](), [micro-interactions-for-websites](), [modern-web-development](), [react-ui-animations](), [step-by-step-guide-to-webgl-animations](), [svg-animations-in-css](), [three-js](), [three-js-3d-animations](), [three-js-conference](), [ui-ux-design-tips](), [web-design-tutorials](), [webgl-tutorials-for-beginners](), [wordpress-themes-and-plugins]() ### AI overview An interactive Three.js experiment turns typed names into lightweight, metallic-looking 3D letter structures. It explains contour generation, interpolation and deformation, structural line geometry, and a custom shader with a baked reflection map. ### Source excerpt For the Three.js Conference in Paris, BL/S® created an interactive experiment that transforms your name into a dynamic 3D structure. ## Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU DevFeed: [Still: From Akira to Ink Wash, Building a Generative Garden in WebGPU]() Original publisher: [Read original article]() Author: Ming Jyun Hung Published: 2026-09-09T14:11:57Z Content type: article Language: en Sources: [Codrops]() Topics: [webgpu](), [procedural flowers]() Tags: [3d](), [articles](), [case-study](), [creative-coding](), [deep-dive](), [flower-animation](), [generative](), [generative-art](), [generative-garden](), [generative-tendrils](), [gpu-instancing](), [ink-wash-effect](), [interactive-3d](), [japanese-art](), [japanese-print-style](), [procedural](), [procedural-animation](), [procedural-art](), [procedural-flowers](), [real-time](), [real-time-3d](), [three-js](), [three-js-case-study](), [three-js-shading-language](), [toon-shading](), [tsl](), [tsl-shaders](), [vat](), [vertex-animation-textures](), [webgpu](), [webgpu-shaders]() ### AI overview A technical deep dive into a WebGPU-based, real-time 3D generative garden. It describes combining toon shading, ink-wash shadows, silk-like grain, and procedural flowers and tendrils to translate Japanese print-inspired visual principles into an interactive web scene. ### Source excerpt A technical deep dive into Still, exploring how WebGPU, procedural systems, and Japanese art influences come together to create a living generative garden. ## Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL DevFeed: [Building an Infinite Liquid Glass Grid with Three.js, WebGPU, and TSL]() Original publisher: [Read original article]() Author: Filip Kantedal Published: 2026-09-08T13:09:48Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [webgpu](), [Three.js custom shaders](), [refraction shader](), [signed distance functions]() Tags: [3d-web-experiences](), [chromatic-dispersion](), [creative-coding](), [custom-shaders](), [glass](), [glass-shader](), [glassmorphism](), [gpu-rendering](), [infinite](), [infinite-carousel](), [infinite-grid](), [interactive-3d](), [liquid-glass](), [next-js](), [r3f](), [react-three-fiber](), [refraction-shader](), [sdf](), [shader-effects](), [signed-distance-functions](), [three-js](), [three-js-shading-language](), [three-js-webgpu](), [tsl](), [tsl-shaders](), [tutorials](), [video](), [webgl](), [webgpu](), [webgpu-shaders]() ### AI overview A tutorial on building an infinite liquid-glass grid in the browser with Three.js, WebGPU, TSL, custom shaders, and video textures. ### Source excerpt An exploration of infinite grids, liquid glass, and video refraction using Three.js, WebGPU, TSL, and custom shaders. ## Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU DevFeed: [Drawing With Light: An Exploration of Lit GPU Tubes with TSL and WebGPU]() Original publisher: [Read original article]() Author: Mathis Biabiany Published: 2026-09-07T14:01:56Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [Three.js shaders]() Tags: [3d](), [creative-coding-webgpu](), [curve-geometry](), [generative-art-three-js](), [gpu-animation](), [gpu-generated-geometry](), [gpu-rendering](), [gpu-tubes](), [lit-tubes-three-js](), [meshline-three-js](), [meshline-webgpu](), [meshstandardnodematerial](), [nodematerial-three-js](), [parallel-transport-frames](), [pbr-materials-three-js](), [playground](), [procedural-curves](), [procedural-geometry](), [procedural-tubes](), [three-js](), [three-js-shaders](), [three-js-tsl](), [three-js-webgpu](), [tsl](), [tsl-shaders](), [tube-geometry](), [tube-renderer](), [webgpu](), [webgpu-rendering](), [webgpu-shaders]() ### AI overview A technical exploration of rendering lit GPU tubes with TSL and WebGPU. It contrasts screen-facing meshlines with tube geometry that can receive lighting, shading, and occlusion. ### Source excerpt How a meshline habit turned into a tube renderer, and the three ways I got the maths wrong along the way. ## Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js DevFeed: [Building a Real-Time 3D Face Mask with MediaPipe, Threlte and Three.js]() Original publisher: [Read original article]() Author: Marek Jóźwiak Published: 2026-09-06T13:09:52Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [Three.js webcam]() Tags: [3d](), [3d-face-mask](), [canonical-face-model](), [creative-coding](), [face-landmarks](), [face-mesh](), [face-tracking](), [facial-landmarks](), [generative-graphics](), [gpu](), [inference](), [interactive-3d](), [javascript-3d](), [mediapipe](), [mediapipe-face-landmarker](), [mesh](), [real-time](), [real-time-3d](), [real-time-face-tracking](), [svelte](), [three-js](), [three-js-face-mask](), [three-js-webcam](), [threlte](), [threlte-three-js](), [tutorial](), [tutorials](), [video](), [vision](), [wasm](), [webcam](), [webcam-effects](), [webcam-face-tracking](), [webgl](), [webgl-face-tracking]() ### AI overview Tutorial on building a real-time textured 3D face mask by mapping MediaPipe face landmarks onto a Three.js mesh with Threlte. ### Source excerpt Learn how MediaPipe's face landmarks, Google's canonical face model, and Three.js come together to create a real-time textured 3D face mask. ## Building an Infinite Loom: Unravelling Images into Threads with Three.js DevFeed: [Building an Infinite Loom: Unravelling Images into Threads with Three.js]() Original publisher: [Read original article]() Author: Clément Grellier Published: 2026-09-05T12:50:25Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [Web Development]() Tags: [creative-coding](), [creative-web-experiments](), [digital-art](), [frontend-animation](), [generative-art](), [glsl-shaders](), [gsap](), [html](), [image-animation](), [image-distortion](), [image-effects](), [image-slider](), [images](), [infinite-slider](), [interactive-images](), [interactive-web-design](), [javascript-animation](), [marquee](), [playground](), [ribbon-animation](), [shader-effects](), [shaders](), [thread-animation](), [three-js](), [three-js-demo](), [three-js-shaders](), [unraveling-effect](), [webgl](), [webgl-animation](), [webgl-demo]() ### AI overview A Three.js tutorial for an infinite image strip whose cards are split into independently animated horizontal ribbons. It explains how separate geometry and shaders create weaving, unraveling, gaps, fading, and varied thread motion. ### Source excerpt An experimental Three.js demo that transforms images into flowing ribbons, weaving them together and unraveling them as they move across the screen. ## Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js DevFeed: [Beyond the Luminance Ramp: A Shape-Aware ASCII Renderer in Three.js]() Original publisher: [Read original article]() Author: Edoardo Lunardi Published: 2026-09-04T15:01:38Z Content type: tutorial Language: en Sources: [Codrops]() Topics: [shape-aware rendering](), [ASCII art shader](), [Three.js shaders](), [Three.js custom shaders]() Tags: [3d](), [ascii](), [ascii-art-shader](), [ascii-dithering](), [ascii-shader](), [atlas](), [browser-based-ascii-renderer](), [creative-coding-three-js](), [custom-element-webgl](), [draggable](), [draggable-3d-logo](), [glsl-ascii-shader](), [glyph-atlas-rendering](), [glyph-matching-algorithm](), [gpu](), [gpu-ascii-rendering](), [gpu-glyph-search](), [interactive-ascii-art](), [luminance-ramp-alternative](), [procedural-ascii-art](), [real-time-ascii-rendering](), [shaders](), [shape-aware-ascii-renderer](), [shape-aware-rendering](), [three-js](), [three-js-ascii-renderer](), [three-js-custom-shaders](), [three-js-shader-tutorial](), [three-js-webgl](), [tutorials](), [webgl](), [webgl-ascii-art](), [webgl-post-processing](), [webgl-shader-tutorial]() ### AI overview A Three.js ASCII renderer improves on luminance-only glyph selection by sampling each character cell's shape and matching it against printable glyphs on the GPU. ### Source excerpt The Codrops mark, rebuilt as a draggable solid and printed in ASCII on the GPU, where every character cell searches 95 glyphs for its own. ## One-Shot Any Web App with Gradio's gr.HTML DevFeed: [One-Shot Any Web App with Gradio's gr.HTML]() Original publisher: [Read original article]() Author: yuvraj sharma; hysts; Freddy Boulton Published: 2026-02-18T00:00:00Z Content type: article Language: en Sources: [Hugging Face - Blog]() Topics: [web applications](), [modern web development](), [HTML5 and CSS3 tricks](), [React UI animations]() Tags: [3d](), [app](), [artificial-intelligence](), [claude](), [community](), [css](), [gradio](), [html](), [html5](), [javascript](), [object-detection](), [python](), [react](), [spaces](), [speech](), [three-js](), [transcription](), [vibe-coding]() ### AI overview The article shows how Gradio's gr.HTML can create interactive, single-file Python web apps without a separate frontend build step. Examples include timers, a kanban board, visual ML result viewers, 3D controls, and live speech transcription. ### Source excerpt We're on a journey to advance and democratize artificial intelligence through open source and open science. ## Behind the build: 2025's BFCM globe in a pinball machine 🌎🕹 DevFeed: [Behind the build: 2025's BFCM globe in a pinball machine 🌎🕹]() Original publisher: [Read original article]() Author: Shopify Engineering Published: 2025-12-03T14:28:24Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Shopify](), [Three.js](), [real-time](), [React](), [browser](), [Three.js shaders]() Tags: [2025](), [3d](), [browser](), [js](), [performance](), [physics](), [pixel](), [react](), [react-three-fiber](), [real-time](), [server-sent-events](), [shopify](), [stream](), [three-js]() ### AI overview Shopify describes its 2025 BFCM live globe, implemented as a browser-based pinball machine that visualizes merchant sales in real time. The three.js app uses react-three-fiber, server-sent events, a physics engine, VR support, and shaders for its display animations. ### Source excerpt Real-time merchant sales rendered on our globe, Easter eggs galore, and a pinball machine because... why not? ## The Future of React Native Graphics: WebGPU, Skia, and Beyond DevFeed: [The Future of React Native Graphics: WebGPU, Skia, and Beyond]() Original publisher: [Read original article]() Author: William Candillon Published: 2025-06-20T15:37:49Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [React Native](), [webgpu](), [Three.js](), [GPU](), [Web]() Tags: [3d](), [gpu](), [react](), [react-native](), [react-three-fiber](), [three-js](), [web](), [webgpu]() ### AI overview The article explains how WebGPU and Skia Graphite are expanding React Native graphics. It describes a unified backend architecture, closer alignment with the web ecosystem, general-purpose GPU computing, and support for Three.js and React Three Fiber, with examples running across iOS and Android. ### Source excerpt WebGPU is revolutionizing React Native graphics by enabling a unified backend architecture, leveraging web ecosystem giants like Three.js for 3D experiences, and facilitating general-purpose GPU computing for tasks like machine learning. This has directly led to significant performance enhancements and expanded platform support for React Native Skia, with the upcoming Skia Graphite promising features like automatic threading and seamless 2D/3D composition. ## What's new in Astro - March 2025 DevFeed: [What's new in Astro - March 2025]() Original publisher: [Read original article]() Author: Sarah Rainsberger Published: 2025-03-31T00:00:00Z Content type: news Language: en Sources: [The Astro Blog]() Topics: [Astro](), [releases](), [GitHub](), [GSAP](), [Three.js](), [GraphQL]() Tags: [2025](), [astro](), [github](), [graphql](), [gsap](), [releases](), [three-js](), [web-development]() ### AI overview A March 2025 update from the Astro ecosystem highlights Astro 5.5, Astro reaching 50,000 GitHub stars, upcoming ViteConf participation, community learning resources, adopters, and recent projects built with Astro. It also features case studies covering accessibility testing, remote web development, and creative sites using technologies such as Three.js, GSAP, WebGPU, GraphQL, and Socket.IO. ### Source excerpt March 2025 - Celebrating 50K GitHub stars, ViteConf, and more! ## How did we build 3D animations in mobile apps? DevFeed: [How did we build 3D animations in mobile apps?]() Original publisher: [Read original article]() Author: Yağız Gürgül Published: 2025-01-29T16:59:35Z Content type: tutorial Language: en Sources: [Wise Engineering - Medium]() Topics: [Three.js](), [Mobile](), [WebGL](), [HTML]() Tags: [3d](), [animation](), [gltf](), [html](), [mobile](), [optimisation](), [optimization](), [three-js](), [webgl]() ### AI overview Wise describes how it brought its 3D illustrations to life as interactive real-time animations in mobile apps. The team chose three.js scenes rendered in local HTML files inside mobile app web views, using WebGL for both iOS and Android, and then optimized large glTF assets for mobile delivery. ### Source excerpt In March 2023, Wise launched its new brand -- as part of it, we introduced a collection of bold new 3D illustrations. While visually stunning, our brand team had bigger ambitions to bring them to life and elevate Wise further. This took us on a journey to understand the technical landscape and challenges around creating a seamless multi-platform solution for interactive 3D animations. interactive 3D intro on Wise iOS appThe new illustration set in Wise Our new illustration set took inspiration from icons, allowing us to communicate with a global audience. They're unique, bold and dynamic, even when still. They give us opportunities to share moments of delight with our customers and help our brand stand out from billboard to button. check out https://wise.design/ for more! What sets illustrations at Wise apart is that they're not static. Each one is paired with a crafted 3D model, featuring detailed UV maps, precise shading, and carefully designed lighting. This raises an exciting question: What if we rendered these illustrations dynamically in real time, making them interactive on mobile apps? Native or web view? To render illustrations in real time, we explored several technical solutions: Native Filament three.js We opted to create 3D scenes using three.js, one of the most popular open-source web projects. Some of the reasons behind this include: Managing native solutions for iOS and Android platforms would demand extra engineering effort. The support and documentation available for three.js surpass others. The web view solution delivers native-like performance by using WebGL on both platforms. As a result, we consistently achieve 60/120 FPS across all scenes on both devices. The plan was simple. Build simple HTML files that render 3D scenes and load these files locally in mobile apps 🚀 But we had a "huge" problem... The 3D models were specifically designed for static illustrations, resulting in a high polygon count that contributes to larger file sizes. For instance ## How We Built the BFCM 2023 Globe DevFeed: [How We Built the BFCM 2023 Globe]() Original publisher: [Read original article]() Author: Diego Macario Bello Published: 2024-10-30T19:03:30Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Three.js](), [Three.js custom shaders](), [Three.js shaders](), [real-time](), [3D](), [Shopify](), [data]() Tags: [3d](), [performance](), [react-three-fiber](), [real-time](), [render](), [shaders](), [shopify](), [three-js](), [vertex](), [visualization]() ### AI overview This article explains how Shopify built and optimized an interactive real-time 3D globe for BFCM purchases. It covers arcs representing orders, Bézier curves, mesh construction, camera-facing vertex-shader techniques, UV-based texturing, and independently animated dissolve effects using Three.js and React-three-fiber. ### Source excerpt Every year for Black Friday Cyber Monday (BFCM), we put together a real-time visualization of purchases made through Shopify-powered merchants worldwide. This year we're cooking up something big, and in anticipation we wanted to show you how we built the globe last year. Video of BFCM 2023 Globe Besides going for better visuals, a big focus was performance. ## Coding the stars - an interactive constellation with Three.js and React Three Fiber DevFeed: [Coding the stars - an interactive constellation with Three.js and React Three Fiber]() Original publisher: [Read original article]() Author: Francesco Sansalvadore Published: 2023-08-04T07:00:00Z Content type: tutorial Language: en Sources: [Supabase Blog]() Topics: [R3F](), [Three.js](), [coding]() Tags: [animation](), [article](), [coding](), [js](), [react-three-fiber](), [three-js]() ### AI overview Supabase explains how it built an interactive constellation animation for Launch Week 8 using Three.js and React Three Fiber. The article introduces the approach, scene setup, core R3F concepts, dependencies, particle geometry, materials, blending, and lighting. ### Source excerpt How we built a constellation of stars with Three.js and React Three Fiber. ## A World Rendered Beautifully: The Making of the BFCM 3D Data Visualization DevFeed: [A World Rendered Beautifully: The Making of the BFCM 3D Data Visualization]() Original publisher: [Read original article]() Author: Mikko Haapoja Published: 2020-12-04T15:20:30Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Data visualization](), [Three.js](), [3D](), [PBR materials three.js](), [Web]() Tags: [3d](), [data-visualization](), [js](), [lighting](), [models](), [performance](), [three-js](), [visualization](), [web]() ### AI overview Shopify engineers describe the making of the BFCM 3D data visualization and its Live View Globe. The article covers rapid prototyping with three.js, a layered architecture designed for encapsulation and code reuse, and the use of artist-created 3D models, physically based rendering, 32-bit EXR environment maps, and image-based lighting to achieve realistic performance and visuals. ### Source excerpt By Mikko Haapoja and Stephan Leroux 2020 Black Friday Cyber Monday (BFCM) is over, and another BFCM Globe has shipped. We're extremely proud of the globe, it focused on realism, performance, and the impact our merchants have on the world. The Black Friday Cyber Monday Live Map We knew we had a tall task in front of us this year, building something that could represent orders from our one million merchants in just two months. ## How We Built Size.link DevFeed: [How We Built Size.link]() Original publisher: [Read original article]() Author: Daniel Beauchamp Published: 2020-07-13T17:00:00Z Content type: article Language: en Sources: [Shopify Engineering](), [Shopify Engineering - Shopify Engineering]() Topics: [Shopify](), [immersive web](), [3D](), [Android](), [iOS](), [Quick Look](), [JavaScript](), [Three.js](), [browser](), [Web]() Tags: [3d](), [android](), [browser](), [covid](), [free](), [hack](), [ios](), [javascript](), [shopify](), [smartphone](), [three-js](), [web](), [webgl]() ### AI overview Shopify explains how it built Size.link, a free web-based augmented reality tool that helps shoppers visualize a product's physical size using a smartphone camera. The solution uses platform-native AR viewers on iOS and Android to avoid requiring a dedicated app. ### Source excerpt On July 20, 2020 we held ShipIt! Presents: AR/VR at Shopify. Daniel talked about what we're doing with AR/VR at Shopify. The video of the event is available. Size.link is a free tool built by Shopify's Augmented Reality (AR) team that lets anyone view the size of a product in the space around them using their smartphone camera. The tool came out of our April Hack Days focused on helping retailers impacted by Covid-19. ## Three.js extrude SVG path DevFeed: [Three.js extrude SVG path]() Original publisher: [Read original article]() Author: Stanko Published: 2019-12-18T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Three.js](), [SVG](), [3D](), [Graphics]() Tags: [3d](), [demo](), [export](), [getting-started](), [gotchas](), [graphics](), [how-to](), [svg](), [three-js]() ### AI overview A tutorial on importing SVG data into Three.js with SVGLoader and extruding SVG paths into 3D geometry with ExtrudeGeometry. It explains setup details and common issues, including the inverted Y axis when mapping SVG coordinates into Three.js. ### Source excerpt Update, September 2025 # Replaced path.toShapes(true) with SVGLoader.createShapes(path) because toShapes misses some of the SVG-specific logic implemented in the loader. Thanks to forresto who pointed it out. Also updated the demo to use a fresh version of ThreeJS. These days I'm playing with three.js again. I'm not an expert but I enjoy playing with graphics. Conveniently, a friend of mine sent me this Dribble, and I thought it would be a perfect exercise to try making it. I still haven't done it, but I did some exploration on how to built it. My plan was to draw the parallaxing layers as vectors, import it in three.js and use ExtrudeGeometry to give them a third dimension. To three.js ninjas this might be funny, but it took me some time. I haven't found well documented way, plus there are a couple of gotchas. And that is the reason I want to share this process with you. Before we start # I'll assume you have a basic understanding of three.js, and how to setup a scene. If you are just starting with it, I recommend going through their excellent Getting Started guide first. If you just want to see the end result, feel free to jump to the code or the live demo. SVGLoader # Three.js provides us with SVGLoader, but it is not the part of the main export. It is an addon, and can import it like this: import { SVGLoader } from "three/addons/loaders/SVGLoader.js"; Like it's name suggest this class loads SVG from an URL and parses it into three.js entries. If you already have SVG markup as a string, it is easy to parse it, but it is also easy to miss how to do it in the documentation. SVGLoader extends base Loader class, which contains .parse() method. That means we can do this: // Get SVG's markup const svgMarkup = document.querySelector('svg').outerHTML; const loader = new SVGLoader(); const svgData = loader.parse(svgMarkup); Now when we know how to get SVG data to three.js, let's try to extrude it. Extrude # You'll need a SVG, I used my logo: To get to the shapes we can ex ## JavaScript animation loop DevFeed: [JavaScript animation loop]() Original publisher: [Read original article]() Author: Stanko Published: 2018-03-18T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [JavaScript](), [Three.js](), [Game Development](), [Web Development]() Tags: [animation](), [game-development](), [javascript](), [javascript-animation](), [three-js](), [timing]() ### AI overview This tutorial explains why frame-count-based JavaScript animations can run at the wrong speed when requestAnimationFrame is delayed or throttled. It shows how to use elapsed, or delta, time to maintain movement at the intended rate, using a three.js game-animation context. ### Source excerpt I've been really busy lately, doing both work and pet projects. At the moment I'm playing with three.js trying to clone old DOS game to JavaScript. Games (and animations in general) need animation loop in which we are going to update the scene and re-render it. Example animations are simplified and they just move a box 60px per second. But the concepts applied are universal and can be used for more complicated real life cases. Timing problem # We all know that animating should be done using requestAnimationFrame. My first attempt ended up being naive and it looked something like this: const box = document.querySelector('.Box'); // Initial position let position = 0; function animate() { // Updating scene logic // moving box for one pixel per frame // "requestAnimationFrame" is optimized for 60fps // so we should get smooth movement of 60px per second position += 1; // Render updated scene box.style.transform = `translateX(${ position }px)`; // Start next frame requestAnimationFrame(animate); } // Start animation animate(); At the first glance this looks fine. But it has one major problem. requestAnimationFrame is usually triggered 60 times per second, but often this is not the case. For example, the most browsers will pause it if tab goes to background. Busy (or low-end) CPU will also slow it down. Imagine for some reason that is does get triggered only 10 times per second.In the example bellow I faked it by using 100ms setTimeout. In that case our box will be moved by 1px every 100ms, ending up on 10px per second. This means our animation speed is relative to how many times requestAnimationFrame is called per second. That is the big timing problem we are trying to solve. Our animation should calculate the right position based on time passed, rather then just incrementing it by 1px each update. Delta time to the rescue # Now we know what to do - adjust the position based on time passed between two updates. Every time we are doing the update, we are going to calculate