I'm building a social network and collaboration tool based on mind maps, documenting my work in this series of blog posts. Follow me if you're interested in what I've learned along the way about building web apps with React, Tailwind CSS, Firebase, Apollo/GraphQL, three.js and TypeScript.
Part I: Drawing a Mind Map with Three.js and React
TL;DR: I've figured out how to render React components onto a 3D model.
Part II: Drawing a Mind Map with Three.js and React, for Real This Time
TL;DR: I've managed to arrange the child nodes around my mind map root in a circle.
Part III: Still Trying to Draw a Mind Map with Three.js and React
TL;DR: I struggled with adding the next level of mind map child nodes.
Part IV: Drawing a Mind Map with Force Directed Graphs
TL;DR: I threw away most of my former attempts and decided to use a library to render my mind map instead.
Part V: How to Fix Blurry Text on HTML Canvases on Mobile Phones
TL;DR: I found a way to make sure my mind map looks good on screens with high pixel per inch ratio.
Part VI: Resizing a Three.js Scene When the Browser Window Size Changes
TL;DR: I managed to re-render my mind map when the viewport gets resized.
Part VII: Adding Trackball Controls to a Three.js Scene with Sprites
TL;DR: You can now zoom, pan and rotate the 3D model of my mind map.
Part VIII: Local State Management with Apollo Client
TL;DR: I added a button to pause animations, using local state management provided by the Apollo Client library.
Part IX: TypeScript All the Things!
TL;DR: I converted my project to TypeScript.
Part X: Adding a Click Handler to a Three.js Model
TL;DR: I managed to log a statement to the browser console when a mind map node is clicked.
Part XI: Writing a TypeScript Type Definition for a JavaScript npm Package
TL;DR: I fought TypeScript and I won (sort of).
Part XII: Animating Camera Movement in Three.js
TL;DR: I added a smooth animation to the camera as it focuses on a 3D object when it is clicked.
Top comments (0)