# Three.js Three.js is a JavaScript 3D library with documentation, examples, and developer tools. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## 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. ## Weekly Code Challenge (spring 2021) DevFeed: [Weekly Code Challenge (spring 2021)]() Original publisher: [Read original article]() Author: Stanko Published: 2021-09-30T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [Code Challenge](), [Programming](), [JavaScript](), [Three.js](), [CSS](), [browser]() Tags: [browser](), [code](), [code-challenge](), [css](), [demo](), [game](), [javascript](), [programming]() ### AI overview A retrospective on a ten-week weekly code challenge held in a Belgrade office during spring 2021. The challenge produced 47 browser-based submissions, with participants free to choose their tools and themes. ### Source excerpt If you just want the see the submissions, jump to the Weekly Code Challege website. But please bare in mind that the most of these were created in a couple of hours. This post is long overdue. Earlier this year, I came with an idea to organize a weekly code challenge in our Belgrade office. With the whole COVID situation going on, I hoped it could inspire people to start hacking and make programming fun again. Some people were interested, so we ran the challenge in spring this year, from April to June. It lasted for ten weeks, each week had a different theme and there was a total of 47 submissions. We didn't impose a lot of rules, it just had to run in a browser, but you could use any library or framework and spend as much (or as little) time as you wanted. Challenge started hot, but as weeks passed by, interest slowly faded away. After ten weeks we decided to end it. To be honest, it lasted longer than I initially hoped. A lot of people tried new stuff, played around and had fun hacking little things. I dare to say it was a complete success and I have to say thanks to all the people who participated! Therefore, I urge you to organize something similar yourself, in your office, university or city, it doesn't matter as long as people are hacking for the sake of it. It is a wonderful and fulfilling process. Shameless self promotion # I was happy that people were interested to participate, and I enjoyed it myself tremendously. In the process, I learned a thing of two and hacked together a few things I would probably never try if there wasn't for the code challenge. Out of the nine things I created (I skipped the last week), these three are my favorite: ASCII rendered Flappy Bird clone Sloppy clone of The Unfinished Swan CSS only 3D people making waves All three are completely different and they vary from a vanilla JavaScript ASCII rendered game, followed by a simple ThreeJS demo to the complex 3D shapes CSS objects.To be fair, these are only complex in the context of u ## 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