Particles are cool! Example,

I had this idea back in 2014 of getting the points from premade 3D models (similar to the video above), and using them to do fancy animations in Threejs. Then I hit a knowledge wall and shelved it. Until today…

I had this idea to use the concept of spherical projection to make a nifty thing with the webcam and particles.

The end result is meh-okayish. Play with it here

I randomly came across this awesome project by makc. At first I thought it was a rendered photo of a model made by dedicated 3D software like Maya and Blender. But no, it was actually running live on the web using Three.js! Wow.

It is basically the explosion effect I’ve been after, whereby the whole country, not just a bar, extrudes outwards to indicate the value of a data point.

I had been working at this problem for sometime, but my results were rather unspectacular. Also my approach of using only the outlines of the countries meant I was limited in how the coutries could be rendered. Getting the countries' surfaces would require using triangulation, a rabbit hole I wasn’t particularly keen on entering.

How to do picking (i.e. country selection on mouseclick)?

I came across this project by Steve Hall. In it he makes a 3d map using Three.js and D3 that is responsive to mouseover and click events. He also has a great writeup that shares how he tackled the problem.

At the time, I didn't really understand what the article was saying. But two things I did takeaway were,

1. the use of Three.js’s built-in raycasting to figure out the mouse’s coordinates in 3d space
2. the use of an algorithm to determine if a point is inside a bounded region

One of the elements I want to have is a 3D globe that will show how much money is invested in each country via all the mutual funds managed by the bank.

I don’t want the globe to just be something pretty to look at. It also needs to respond to mouse events such as when a user clicks on a country.

How to go about this?

A lot of Googling led me to these useful articles,

• How to make a 3D Globe (Mathematica Stack Exchange)
• CSS Shaders (Altered Qualia)
• Spinning Globe (Peter Collingridge)

My inspiration for this project is Mr. doob’s CSS 3D Periodic Table. (Be sure to check it out!) I saw it about two years ago and it has since been in the back of my mind to use it as a base UI.

Why visualize mutual funds? People’s interaction with mutual funds tend to be very black box. You put down an initial amount and then get something in the mail every month telling you whether it went up or down in value. But what actually happens to your money?

I followed this tutorial by Jerome Etienne on generating a procedural city using Three.js.

The tutorial was a way to learn more about Three.js. Most of my time was spent figuring out how to update methods used in the tutorial (r59) that are deprecated in newer versions of Three.js (I was using r73).

See it action here

I wanted to recreate this music video in Three.js. The effects in the video are straightforward, yet mesmerizing. And the simple shapes used seemed like something I could duplicate.

Check out the end result!
Speakers / headphones are a must!

Disclaimer
On my computer, the demo works and is in-synch with the original music video. However, there seems to be variance depending on the machine it’s run on. Also, it has only been tested for Chrome (desktop) and Firefox (desktop). So I hope it works when you view it…